Otimização de Sites

Seja um dos primeiros

Chamada  ao cliente para otimização do seu site.
otimização-sites-busca.
com

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 Horizontel</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

Taulado e em Queda

Queda - Cores do Sol ao Nascer

Ruy Miranda
Otimização de Sites

Proprietário | Nota Legal  | Políticas
Copyright © 2005-2011, Otimização de Sites Todos os direitos reservados 
Mapa do Site  | Otimização de Sites Home