[CSS] Painel Horizontal

[joninho]

1. Vamos listar primeiro os nossos links...

<div id="nav">
 <ul>
   <li><a href="http://skeletorscorpse.com/joomla/#">Home</a></li>
   <li><a href="http://skeletorscorpse.com/joomla/#">News</a></li>
   <li><a href="http://skeletorscorpse.com/joomla/#">About</a></li>
   <li><a href="http://skeletorscorpse.com/joomla/#">Services</a></li>
   <li><a href="http://skeletorscorpse.com/joomla/#">Links</a></li>
   <li><a href="http://skeletorscorpse.com/joomla/#" >Contact</a></li>
 </ul>
</div>

Se quiser não precisa de usar uma div, pode usar uma table cell.

Isto apenas cria uma lista de links como mostrado a seguir:

• Home
  
• News
  
• About
  
• Services
  
• Links
  
• Contact
  

2. Vamos usar CSS para meter uma border à volta da td ou da div:

#nav{
   border:1px solid #FFFFFF;
}

Estou a usar o ID (reparem no #). Você pode também usar a class (teria de fazer tipo .)

3.Agora vamos aplicar um pouco de CSS para formatar a layout do ul:

#nav ul{
 width:100%;
 background-color:#6699cc;
 padding-left:0;
 margin:0;
 float:left;
}

Isto mantém o painel na esquerda com o float.

4. Agora é necessário formatar cada tag li:

#nav ul li{
 display:inline;
}

5. Agora precisamos de aplicar um pouco de CSS nos links com dentro das tags li:

#nav ul li a{
 float:left;
 color:#FFFFFF;
 padding:6px 12px 6px 12px;
 border-right:1px solid #FFFFFF;
}

Você pode usar outro formato de letra, ou então usar o default de links da sua página.

6. Para adicionar rollover só precisamos de adicionar este bocadinho de código de CSS:

#nav ul li a:hover{
 background-color:#336699;
}

Isto mudará a cor de fundo para dark-blue.

Fonte: http://jamestombs.co.uk/2006-05-26/horizontal-navigation-bar-with-rollover/1417

[deathseeker25]

Só agora vi este pequeno tutorial e já serviu para me dar umas bases de webdesign.

Estava sinceramente a precisar de ver algo do género para me habituar. 😄

[skin]

muito bem escolhido o tutorial! esta muito bem feito e da muito jeito para criação de menus!  😄

[joninho]

muito bem escolhido o tutorial! esta muito bem feito e da muito jeito para criação de menus!  😄

obrigado 😛 eu como andava à procura de uma cena dessas achei bem postar aqui o tutorial... 😛 Cumps

[Butterfly29]

Bom dia pessoal!

Preciso de criar um menu horizontal, onde este tenha os seus submenus.

alguem me pode ajudar?

😞

[elcsat]

1º parte

http://www.maujor.com/tutorial/ddownmenu.php

2ºparte

http://www.maujor.com/tutorial/ddownmenu-a.php

ver se te ajuda

[Jonas_G]

Valeu amigo... esse link do maujou funcionou muito bem.

cara.. brigadao pela dica  😛

[elcsat]

ainda bem.  😛

[t_e_e_m]

Estou com dificuldades em criar sub menus no meu menu já criado, tenho tentado com um tutorial já referenciado aqui mas não consigo.

/* Espaço menus */
#menus {
 width:730px;
 height:38px;
 background-image:url(IMAGENS/bg_menu.jpg);
}
#menus ul {
 list-style-type:none;
 background-image:url(Imagens/bg_menu2.jpg);
 background-repeat:repeat-x;
}
#menus ul li {
 display:inline;
}
#menus ul li a {
 padding:10px 25px;
 float:left;
 text-decoration:none;
 color:#77787b;
 border-left: 1px solid #a09a94
}
#menus ul li a:hover {
 color: #000;
}

<ul>
<li><a href="index.html" >CRB</a></li>
<li><a href="XXX">Equipa</a></li>
<li><a href="XXX">Instalações</a></li>
<li><a href="XXX">Serviços</a></li>
<li><a href="XXX">Conveções</a></li>
<li><a href="XXX">Contactos</a></li>
</ul>

[filipegr]

Eu desenvolvi dois menus, um horizontal e outro vertical para o dito hi5, independentemente para onde o ponham, irá funcionar correctamente, menos no dito IE, tal problema que irei resolver!

Ps: Mais tarde postarei aqui os ditos menus!