Menu Horizontal com Submenus em Queda em Barra Horizontal Controle por CSS

 

Nesse menu os links principais aparecem numa barra horizontal. Os links dos submenus aparecem numa barra horizontal inferior e em tonalidade diferente. Você pode modificar essas cores num editor de imagens simples, se tiver alguma habilidade para trabalhar com imagens. Mas se você desejar fazer mudanças mais profundas, vai precisar de dominar o Photoshop. No código-fonte desta página você encontra as imagens e o script; as folhas de css você encontra pelos endereços, também no código-fonte.

Veja o script tal como se acha no códigg-fonte:

<div class="nav">
<div class="table">

<ul class="select">
<li><a href="#"><b>Amostra</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Amostra Menu</b></a>
<div class="select_sub"> <ul class="sub"> <li><a href="#">Amostra Menu</a></li>
<li><a href="#">Amostra Menu</a></li>
<li><a href="#">Amostra Menu</a></li>
<li><a href="#">Amostra Menu</a></li>
<li><a href="#">Amostra Menu</a></li>
</ul>
</div>
</li>
</ul>


<ul class="select"><li><a href="#"><b>Amostra Menu</b></a>
<div class="select_sub"> <ul class="sub">
<li><a href="#">Amostra Menu 2</a></li>
<li><a href="#">Amostra Menu 2</a></li>
<li><a href="#">Amostra Menu 2</a></li>
<li><a href="#">Amostra Menu 2</a></li>
<li><a href="#">Amostra Menu 2</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Amostra Menu</b></a>
<div class="select_sub"> <ul class="sub">
<li><a href="#">Amostra Menu 3</a></li>
<li><a href="#">Amostra Menu 3</a></li>
<li><a href="#">Amostra Menu 3</a></li>
<li><a href="#">Amostra Menu 3</a></li>
<li><a href="#">Amostra Menu 3</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Amostra Menu</b></a>
<div class="select_sub"> <ul class="sub">
<li><a href="#">Amostra Menu 4</a></li>
<li><a href="#">Amostra Menu 4</a></li>
<li><a href="#">Amostra Menu 4</a></li>
<li><a href="#">Amostra Menu 4</a></li>
<li><a href="#">Amostra Menu 4</a></li>
</ul>
</div>
</li>
</ul>
<div>
<div>  

Você pode fazer diversas mudanças manualmente. Observe que ele tem dois css (sem incluir o css desta página).

Segundo pedido de link

<a href="http://www.otimizacao-sites-busca.com/criar-menus-css/queda-barra-horizontal/index.htm" target="_blank" title="Menu Horizontal com Sub-menus em Queda, dentro de Barra Horizontel- CSS">Menu Horizontal com Sub-menus em Queda, dentro de Barra Horizonta></a>

 

Links relacionados:

Gerador de CSS

Menu Horizontal com Fundo Colorido

Menu Horizontal com Cobertura Colorida

Cor e Forma Predefinidos

Tonalidades Cinza/Azul - Sub-menus em Queda

Menu Multinível

Tabulado e em Queda

Queda - Cores do Sol ao Nascer

Geradores de Menus - Vários Modelos

Ruy Miranda


Copyright © 2005-2013, Otimização de Sites Todos os direitos reservados