CSS
Menu Vertical
Publicado em: 17/12/2006 |
CSS |
Visualizações: 7.067 |
5 Comentário(s)
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:
1º Vamos construir uma lista não-ordenada:
2º 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.
3º Iremos adicionar alguns links:
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:
Como Ficará:
Valeu galera até a próxima e
Fiquem com Deus!
Fonte: Sites relacionados à CSS.
Daniel Guimarães
Email: guimaraes_dgm@hotmail.com
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:
1º Vamos construir uma lista não-ordenada:
<ul id="menu"><li></li>
<li></li>
<li></li>
</ul>
2º 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>
3º 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
Daniel Guimarães
WebDesigner e Designer Gráfico
» Site do colunista
Todas as matérias de Daniel Guimarães
- Identidade Visual: O que não fazer na criação de um logotipo
Nesse artigo nós veremos o que não deve ser feito na hora de criar um logotipo, . - Conceito Básico Sobre a Matemática
Programadores e desenvolvedores, agora já os internautas. Eu não sei o que dizer. - Miniaturas de Sites com Websnapr
Nesse artigo veremos como criar miniaturas de sites usando apenas um link, ao in. - Palestras, o que aproveitar delas?
Ir a palestras ou assisti-las em seu computador ou qualquer outro dispositivo o . - Curso de Visual Basic - Aula 6 - Criando um visualizador de imagens
Nesta sexta vídeo aula, iremos aprender como criar um visualizador de imagens co.
- Rollover de imagem com CSS
Neste tutorial vou mostrar a você como fazer um rollover de imagem usando css. O. - Criando sombra no CSS
Colocando sombra em um texto na página - CSS - HTML Dinâmico
Alguma vez você decidiu alterar as cores dos link de sua home-page? Que tal alt. - Atributos CSS
Alguns atributos de css e o que eles representam: - Pop Up em CSS
Meu diretor pediu para colocar uma popup em um site nosso, mas não queria coloca.
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!
Philipe Cardoso
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