2 modelos de menu em CSS simples e bonitos

Publicado em: 11/11/2010
Revisado em: 28/07/2014
Categoria(s)HTML e CSS
Autor: Ricardo Bernardi
Newsletter: Inscreva-se

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 comeca o codigo CSS --->

<!--- aqui acaba o codigo CSS --->
<!--- aqui comeca o codigo HTML --->
<ul id="menu">
	<li><a title="Home page" href="#">Inicio</a></li>
	<li><a title="RBTech.info" href="http://rbtech.info">RBTech.info</a></li>
	<li><a title="Feed RSS" href="http://feeds.feedburner.com/RbTech">Assine nosso RSS</a></li>
	<li><a title="Twitter" href="http://twitter.com/rbtechinfo">Twitter</a></li>
	<li><a title="Facebook" href="http://www.facebook.com/rbtech.info">Facebook</a></li>
	<li><a title="YouTube" href="http://www.youtube.com/user/RBTechinfo">YouTube</a></li>
	<li><a title="Vimeo" href="http://vimeo.com/user4113806/videos">Vimeo</a></li>
</ul>
<!--- Aqui acaba o cdigo HTMl --->

Menu Vertical

<!--- Aqui comeca o codigo CSS --->

<!--- aqui acaba o codigo CSS --->
<!--- aqui comea o codigo HTML --->
<ul id="menu">
	<li><a title="Home page" href="#">Inicio</a></li>
	<li><a title="RBTech.info" href="http://rbtech.info">RBTech.info</a></li>
	<li><a title="Feed RSS" href="http://feeds.feedburner.com/RbTech">Assine nosso RSS</a></li>
	<li><a title="Twitter" href="http://twitter.com/rbtechinfo">Twitter</a></li>
	<li><a title="Facebook" href="http://www.facebook.com/rbtech.info">Facebook</a></li>
	<li><a title="YouTube" href="http://www.youtube.com/user/RBTechinfo">YouTube</a></li>
	<li><a title="Vimeo" href="http://vimeo.com/user4113806/videos">Vimeo</a></li>
</ul>
<!--- Aqui acaba o codigo HTMl --->

Compartilhe esse post:

Conteúdo relacionado

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Nenhum comentário foi publicado para este post. Seja o primeiro a comentar...

Deixe seu comentário

Clique aqui para cancelar a resposta.