30 de set. de 2013

Menu com submenus usando CSS no Blogger



Um menu bem facinho de instalar e que pode fazer a diferença se você tem muitos links para disponibilizar a seus visitantes. Instale-o diretamente no HTML/Javascript.









Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.






<style>
/*Menu ------------------------------------------------*/
#nav {
background: #808080;
width:100%;
font: bold 14px "ms sans serif", verdana, arial;
color: #AA0000;
margin: 0 auto 0px;
padding: 0px auto 0px;
height:55px;
}
#navleft {
width: 700px;
float: left;
margin: 0;
padding: 0;
}
#navright {
width: 250px;
font-size: 11px;
float: right;
margin:0px;
padding:0px;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding:0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #ccc;
color: #fff;
display: block;
font-weight: bold;
text-transform: none;
padding: 15px 10px 17px 10px;
margin: 3px 5px 0 0;
}
#nav li a:hover, #nav li a:active {
background:#AA0000;
color:#000000;
padding: 15px 10px 17px 10px;
margin: 0 5px 0 0;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #AA0000;
width: 220px;
color: #FFF;
font: normal 14px "ms sans serif", verdana, arial;
text-transform: none;
float: none;
margin: 0;
padding:5px 10px;
border-bottom:1px dotted  #363636;
border-right:1px solid #363636;
border-left:1px solid #363636;
}
#nav li li a:hover, #nav li li a:active {
background: #fff;
color: #AA0000;
padding:5px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

</style>

<div id='nav'>
<div id='navleft'>
     
<ul>
<li><a expr:href='data:blog.homepageUrl'>Início</a></li>
<li><a href='ENDEREÇO LINK DO 1'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO LINK 2'>Link 2</a></li>
</ul>
</li>

<li><a href='ENDEREÇO DO LINK 3'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO LINK 3A'>Link 3A</a></li>
<li><a href='ENDEREÇO DO LINK 3B'>Link 3B</a></li>
<li><a href='ENDEREÇO DO LINK 3C'>Link 3C</a></li>
<li><a href='ENDEREÇO DO LINK 3D'>Link 3D</a></li>
<li><a href='ENDEREÇO DO LINK 3E'>Link 3E</a></li>
<li><a href='ENDEREÇO DO LINK 3F'>Link 3F</a></li>
</ul>
</li>


<li><a href='ENDEREÇO DO LINK 4'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO LINK 4A'>Link 4A</a></li>
<li><a href='ENDEREÇO DO LINK 4B'>Link 4B</a></li>
<li><a href='ENDEREÇO DO LINK 4C'>Link 4C</a></li>
<li><a href='ENDEREÇO DO LINK 4D'>Link 4D</a></li>
<li><a href='ENDEREÇO DO LINK 4E'>Link 4E</a></li>
<li><a href='ENDEREÇO DO LINK 4F'>Link 4F</a></li>
</ul>
</li>


<li><a href='ENDEREÇO DO LINK 5'>Link 5</a>
<ul>
<li><a href='ENDEREÇO DO LINK 5A'>Link 5A</a></li>
<li><a href='ENDEREÇO DO LINK 5B'>Link 5B</a></li>
<li><a href='ENDEREÇO DO LINK 5C'>Link 5C</a></li>
<li><a href='ENDEREÇO DO LINK 5D'>Link 5D</a></li>
<li><a href='ENDEREÇO DO LINK 5E'>Link 5E</a></li>
<li><a href='ENDEREÇO DO LINK 5F'>Link 5F</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO LINK 6'>Link 6</a></li>
<li><a href='ENDEREÇO DO LINK 7'>Link 7</a></li>

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

Um comentário:

  1. Olá Tudo bem?
    Quero lhe parabenizar pelo blog e dizer que este foi o único código de sub menu que deu certo no meu blog.
    Obriaga por esta postagem.
    Um abraço,
    Zélia Dantas

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube