2 de mar. de 2008

Menu Horizontal Dropdow

. |



Para ter um menu como este clique em "layout", "editar HTML" e procure pelo código:

]]></b:skin>

E cole acima o código abaixo.


Passe o mouse










.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #000000;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://img352.imageshack.us/img352/3153/itemprimarybgax9.jpg);
background-repeat: repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(http://img352.imageshack.us/img352/3153/itemprimarybgax9.jpg);
background-repeat: repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://img210.imageshack.us/img210/9505/itemsecondarycontainerbwo9.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://img352.imageshack.us/img352/4496/itemsecondarybgad8.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(http://img210.imageshack.us/img210/9505/itemsecondarycontainerbwo9.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(http://img530.imageshack.us/img530/887/itemsecondarytitlebgdq2.gif); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}


Agora procure pelo código:

<div id='outer-wrapper'><div id='wrap2'>


E abaixo dele cole o próximo código.





<ul class='nav-container' id='nav-container'>
<li><a class='item-primary' href='ENDEREÇO DO SEU BLOG AQUI'>HOME</a>
</li>
<li><span class='divider divider-vert'/></li>
<li><a class='item-primary' href='#'>LINK 1 </a>
<ul style='width:150px;'>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.1</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.2</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.3</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.4</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.5</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.6</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.7</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.8</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.9</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.10</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.11</a></li>
<li><span class='divider divider-horiz'/></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>
</ul></li>

<li><span class='divider divider-vert'/></li>
<li><a class='item-primary' href='#'>LINK 2</a>

<ul style='width:150px;'>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.1</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.2</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.3</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.4</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.5</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.6</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.7</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.8</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.9</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.10</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.11</a></li>
<li><span class='divider divider-horiz'/></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.12</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.13</a></li>
</ul></li>

<li><span class='divider divider-vert'/></li>
<li><a class='item-primary' href='#'>LINK 3</a>

<ul style='width:150px;'>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.1</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.2</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.3</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.4</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.5</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.6</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.7</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.8</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.9</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.10</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.11</a></li>
<li><span class='divider divider-horiz'/></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>
</ul></li>

<li><span class='divider divider-vert'/></li>
<li><a class='item-primary' href='#;'>LINK 4</a>

<ul style='width:150px;'>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.1</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.2</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.3</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.4</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.5</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.6</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.7</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.8</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.9</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.10</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.11</a></li>
<li><span class='divider divider-horiz'/></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.12</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.13</a></li>
</ul></li>

<li><span class='divider divider-vert'/></li>
<li><a class='item-primary' href='#;'>LINK 5</a>

<ul style='width:150px;'>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.1</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.2</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.3</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.4</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.5</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.6</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.7</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.8</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.9</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.10</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.11</a></li>
<li><span class='divider divider-horiz'/></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>
<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>
</ul></li></ul>




Crédito: CSS Menu Generator
.:.

Posts Relacionados

Atualizações por email
Encontre-me:
facebook twitter gplus pinterest rss

13 comentários:

  1. Gerard Way22 de julho de 2008 às 23:51

    oi eu queria seber como eu coloco esse menu eu fiz tudo direitinho quendo eu vui olhar tava cheio de nome

    me encina como fazer

    meu msn: gerardy-way@hotmail.com

    ResponderExcluir
  2. Lyssa9 de agosto de 2008 às 13:24

    o meu tambem ficou assim...

    na verdade o meu template ja vem com o meu embutido mas não consigo colocar o link...

    pode dar uma ajuda?

    ResponderExcluir
  3. V.L.P21 de agosto de 2008 às 04:08

    ok . otimo blog . so aqui encontrei esse otimo post essa dica eu estava procurando ha muito tempo . mais eu queria saber se da pra mudar a cor do menu ?????obrigado

    ResponderExcluir
  4. Elke di Barros8 de outubro de 2008 às 12:41

    VLP, dá para mudar sim, mas note que esse menu é em imagens, portatnto o que vc deverá fazer é trocar o que está em verde ( no primeiro código) pelo código de cores desejada. Retire inclusive os parênteses.
    Troque isso:

    background: url(http://img210.imageshack.us/img210/9505/itemsecondarycontainerbwo9.jpg);

    Por isso:

    background: #800000;


    VEJA, o código #8000000 é o código de cor. Mude pela cor que quiser.

    ResponderExcluir
  5. Thiago - Guaavas'10 de outubro de 2008 às 18:04

    Olá...Poxa estou tentando de todas as formas!
    Mas olha tah dificil!

    E olha que eu que fiz meu template do meu blog!

    E não consigo que isso funcione lah de jeito manera!
    Poderia me ajudar!?

    Obrigado!

    PS: Na hora de por o link da menssagem de erro!

    ResponderExcluir
  6. Elke di Barros10 de outubro de 2008 às 21:16

    Link'in, tudo bem ? Olha, já instalei este menu diversass vezes e outras pessoas também. Veja se acaso, sem querer vc não está apaganda as aspas pois isso dá defeito. Tenha paciência e atenção. Um abraço.

    ResponderExcluir
  7. .:: Blitz Downloads - Software, Jogos, Filmes, Cd"s e Utilitários ...27 de outubro de 2008 às 11:44

    olha junioritalian ja tentei de tudo colocando os menu mas não da certo

    sempre apare Mais de um item encontrado com o id: LinkList1. Os IDs de itens devem ser únicos e exclusivos.

    poderia me ensinar bem direitinho

    vou agradecer munto blz...

    junioritalian@hotmail.com

    ResponderExcluir
  8. Juninho10 de janeiro de 2009 às 23:16

    Tenho uma dúvida... quando são muitos submenus, os que estão bem embaixo não tem como serem vistos.. queria saber uma maneira de quando chegar até a parte de baixo, aparecerem no lado..

    ResponderExcluir
  9. senhor " X "29 de março de 2009 às 16:30

    eu conseguir mas so aparece a imagem com os nomes

    ResponderExcluir
  10. MY COLLECTION WATCHES17 de julho de 2009 às 13:33

    EXCELENTE DICA!!!VOU TENTAR ADICIONAR NO MEU!!ESTAVA PROCURANDO POR ISSO FAZ MUITO TEMPO!

    ResponderExcluir
  11. Dayvidson S. Eufrásio25 de julho de 2009 às 11:08

    Nossa, Muito obrigado pela dica!!!!!

    Seu blog é simplesmente fantástico!!!

    Como estou começando agora no mundo dos Blogs, tem sido de grande ajuda tudo isso que tenho visto aqui.

    Este tópico aqui de Menu Dropdown, nem se fala.

    Muito obrigado, e que Deus te abençoe.

    P.S: Vou colocar seu link no meu blog, coisa boa tem que ser divulgada...

    Abração e t+.
    Dayvidson Siqueira

    ResponderExcluir
  12. saionara silva1 de novembro de 2010 às 21:00

    Ola
    Muito bom este menu. mas gostaria de saber se tem jeito de tirar os sub-menus que não vou utilizar.
    obgda

    ResponderExcluir
  13. Vanessa Rodrigues5 de outubro de 2011 às 16:49

    Eu uso o sistema de templates artisteer,ele vem com sub item porem não consigo subistituir os links e nomes!vc poderia fazer um tutorial sobre ou me ajudar por email?
    vanessa@batomcereja.com

    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.

Assinar: Postar comentários (Atom)

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