Séries de Web: Menus – Estilo Ziz Zag

Aprenda neste post, como criar um menu lateral, no estilo Zig Zag.

Clique aqui, para ver o resultado.

<style type="text/css">
.menu{ 
	position:absolute; 
	top:0px; 
	left:0px; 
	background-color:#CCC; 
	width:360px; 
	height:100%;
	min-height:100%;
	padding:10px;
}
ul#menu {
	margin:0;
	padding:0;
	list-style-type:none;
}
ul#menu li {
	margin: 0 0 2px;
	width:190px;
	text-align:center;
	background-color:#666666;
}
ul#menu .right {
	display:block;
	float:right;
	clear:both;
}
ul#menu .left {
	display:block;
	float:left;
	clear:both;
}
ul#menu li a:link, ul#menu li a:visited, ul#menu li a:active {
	display:block;
	text-decoration:none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#FFF;
	padding:8px 0;
}
ul#menu li a:hover {
	color:#000;
	background-color:#999999;
}
</style>
<div class="menu">
  <ul id="menu">
    <li class="left"><a href="">Menu 1</a></li>
    <li class="right"><a href="">Menu 2</a></li>
    <li class="left"><a href="" id="prod">Menu 3</a></li>
    <li class="right"><a href="">Menu 4</a></li>
    <li class="left"><a href="" id="contato">Menu 5</a></li>
   </ul>
</div>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *