Faça login para ocultar este anúncio
Olá pessoal, estou postando hoje dois modelos de menus em CSS que prezam pela simplicidade mas não deixam a desejar no quesito aparência. Com certeza irá dar um gás na inspiração de vocês na hora de criar um menu para um site ou blog.
Fiz um exemplo de menu horizontal e outro vertical, espero que gostem da dica.
Menu horizontal:
<!--- Aqui começa o Código CSS --->
<style type="text/css">
#menu {
border:none;
margin: 0;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
#menu li {
list-style: none;
margin: 0;
display: inline;
}
#menu li a {
padding: 5px;
margin:0;
border-top: 2px solid #FF3300;
border-bottom: 2px solid #FF3300;
background: #333333;
text-decoration: none;
}
#menu li a:link {
color: #fff;
}
#menu li a:hover {
background: #FFFFFF;
color: #000000;
border-color: #000000;
}
</style>
<!--- aqui acaba o código CSS --->
<!--- aqui começa o código HTML --->
<ul id="menu">
<li>
<a href="#" title="Home page">Inicio</a>
</li>
<li>
<a href="http://rbtech.info" title="RBTech.info">RBTech.info</a>
</li>
<li>
<a href="http://rbhost.info/" title="RBHost.info">RBHost.info</a>
</li>
<li>
<a href="http://feeds.feedburner.com/RbTech" title="Feed RSS">Assine nosso RSS</a>
</li>
<li>
<a href="http://twitter.com/rbtechinfo" title="Twitter">Twitter</a>
</li>
<li>
<a href="http://www.facebook.com/rbtech.info" title="Facebook">Facebook</a>
</li>
<li>
<a href="http://www.youtube.com/user/RBTechinfo" title="YouTube">YouTube</a>
</li>
<li>
<a href="http://vimeo.com/user4113806/videos" title="Vimeo">Vimeo</a>
</li>
</ul>
<!--- Aqui acaba o código HTMl --->
Menu Vertical:
<!--- Aqui começa o Código CSS --->
<style type="text/css">
#menu {
width: 180px;
padding: 0;
margin-left: 25px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
background: #fff;
border-top: 3px solid #FF0000;
border-bottom: 3px solid #FF0000;
}
#menu li {
list-style: none;
margin: 2px;
}
#menu li a {
margin:0;
padding:3px 0 0 0;
text-decoration:none;
color: #000;
display:block;
height:20px;
}
#menu li a:hover {
border-left: 3px solid #FF0000;
padding:3px 0 0 5px;
}
</style>
<!--- aqui acaba o código CSS --->
<!--- aqui começa o código HTML --->
<ul id="menu">
<li>
<a href="#" title="Home page">Inicio</a>
</li>
<li>
<a href="http://rbtech.info" title="RBTech.info">RBTech.info</a>
</li>
<li>
<a href="http://rbhost.info/" title="RBHost.info">RBHost.info</a>
</li>
<li>
<a href="http://feeds.feedburner.com/RbTech" title="Feed RSS">Assine nosso RSS</a>
</li>
<li>
<a href="http://twitter.com/rbtechinfo" title="Twitter">Twitter</a>
</li>
<li>
<a href="http://www.facebook.com/rbtech.info" title="Facebook">Facebook</a>
</li>
<li>
<a href="http://www.youtube.com/user/RBTechinfo" title="YouTube">YouTube</a>
</li>
<li>
<a href="http://vimeo.com/user4113806/videos" title="Vimeo">Vimeo</a>
</li>
</ul>
<!--- Aqui acaba o código HTMl --->
Loading ...
