Menu horizontal abaixo do cabeçalho, que fica fixo ao rolar a página

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


/*-----Menu responsivo com efeito Fixar by elainegaspareto.com ----*/
.menu-fixo { z-index: 9999; position: fixed; top: 0;
width: 1120px; /*LARGURA DO MENU, AJUSTE SE DESEJAR*/
height: 40px; /*ALTURA DO MENU, AJUSTE SE DESEJAR*/
}
body {
margin: 0px;
}
#menu{
background: $(tabs.background.color); /*COR DE FUNDO, AJUSTE PELO PAINEL*/
color: $(tabs.text.color);  /*COR DA FONTE, AJUSTE PELO PAINEL*/
height: 40px; /*ALTURA DO MENU, AJUSTE SE DESEJAR*/
width: 1120px; /*LARGURA DO MENU, AJUSTE SE DESEJAR*/
margin-left: -15px; /*MARGEM ESQUERDA, AJUSTE PARA POSICIONAR*/
z-index: 999;
position: relative;
}
#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: 40px;
padding: 0 14px; /*DISTÂNCIA ENTRE AS ABAS*/
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:23px 'Open Sans';
display:none;
width:35px;
height:36px;
line-height:36px;
text-align:center}
#menu label span{
font-size:23px;
position:absolute;
left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #ffffff; /*COR DE FUNDO DO SUBMENU*/
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font: $(tabs.font);
text-transform: none;
text-shadow: none;
}
#menu ul.menus a{
color: #000; /*COR DA FONTE DO SUBMENU*/
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: $(tabs.selected.background.color);
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;
}
@media screen and (max-width: 1024px){
#menu{position:relative;}
#menu ul{background:#111;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:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}

CÓDIGO JAVASCRIPT
(colar acima de </head>)

<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(&quot;document&quot;).ready(function($){
var nav = $(&#39;.conteudo-menu&#39;);
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 359) {
nav.addClass(&quot;menu-fixo&quot;);
} else {
nav.removeClass(&quot;menu-fixo&quot;);
}
});
});
</script>

CÓDIGO HTML
(colar abaixo de </header>)

<div class='conteudo-menu'>
<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>MENU&#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>
<li><a href='LINK'>Nome da aba</a></li>
<li><a href='LINK'>Nome da aba</a></li>
</ul>
</nav></div>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage