• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

joninho

[CSS] Painel Horizontal

10 mensagens neste tópico

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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. :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bom dia pessoal!

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

alguem me pode ajudar?

:(

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

cara.. brigadao pela dica  :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros 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!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora