Menu Vertical

Canal: CSS  |  Autor: Daniel Guimarães  |  Publicado em: 17/12/2006  |  Views: 12.505
Saudações Galera da Oficina da Net!

Hoje postarei mais um tópico sobre um MENU super interessante, ele é feito com lista não-ordenada, com um fundo azul. Para uma melhor explicação:

Vamos construir uma lista não-ordenada:

<ul id="menu"><li></li>
<li></li>
<li></li>
</ul>


Agora construiremos uma folha de estilo(CSS) com a <ul>:

ul#menu - Aqui definimos como a lista ficará com estado normal.
ul#menu li - Aqui só define a borda em baixo de cada <li>.
ul#menu li a:link, ul#menu li a:visited - Aqui eu aproveitei e coloquei logo duas definições o a:link(link não-visto) e a:visited(link visto).
ul#menu li a:hover – Aqui está definido quando passar o mouse sobre ele. O mais interessante é que ele vai ficar em itálico com o fundo mais escuro.

<style type="text/css">
<!--
ul#menu {
width:200px;
border:1px solid #000066;
background:#599BFF;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #0000CC;
}
ul#menu li a:link, ul#menu li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: verdana;
font-size:14px;
color:#FFFFFF;
border-left:10px solid #0066FF;
padding-left:5px;
}
ul#menu li a:hover {
background-color: #0033FF;
color:#FFFFFF;
border-left:10px solid #000066;
font-style:italic
}
-->
</style>





Iremos adicionar alguns links:
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Fale Conosco</a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Mapa do Site</a></li>
<li><a href="http://www.oficinadanet.com.br/">Oficina da NET</a></li>
</ul>



Obs.: Os Links deverão estar dentro do <li></li>.


Pronto! Nosso Menu está terminado, você pode colocá-lo como um arquivo externo para facilitar uma futura alteração.

Código Pronto:
<html>
<head>
<title>Menu Vertical</title>
<style type="text/css">
<!--
ul#menu {
width:200px;
border:1px solid #000066;
background:#599BFF;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #000066;
}
ul#menu li a:link, ul#menu li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: verdana;
font-size:14px;
color:#FFFFFF;
border-left:10px solid #0066FF;
padding-left:5px;
}
ul#menu li a:hover {
background-color: #0033FF;
color:#FFFFFF;
border-left:10px solid #000066;
font-style:italic
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Fale Conosco</a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Mapa do Site</a></li>
<li><a href="http://www.oficinadanet.com.br/">Oficina da NET</a></li>
</ul>
</body>
</html>



Como Ficará:



Valeu galera até a próxima e
Fiquem com Deus!

Fonte: Sites relacionados à CSS.

Daniel Guimarães
Email: guimaraes_dgm@hotmail.com
Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:
NR. DE VOTO(S): [1]

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Publicado em:
04/03/2007 - 17:41
Meu irmão ta muito bom mesmo, só ta fautando vc complementar colocando um sub menu ai!
mais me tirou umans duvidas que eu tinha valeu!
Publicado em:
05/03/2007 - 16:54
Ainda bem que a dúvida foi tirada, mas eu usaria JavaScript nesse menu para colocar os SUBMENUS!
Publicado em:
05/04/2007 - 13:57
Boa, adorei vocês esplicaram todas as linhas do código perfeito !!!

Agora fico esperando o menu horizontal ^^
Publicado em:
07/04/2007 - 19:06
Que bom que gostou Luciando, é uma boa ideia. Posso desenvolver isso!
Publicado em:
19/09/2008 - 18:38
Muito Bom o artigo estou começando a acompanhar todos os seus de CSS parabéns cara....

Sucesso e espero o próximo
Publicado em:
16/08/2009 - 19:29
Ficou ótimo - montei o menu, fiz uma pequena modificação substituindo o "height 1%" por um "padding 5px" pra eu ter mais controle na altura do menu... mas consegui fazer mostrar a página atual. Ex:
Se estou em "Home" o menu fica todo igual... se estou em "Fale conosco" o menu também não se altera. Já destruí uns menus tentando fazer isso... acabo mexendo onde não é pra mexer...

Obrigado...
Publicado em:
11/10/2009 - 01:17
eu já havia feito um menu parecido, mas oq estou procurando é exatamente como poderia add submenus ao meu menu, mas gostaria q meu submenu tivesse o mesmo formato deste site: http://www.maujor.com/index.php
o fato é q vou usá-lo em um blog e no caso do site mencionado é usado a linguagem jquery, não sei como se utiliza essa linguagem, onde deveria colocar, mas acredito q é capaz do blogspot não suportar este script.
gostaria de pedir uma solução, como eu poderia adicionar os submenus ao meu menu com o formato igual ao deste site de forma q não precisasse usar linguagem jquery?
ou se o blogspot suporta o jquery onde exatamente devo colocar este código?
Publicado em:
25/11/2009 - 23:01
como eu aumento as linhas???