Beauty

Różowe rozwijane menu z ikonami czcionki Font Awesome


Demo

Udostępniamy kod HTML rozwijanego menu z użyciem ikon czcionki Font Awesome do wykorzystania na własnej stronie www lub blogu. Menu jest responsywne - dostosowuje się do różnych rozdzielczości wyświetlaczy.

Kod HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.menu_container {
    margin-bottom:30px;
    height:auto;
    clear:both;
    float:left;
    border-radius:2px;
    box-sizing:border-box;
    -moz-box-sizing:border-box
}
.menu_container.full_width {
    width:100%
}
.menu_container>ul {
    position:relative;
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    width:100%;
    background:inherit;
    height:0;
    overflow:hidden
}
.menu_container>ul>li {
    position:relative;
    background:inherit;
    display:block;
    padding:0;
    margin:0
}
.menu_container>ul>li>a {
    padding:8px 25px;
    display:block;
    color:#fff;
    text-decoration:none;
    text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);
    font-size:16px;
    line-height:28px;
    height:28px;
    font-family:"Roboto Condensed", sans-serif;
    transition:background-color 200ms linear;
    -moz-transition:background-color 200ms linear;
    -o-transition:background-color 200ms linear;
    -webkit-transition:background-color 200ms linear
}
.menu_container>ul>li .fa {
    font-size:14px;
    margin-right:2px
}
.menu_container>ul>li.last>a {
    box-shadow:none;
    border-right:0
}
.menu_container>ul>li:hover {
    margin-left:-1px
}
.menu_container>ul>li:hover>a {
    padding-left:26px
}
.menu_container .menu_dropdown_block {
    visibility:hidden;
    position:relative;
    border:1px solid #ddd;
    border-top:0;
    background:#fff;
    top:100%;
    color:#575757;
    overflow:hidden;
    z-index:30;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    height:0;
    width:auto;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    transition:opacity 100ms linear;
    -moz-transition:opacity 100ms linear;
    -o-transition:opacity 100ms linear;
    -webkit-transition:opacity 100ms linear
}
.menu_container>ul>li.right>.menu_dropdown_block {
    right:0
}
.menu_container .menu_dropdown_block p {
    padding:5px 5px;
    margin-bottom:10px;
    line-height:1.7em
}
.menu_container .menu_dropdown_block *.small {
    font-size:11px;
    color:#666
}
.menu_container .menu_dropdown_block p.links a {
    text-decoration:none
}
.menu_container>ul>li:hover>.menu_dropdown_block {
    visibility:visible;
    height:auto;
    min-height:40px;
    max-height:3000px
}
.menu_container .menu_dropdown_block.full_width {
    left:0;
    width:100%;
    margin-left:0
}
.menu_container .menu_dropdown_block.half_width {
    width:50%
}
.menu_container .menu_dropdown_block .md-container {
    padding:15px 20px 15px 20px
}
.menu_container .menu_dropdown_block .md-container:after {
    content:' ';
    display:block;
    clear:both
}
.menu_container .menu_dropdown_block .column {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    float:none;
    width:auto
}
.menu_container .menu_dropdown_block .column .content {
    padding:10px 20px
}

img.auto_width {
    width:auto;
    width:100%
}
ul.menu_submenu {
    list-style:none;
    padding:0;
    margin:0;
    margin-bottom:10px
}
ul.menu_submenu li {
    display:block
}
ul.menu_submenu li a {
    display:block;
    padding:4px 0;
    text-decoration:none;
    color:#666;
    margin:2px 0;
    font-size:13px;
    line-height:1.3em
}
ul.menu_submenu li a:before {
    content:'\203A';
    display:inline-block;
    margin-right:6px;
    position:relative;
    top:-1px;
    font-weight:bold
}
ul.menu_submenu li a:hover {
    color:#111
}
ul.menu_submenu li a>span {
    font-family:Calibri;
    font-size:10px
}
ul.menu_submenu_block {
    list-style:none;
    padding:0;
    margin:0
}
ul.menu_submenu_block li {
    display:block;
    position:relative
}
ul.menu_submenu_block li a {
    display:block;
    padding:8px 25px 8px 18px;
    text-decoration:none;
    color:#666;
    margin:0;
    white-space:nowrap
}
ul.menu_submenu_block li:hover>a {
    color:#fff
}
ul.menu_submenu_block>li.has-submenu>a:after {
    content:"\203A";
    position:absolute;
    font-family:Arial, sans-serif;
    top:6px;
    right:10px;
    font-size:20px;
    line-height:16px;
    font-weight:bold;
    opacity:.7
}
ul.menu_submenu_block>li.has-submenu:hover>a:after {
    opacity:1
}
ul.menu_submenu_block>li>.menu_submenu_block {
    visibility:hidden;
    opacity:0;
    position:relative;
    width:auto;
    text-align:left;
    min-width:160px;
    top:100%;
    height:0;
    box-shadow:inset 4px 0 0 rgba(0, 0, 0, 0.2)
}
ul.menu_submenu_block>li.has-submenu:hover>.menu_submenu_block {
    visibility:visible;
    opacity:1;
    transition:opacity 100ms linear;
    -moz-transition:opacity 100ms linear;
    -o-transition:opacity 100ms linear;
    -webkit-transition:opacity 100ms linear;
    height:auto
}
ul.menu_submenu_block>li>.menu_submenu_block a {
    padding-left:30px
}
ul.menu_submenu_block>li>.menu_submenu_block>li>.menu_submenu_block a {
    padding-left:40px
}
ul.menu_submenu_block>li>.menu_submenu_block>li>.menu_submenu_block>li>.menu_submenu_block a {
    padding-left:50px
}
.mobile_collapser {
    display:block;
    height:22px;
    padding:12px 25px;
    color:#fff;
    text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);
    font-size:16px;
    line-height:22px;
    font-family:"Roboto Condensed", sans-serif;
    box-shadow:inset 0 -1px 1px rgba(0, 0, 0, 0.2);
  background: #fe9090;
}
.mobile_collapser:before {
    content:'\2261';
    display:block;
    float:left;
    margin:-1px 8px 0 0;
    font-size:30px
}
#hidden_menu_collapser {
    display:none
}
#hidden_menu_collapser:checked+ul {
    height:auto;
    min-height:40px;
    max-height:2999px
}
.menu_container>ul.collapsed {
    height:auto;
    min-height:40px;
    max-height:2999px
}
@media only screen and (min-width:640px) {
    .mobile_collapser {
      display:none;  
    }
    .menu_container {
        height:44px;
        padding-left:10px;
        padding-right:10px;
    }
    .menu_container>ul {
        transition:all 100ms linear;
        -moz-transition:all 100ms linear;
        -o-transition:all 100ms linear;
        -webkit-transition:all 100ms linear;
        height:44px;
        background:0;
        overflow:visible
    }
    .menu_container>ul>li {
        position:static;
        float:left;
        background:inherit
    }
    .menu_container>ul>li:hover {
        margin-left:-1px
    }
    .menu_container>ul>li>a {
        box-shadow:none;
        border-right:0;
        box-shadow:inset -1px 0 0 rgba(0, 0, 0, 0.2);
        border-right:1px solid rgba(255, 255, 255, 0.25);
    }
    .menu_container .menu_dropdown_block {
        position:absolute;
        opacity:0
    }
    .menu_container>ul>li:hover>.menu_dropdown_block {
        overflow:visible;
        opacity:1;
        margin-left:-1px
    }
    .menu_container>ul>li.right {
        float:right
    }


.menu_container.topfixed {
    position:fixed;
    width:100%;
    top:0;
    left:0;
    border-radius:0
}
.menu_container.centered>ul {
    float:none;
    margin:0 auto;
    max-width:1000px
}
.menu_container.pink {
    background:#fe9090;
   
}
.menu_container.pink>ul>li:hover>a {
    background-color:#ff5c5c
}
.menu_container.pink>ul>li>.menu_dropdown_block p.links a {
    color:#657f40
}
.menu_container.pink>ul>li>.menu_dropdown_block p.links a:hover {
    color:#43552b;
    border-bottom:1px dotted #ff5c5c
}
.menu_container.pink ul.menu_submenu_block li:hover>a {
    background:#ff5c5c
}
</style>
<div id="menu1" class="menu_container pink full_width">
<label for="hidden_menu_collapser" class="mobile_collapser">Menu</label> <!-- Mobile menu title -->
<input id="hidden_menu_collapser" type="checkbox" />
<ul>
<li>
<a href="#"><i class="fa fa-list"></i> Linki</a>
<div class="menu_dropdown_block">
<ul class="menu_submenu_block">
<li><a href="#">Najnowsze</a></li>
<li><a href="#">Najpopularniejsze</a></li>
<li><a href="#">Najciekawsze</a></li>
</ul>
<li>
<a href="#"><i class="fa fa-envelope-o"></i> Kontakt</a>
<div class="menu_dropdown_block">
<ul class="menu_submenu_block">
<li><a href="#">Mailowy</a></li>
<li><a href="#">Telefoniczny</a></li>
<li><a href="#">Na Skype</a></li>
</ul>
<li>
<a href="#"><i class="fa fa-user"></i> O autorze</a>
<div class="menu_dropdown_block">
<ul class="menu_submenu_block">
<li><a href="#">Kim jest</a></li>
<li><a href="#">Czym się zajmuje</a></li>
<li><a href="#">Skąd pochodzi</a></li>
</ul>
<li>
<a href="#"><i class="fa fa-folder-open-o"></i> Szablony</a>
<div class="menu_dropdown_block">
<ul class="menu_submenu_block">
<li><a href="#">Dla Bloggera</a></li>
<li><a href="#">Dla WordPressa</a></li>
<li><a href="#">Dla stron www</a></li>
</ul> 
</div><!-- /menu -->

Instagram