Menu Vertical
Canal: CSS | Autor: Daniel Guimarães | Publicado em: 17/12/2006 | Views: 12.505Saudaçõ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
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:
mais me tirou umans duvidas que eu tinha valeu!
Agora fico esperando o menu horizontal ^^
Sucesso e espero o próximo
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...
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?