Menu responsivo

Views:

CÓDIGO CSS
(colar acima de ]]></b:skin>)

/* MENU RESPONSIVO FIXO NO TOPO BY ELAINE GASPARETO
----------------------------------------------- */
#menu{
background: $(tabs.background.color);
color:$(tabs.text.color);
height: 45px;
width: 100%;
z-index: 999;
position: fixed;
padding-left: 4em;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none;
}
#menu ul{
height:45px;
width:100%;
}
#menu li{
float:left;
display:inline;
position:relative;
font: $(tabs.font);
}
#menu a{display: block;
line-height: 45px;
padding: 0 20px;
text-decoration: none;
color:$(tabs.text.color);
}
#menu li a:hover{
color:$(tabs.selected.text.color);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: $(tabs.selected.background.color);
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:80px;
height:30px;
opacity:0;
cursor:pointer;
}
#menu label{
font: 40px Arial;
display:none;
width:35px;
height:46px;
line-height:46px;
text-align:center;
}
#menu label span{
font-size:30px;
position:absolute;
left:35px;
}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 220px;
background: #fff;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font: $(tabs.font);
text-transform: none;
}
#menu ul.menus a{
color: #000;
line-height: 45px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: $(tabs.background.color);
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 1024px){
#menu{position:fixed}
#menu ul{background:#000;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font: $(tabs.font);border-top: none;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:#fff}
#menu input:checked ~ ul{display:block}
}
CÓDIGO HTML
(colar abaixo de <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>)

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>&#160;&#160;</span></label>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Início</a></li>

<li><a href='LINK'>Nome da aba</a></li>

<li><a href='#'>Nome da aba multinível<font size='2'>&#9660;</font></a>
<ul class='menus'>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
</ul>
</li>

<li><a href='LINK'>Nome da aba</a></li>

<li><a href='#'>Nome da aba multinível<font size='2'>&#9660;</font></a>
<ul class='menus'>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
<li><a href='LINK'>Nome da sub aba</a></li>
</ul>
</li>

<li><a href='LINK'>Nome da aba</a></li>

</ul>
</nav>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage