Code: Detail

CSS - (Portuguese)

Criando um menu Horizontal com CSS + TABLELESS

Esse comando vai mostrar como montar um menu horizontal utilizando CSS e TABLELESS.

Last update: 18/08/2010
CSS       
 
N/A
1
N/A
N/A
 

Estrutura:
Primeiramente faça um div e atribua uma ID para este div, neste exemplo nosso div se chamará “menu”. Dentro deste div, faça uma lista, esta lista deve conter as opções de seu menu:

<div id=”menu”>
<ul>
<li><a href=”">Primeiro</a></li>
<li><a href=”">Segundo</a></li>
<li><a href=”">Terceiro</a></li>
<li><a href=”">Quarto</a></li>
<li><a href=”">Quinto</a></li>
</ul>
</div>


Começando a formatação:
Agora que já fizemos a estrutura do menu, vamos formatá-lo com css.
Primeiro, para podermos trabalhar melhor, vamos tirar o margin (margin:0px;), o padding (padding:0px;) e os Bullets das opções (list-style:none;) da tag UL. Queremos que o UL seja uma barra de navegação certo? Então vamos fazer ele flutuar à esquerda (float:left), depois damos a ele a largura de 100% (width:100%;), isso fará com que ele vire uma bloco. Veja o código css atribuído à tag UL:

#menu ul {
padding:0px;
margin:0px;
float: left;
width: 100%;
background-color:#EDEDED;
list-style:none;
}

Terceiro:
Nosso menu ainda não está horizontal… agora é hora de resolver isso.
Para o nosso menu ficar horizontal, temos que fazer as suas opções ficarem uma ao lado da outra… para isso, basta atribuir um display:inline; para a tag LI… Isso fará todas as opções ficarem em uma linha horizontal:

#menu ul li { display: inline; }


Deixando o menu na horizontal:

Ótimo. Estamos quase acabando nosso menu horizontal, agora falta pouco.
Precisamos apenas formatar os links do menu para que eles não fiquem tão próximos um do outro. No css, faça que todos os links que estão dentro da tag LI (#menu ul li a) flutuem à esquerda (float:left;), isso é necessário para que os links se transformem em bloco. Agora, dê um espaço entre a borda do menu e o texto, para isso use o padding (padding: 2px 10px;).
Você pode aproveitar para definir o “visual” que deverá ter o link: cor de fundo, letra, etc…
Veja o código css que escrevemos neste passo.

#menu ul li a {
padding: 2px 10px;
float:left;
/* visual do link */
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
}


Vamos ver no que deu!
Para finalizar, vamos apenas definir o que deverá acontecer com o link quando o usuário passar o mouse. Este passo dispensa explicações.

#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;
}

Source: http://www.tableless.com.br/criando-um-menu-horizontal-com-css
 
Users who have marked this routine as a favorite
 
 
 
The site ti4fun is not responsible for the content on sites for which you have external links

Articles, routines, tips, forums, blogs or any other content posted on ti4fun site is not tested and not validated, so you should test and validate any information collected on the ti4fun site before applying it to final use environment, such as example, production. the TI4FUN site is not responsible for quality or for any damages, direct, indirect or consequential, from use of any content posted by the authors in the site.

All content published on the ti4fun site is the responsibility of the author and do not necessarily express the views of the site ti4fun and its employees.