menu orizzontale

**maxxl** · 29-07-2005, 12:09

Ho visto questo articolo sui menu orizzontali

http://www.alistapart.com/articles/hybrid/

molto valido

Sorge un piccolo problema... come faccio a centrarlo a seconda delle dimensioni della pagina???

Mi spiego meglio:se lo inserisco in una
<table align="center">

si allinea sono il menu principale e non i submenu..

consigli????

grazie..

**whiteduke** · 29-07-2005, 12:16

Prova a pastare il codice che cosi è poco chiaro. Ciao

**maxxl** · 29-07-2005, 12:24

Eccolo... posto l'originale

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>
<script language="Javascript" type="text/javascript">
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
  node = navRoot.childNodes[i];
  if (node.nodeName=="LI") {
  node.onmouseover=function() {
  this.className+=" over";
    }
  node.onmouseout=function() {
  this.className=this.className.replace
      (" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>


<style type="text/css" media="all">

	
	#nav {
		margin: 0;
		padding: 0;
	}

	#nav li.on ul, #nav li.off ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		text-decoration: none;
	}

	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding-right: 15px;
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul { /*put the subnav below*/
		position: absolute;
		top: 33px;
		*top: 44px;
		left: 5px;
		padding-top: 10px;
		background: #d6e3b0;
		height: 28px;
		width: 640px;
	}

	#nav li a {
		color: #d6e3b0;
		font-weight: bold;
		display: block;
		height: 15px;
		width: 100px;
		border: 2px solid #d6e3b0;
		padding: 5px;
	}

	#nav li.on a {
		border: 2px solid #7a8566;
		color: #7a8566;
	}

	#nav li.on ul a, #nav li.off ul a {
		float: left; /*ie doesn't inherit the float*/
		border: 0;
		color: #7a8566;
		width: auto;
		margin-right: 15px;
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul,#nav li.over ul {
		display: block;
		z-index: 6000;
				}

	#nav li.off a:hover, #nav li:hover a, #nav li.over a {
		background: #d6e3b0;
		color: #7a8566;
	}

#nav li.off ul, #nav li.on ul {
  /*put the subnav below*/
  top: 33px;
  *top: 44px; /*reposition for IE*/
}

		
	</style>



<body>



<ul id="nav">
<li class="off">Renaissance
<ul>[*]Brunelleschi[*]Alberti[*]Palladio[*]Michelangelo[*]Bramante[/list]
<li class="off">Art Nouveau
<ul>[*]Mackintosh[*]Guimard[*]Horta[*]van de Velde[/list]
<li class="on">Modern
<ul>[*]Sullivan[*]Le Corbusier[*]Mies[*]Gropius[*]Yamasaki[/list]
<li class="off">Postmodern
<ul>[*]Venturi[*]Eisenman[*]Stern[*]Graves[*]Gehry[/list]
<li class="off">Digital
<ul>[*]Xenakis[*]Lynn[*]Diller+Scofidio[*]Zellner[*]Hadid[/list][/list]



</body>
</html>

Discussione: menu orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

menu orizzontale

Permessi di invio