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> |