Menu Horizontal com Cobertura Colorida e Controle por CSS

No menu abaixo você pode mudar os nomes dos links, assim como as cores da barra horizontal. Pode também aumentar o número de links, asim como diminuir e aumentar as áreas de cobertura colorida.

As cores diponíveis são blue, gray, lime, orange, pink, purple, red - se deseja mudar, substitua aqua em <div class="menu bubplastic horizontal aqua"> pela cor desejada. Voc~e vê isto no c´0digo-fonte desta página.

Você vai precisar também da folha de estilos.

Você deve copiar essa folha de estilos e colar em um arquivo css branco.

No código-fonte desta página você encontra os links e as tags necessárias. Você copia esses dados e cola em um arquivo. Aqui são feitas as mudanças nos links.

Você vai precisar de imagens para fazer mudanças; os endereços delas são os seguintes:

http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic-button.gif
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic-h-aqua.gif (água marinha)
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic-h-blue.gif (azul)
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic-h-grey.gif (cinza)
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic-h-lime.gif (lima)
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic-h-orange.gif (laranja)
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic-h-pink.gif (rosa)
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic-h-purple.gif (púrpura)
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-plastico-h-red.gif (vermelho)
http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/imagens/bg-bubplastic.gif

Observe que esta página tem links para duas folhas de estilos.

O script deste menu, como se pode ver no código-fonte, é o seguinte:

<div class="menu bubplastic horizontal aqua">
<ul>
<li><span class="menu_r"><a href="#"><span class="menu_ar">Home</span></a></span></li>
<li><span class="menu_r"><a href="#"><span class="menu_ar">Quem Somos</span></a></span></li>
<li><span class="menu_r"><a href="#"><span class="menu_ar">FAQ</span></a></span></li>
<li><span class="menu_r"><a href="#"><span class="menu_ar">Contato</span></a></span></li>
</ul>

Observe que a mudança de cor deve ser feita no começo dele.

Nota: Se você gostou deste gerador e achou que as instruções são úteis, coloque um link para esta página para que as pessoas que visitam o seu site possam conhecêlos também. O link pode ser assim:

<a href="http://www.otimizacao-sites-busca.com/criar-menus-css/horizontal-cobertura/index.html" target="_blank" title="Menu Horizontal que Cobre os Links com Cores - CSS">Menu Horizontal que Cobre os Links com Cores</a>

Links relacionados:

Gerador de CSS

Menu Horizontal com Fundo Colorido

Cor e Forma Predefinidos

Sub-menus em Queda em Barra Horizontal

Tonalidades Cinza/Azul - Sub-menus em Queda

Menu Multinível

Taulado e em Queda

Queda - Cores do Sol ao Nascer