Jump to content

[CSS] Painel Horizontal


joninho
 Share

Recommended Posts

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

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.