•  
     

Menu e submenus em HTML

Menu e submenus em HTML

Código: Selecionar todos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" />
<meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." />
<meta name="author" content="Nick Rigby" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="language" content="pt-br" />
<meta name="ICBM" content="-22.975781,-43.193082" />
<meta name="DC.title" content="CSS para Web Design" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Drop Down Menus - Parte 3</title>
<script type="text/javascript">
function IEHoverPseudo() {

	var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
	
	for (var i=0; i<navItems.length; i++) {
		if(navItems[i].className == "menuparent") {
			navItems[i].onmouseover=function() { this.className += " over"; }
			navItems[i].onmouseout=function() { this.className = "menuparent"; }
		}
	}

}
window.onload = IEHoverPseudo;

</script>

<style type="text/css">

body { font: normal 62.5% verdana; }

ul#primary-nav,
ul#primary-nav ul {
	margin: 0;
	padding: 0;
/*	width: 600px; */ /* Width of Menu Items */
	border-bottom: 0px; solid #ccc;
	background: #fff;   /* IE6 Bug */
/*	background: blue;  /* IE6 Bug */ cor do fundo dos menus
	font-size: 100%;
	}


ul#primary-nav li {
	position: relative;
	list-style: none;
	display: inline;
		float:left;
	}

ul#primary-nav li a {
	display: block;
	text-decoration: none;
		float:left;
	color: #777;
/*	color: red;   cor das letras do menu */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 1;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */

ul#primary-nav ul {
	position: absolute;
	display: none;
	left: 0px;   /* Set 1px less than menu width */
	top: 23px;
	}

ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#primary-nav li:hover ul ul ,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; top: 17px;} /* Hide sub-menus initially */

ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */

ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; } 
/* ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> */

ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; }
/*ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu */

ul#primary-nav li a:hover { color: #E2144A;  }
/*ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo */

</style>
</head>
<body>
<h1>EXEMPLO DE MENU PRINCIPAL NA HORIZONTAL</h1>
<h2>Adaptação feita por:</h2>Marcos Antunes Moleiro<br><br>
<ul id="primary-nav">
  <li><a href="#">Home</a></li>

  <li class="menuparent"><a href="#">About   </a> 
	<ul>
	  <li><a href="#">History</a></li>

	  <li><a href="#">Team</a></li>
	  <li><a href="#">Offices</a></li>
	</ul>
  </li>

  <li class="menuparent"><a href="#">Services   </a> 
	<ul>
	  <li><a href="#">Web Design</a></li>

	  <li><a href="#">Internet Marketing</a></li>
	  <li class="menuparent"><a href="#">Hosting   </a> 
		<ul>
		  <li><a href="#">Dedicated</a></li>

		  <li><a href="#">Virtual</a></li>
		  <li><a href="#">Shared</a></li>

		  <li><a href="http://www.uem.br" target="_blank">Managed</a></li>
		</ul>
	  </li>
	  <li><a href="#">Domain Names</a></li>
	  <li><a href="#">Broadband</a></li>

	</ul>
  </li>

  <li class="menuparent"><a href="#">Contact Us   </a> 
	<ul>
	  <li><a href="#">United Kingdom</a></li>
	  <li><a href="#">France</a></li>
	  <li><a href="#">USA</a></li>

	  <li><a href="#">Australia</a></li>

	</ul>
  </li>
</ul>
</body>
</html>