Menu Vertical Simples #1
Autor: Rogério Tavares | Publicado: 2011-08-20T06:29:00-07:00


<img alt="É difícil de encontrar um menu vertical simples e fácil de editar? o Tutoriais para Web está trazendo um modelo bem simples usado no site de uma empresa que estou criando, chamada Easy World.
Um menu feito em HTML e CSS, nesse post irei mostrar o código e explicar para que serve cada tag no código CSS que voçê pode modificar." border="0" height="266" src="http://1.bp.blogspot.com/-aFZawyOH1Ko/Tk-qjMmYytI/AAAAAAAABOo/oD_x2V0HiWc/s320/menu+vertical.png" title="Menu vertical Simples #1 - Tutoriais para Web" width="320" />
É difícil de encontrar um menu vertical simples e fácil de editar? o Tutoriais para Web está trazendo um modelo bem simples usado no site de uma empresa que estou criando, chamada Easy World.
Um menu feito em HTML e CSS, nesse post irei mostrar o código e explicar para que serve cada tag no código CSS que voçê pode modificar.




index.html

&lt;html&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;Menu Vertical Simples&lt;/title&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" type="text/css" href="cascata.css" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;body&gt;
&lt;div id="menu2"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="index.html" title="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="fale.html" title="Fale Conosco"&gt;Fale Conosco&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="parceria.html" title="Parcerias"&gt;Parcerias&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://twitter.com/RogerinhoC" title="Twitter"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://www.facebook.com/easyworld" title="Facebook"&gt;Facebook&lt;/a&gt;&lt;/li&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/body&gt;
&lt;/html&gt; 
cascata.css

#menu2 {
&nbsp;&nbsp; &nbsp;width: 200px;
&nbsp;&nbsp; &nbsp;border-style: solid solid none solid;
&nbsp;&nbsp; &nbsp;border-color: #BCD2E6;
&nbsp;&nbsp; &nbsp;border-size: 1px;
&nbsp;&nbsp; &nbsp;border-width: 1px;
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; 
#menu2 li a {
&nbsp;&nbsp; &nbsp;height: 32px;
&nbsp; &nbsp;&nbsp;&nbsp; voice-family: "\"}\"";
&nbsp; &nbsp;&nbsp;&nbsp; voice-family: inherit;
&nbsp; &nbsp;&nbsp;&nbsp; height: 24px;
&nbsp;&nbsp; &nbsp;text-decoration: none;
&nbsp;&nbsp; &nbsp;}&nbsp;&nbsp; 
&nbsp;&nbsp; 
#menu2 li a:link, #menu2 li a:visited {
&nbsp;&nbsp; &nbsp;color: #8BADCF;
&nbsp;&nbsp; &nbsp;display: block;
&nbsp;&nbsp; &nbsp;background: url(http://tutoriaisparaweb.110mb.com/IMG/menu3.gif);
&nbsp;&nbsp; &nbsp;padding: 8px 0 0 10px;
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; 
#menu2 li a:hover {
&nbsp;&nbsp; &nbsp;color: #627EB7;
&nbsp;&nbsp; &nbsp;background: url(http://tutoriaisparaweb.110mb.com/IMG/menu3.gif) 0 -32px;
&nbsp;&nbsp; &nbsp;padding: 8px 0 0 10px;
&nbsp;&nbsp; &nbsp;}

#menu2 ul {
&nbsp;&nbsp; &nbsp;list-style-type: none; /*remove o marcador*/
&nbsp;&nbsp; &nbsp;margin: 0; /*remove o recuo IE e Opera*/
&nbsp;&nbsp; &nbsp;padding: 0; /*remove o recuo Mozilla e NN*/
}

Preview:




Explicando:

width --- Largura em pixels
height --- Altura em pixels
border-width --- espessura da borda
border-style --- estilo da borda
border-color --- cor da borda
padding -- espaçamento interno em pixel 
background --- imagem de fundo ou cor do botão