Internet Paulista

Neste material vamos aprender a criar dois menus estilizados. O primeiro é um menu vertical e o segundo exemplo é uma barra de navegação horizontal. Lembrando que depois de prontos vocês podem alterar as propriedades deixando-os a sua escolha.

Espero que façam bom proveito dos menus e sucesso!!!!

Exemplo 1 (Menu Vertical)

CSS


/* Formatação da folha de estilo */





#menubv {


	width: 12em;


	padding: 0;


	margin: 0;


	font-family: “verdana”;


	font-size: 14px;


}





#menubv ul {


	list-style: none;


	margin: 0;


	padding: 0;


}





#menubv li {


	border-bottom-width: 1px;


	border-bottom-style: solid;


	border-bottom-color: #f00000;


}





#menubv li a {


	display: block;


	padding: 5px 5px 5px 0.5em;


	font-weight: bold;


	border-left: 10px solid #ffc0cb;


	border-right: 10px solid #fff5ee;


	background-color: #ffe4e1;


	color: #808000;


	text-decoration: none;


}





#menubv li a:hover {


	border-left: 10px solid #ffcccc;


	border-right: 10px solid #ffffff;


	background-color: #fff0f5;


	color: #cccccc;


}


www.revistaphp.com.br

Código HTML do menu:

HTML


<div id=“menubv”>


<ul id= “menubv”>


<li> <a href= “#” title= “link 0”> Link 0</a> </li>


<li> <a href= “#” title= “link 1”> Link 1</a> </li>


<li> <a href= “#” title= “link 2”> Link 2</a> </li>


<li> <a href= “#” title= “link 3”> Link 3</a> </li>


<li> <a href= “#” title= “link 4”> Link 4</a> </li>


<li> <a href= “#” title= “link 5”> Link 5</a> </li>


<li> <a href= “#” title= “link 6”> Link 6</a> </li>


<li> <a href= “#” title= “link 7”> Link 7</a> </li>


</ul>


</div>


www.revistaphp.com.br

Exemplo 2 (Barra de navegação horizontal)

CSS


/* Folha de estilo do menu */





#menuhor {


	border: none;


	margin: 0;


	font: 12px Arial, sans-serif;


}





#menuhor li {


	list-style: none;


	margin: 0;


	display: inline;


}





#menuhor li a {


	height: 1px; /* conserto para Internet Explorer */


	padding: 8px 6px;


	margin: 0;


	border: 1px solid #0042ff;


	background: #999999;


	text-decoration: none;


}





#menuhor li a:link {


	color: #ffffff;


}





#menuhor li a:visited {


	color: #ffffff;


}





#menuhor li a:hover {


	background: #859ce0;


	color: #000000;


	border-color: #000000;


}


www.revistaphp.com.br

Código HTML da barra de navegação

HTML


<div id=“menuhor”>


<ul id= “menuhor”>


<li> <a href= “#” title= “link 0”> Link 0</a> </li>


<li> <a href= “#” title= “link 1”> Link 1</a> </li>


<li> <a href= “#” title= “link 2”> Link 2</a> </li>


<li> <a href= “#” title= “link 3”> Link 3</a> </li>


<li> <a href= “#” title= “link 4”> Link 4</a> </li>


<li> <a href= “#” title= “link 5”> Link 5</a> </li>


<li> <a href= “#” title= “link 6”> Link 6</a> </li>


<li> <a href= “#” title= “link 7”> Link 7</a> </li>


</ul>


</div>


www.revistaphp.com.br