Painel Horizontal
HTML
<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 vai tirar os bullets dos links, para que fiquem como isto:
CSS
Na primeira parte de código CSS vamos usar para meter uma border
à volta da td
ou da div
:
#nav{
border:1px solid #FFFFFF;
}
Neste caso estamos a usar o ID (reparem no #
), mas também se pode usar a class (teríamos de fazer tipo .nome_da_classe
).
Agora vamos aplicar um pouco de CSS para formatar a layout para o nosso ul
:
#nav ul{
width:100%;
background-color:#6699cc;
padding-left:0;
margin:0;
float:left;
}
Isto mantém a barra de navegação na esquerda com a float
tag.
Agora temos de formatar cada li
:
#nav ul li{
display:inline;
}
Agora precisamos de aplicar um pouco de CSS para os nossos links com as tags li
:
#nav ul li a{
float:left;
color:#FFFFFF;
padding:6px 12px 6px 12px;
border-right:1px solid #FFFFFF;
}
Isto serve para o link se parecer mais com um botão do que com um simples link.
Ideia: Você pode usar outro formato de letra ou então usar o default de links da sua página.
Para adicionar rollouver só precisamos de adicionar este bocadinho de código de CSS. Isto mudará a cor de fundo para dark-blue:
#nav ul li a:hover{
background-color:#336699;
}