Menu fixo no topo do blog- com abas e sub abas

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

/* Menu horizontal fixo no topo by elainegaspareto.com
----------------------------------------------- */
#menutop {
background:$(tabs.background.color); /* Cor de fundo */
border-left: 40px solid $(tabs.background.color); /* tamanho da borda e cor- não retire pq ela centraliza o menu */
width: 100%;
height: 45px;
position: fixed;
top: 0;
left: 0;
z-index: 999999;
transition: .4s ease;
}
#topmenu {
width: 100%;
float: left;
font: $(tabs.font);
font-weight: 300 !important;
text-transform: none;
}
#topmenu  ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 0px 0px; /* Bordas aredondadas do sub-menu */
}
#topmenu  li{
float:left;
padding:0px;
}
#topmenu  li a{
border-right: 0px solid #fff;
color:$(tabs.text.color); /* Color de la fuente */
display:block;
line-height:45px;
margin:0px;
padding:0px 30px; /* Espaço entre cada casa */
text-align:center;
text-decoration:none;
}
#topmenu  li a:hover, .menu ul li:hover a {
background: $(tabs.selected.background.color);  /* Cor das casas ao passar o cursor */
text-decoration:none;
color:$(tabs.selected.text.color);/* Color de la fuente */
}
#topmenu  li ul {
background: #f9f9f9; /* Cor de fundo do sub-menu */
color: #000; !important;
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Tamanho do sub-menu */
z-index:100;
border-top:1px solid #fff; /* Borda superior do sub-menu */
}
#topmenu  li:hover ul{
display:block;
}
#topmenu  li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
#topmenu  li:hover li a {
background: none;
border-radius: 0px 0px 0px 0px; /* Borda das sub-casas */
}
#topmenu  li ul a {
display:block;
height:45px;
font: $(tabs.text);
font-style:normal;
color:#000; /* Cor do texto ao passar o cursor */
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
#topmenu  li ul a:hover, .menu li ul li:hover a{
background: $(tabs.selected.background.color); /* Cor das sub-casas ao passar o cursor */
color:$(tabs.selected.text.color);/* Color de la fuente */
text-decoration:none;
}



CÓDIGO HTML
(colar como gadget HTML/JAVASCRIPT)

<div id="menutop">
<div id="topmenu">
<ul>
<li><a href="#">Home</a></li>
 
 
<li><a href="URL">Nome da aba simples</a></li>
 
 

<li><a href="#">Aba com submenus</a>
 <ul>
    <li><a href="URL">Submenu 1</a></li>
    <li><a href="URL">Submenu 2</a></li>
    <li><a href="URL">Submenu 3</a></li>
    <li><a href="URL">Submenu 4</a></li>
    </ul>
    </li>

<li><a href="#">Aba com submenus</a>
 <ul>
    <li><a href="URL">Submenu 1</a></li>
    <li><a href="URL">Submenu 2</a></li>
    <li><a href="URL">Submenu 3</a></li>
    <li><a href="URL">Submenu 4</a></li>
    </ul>
    </li>

 <li><a href="URL">Nome da aba simples</a></li>

 <li><a href="URL">Nome da aba simples</a></li>
 
<li><a href="URL">Nome da aba simples</a></li>

<li><a href="URL">Nome da aba simples</a></li>

<li><a href="URL">Nome da aba simples</a></li>

</ul>
</div>
</div>





DICAS EXTRAS

Quer excluir uma aba?
Apague esse trecho:

<li><a href="URL">Nome da aba simples</a></li>


Quer excluir uma aba com submenus?
Apague esse trecho:

<li><a href="#">Aba com submenus</a>
 <ul>
    <li><a href="URL">Submenu 1</a></li>
    <li><a href="URL">Submenu 2</a></li>
    <li><a href="URL">Submenu 3</a></li>
    <li><a href="URL">Submenu 4</a></li>
    </ul>
    </li>


Quer acrescentar mais uma aba?
Adicione esse trecho antes do fechamento das div's ao final do CÓDIGO HTML.

<li><a href="URL">Nome da aba simples</a></li>


Quer acrescentar mais uma aba com submenus?
Adicione esse trecho antes do fechamento das div's do CÓDIGO HTML.

<li><a href="#">Aba com submenus</a>
 <ul>
    <li><a href="URL">Submenu 1</a></li>
    <li><a href="URL">Submenu 2</a></li>
    <li><a href="URL">Submenu 3</a></li>
    <li><a href="URL">Submenu 4</a></li>
    </ul>
    </li>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage