2014/11/19

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 -->

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.