Menù orizzontale tipo HTML

**mr.fifteen** · 30-03-2008, 20:12

Salve a tutti ho un problema.
Sto cercando un menù orizzontale che aprà il sottomenù su una barra orizzontale e non con la solità barra verticale tipo suckerfish.
Per intenderci il mio menù deve fare la stessa cosa che fa il menù di html.it quando si passa si "siti" o "blog".

Qualcuno saprebbe indicarmi dove posso trovare un tutorial sull'argomento???
Sono tre giorni che cerco e o non funzionano o non sono quelli che cerco...

Grazie.

**Mikele Sagitter** · 30-03-2008, 21:08

Beh sono quasi sicuro ke il menù a cui ti riferisci si possa ben realizzare solo con delle over sui bottoni e con l'hover (in css o javascript) far cambiare anche l'immagine (ti sto prendendo come esempio la barra ke vedi su html.it) adesso mi secca vedere come l'hanno fatta usando firebug ma sono abb sicuro che sia realizzata così. Le hover cambiano il colore della tab e fanno cambiare la barra sottostante, moltor probabilemente con un hinnerhtml. controlla con firebug che script hanno usato tramite la funzione ispect element

**Hobby** · 30-03-2008, 22:35

Originariamente inviato da mr.fifteen
Salve a tutti ho un problema.
Sto cercando un menù orizzontale che aprà il sottomenù su una barra orizzontale e non con la solità barra verticale tipo suckerfish.
Per intenderci il mio menù deve fare la stessa cosa che fa il menù di html.it quando si passa si "siti" o "blog".

Qualcuno saprebbe indicarmi dove posso trovare un tutorial sull'argomento???
Sono tre giorni che cerco e o non funzionano o non sono quelli che cerco...

Grazie.

Così può andare bene?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu a tendina</title>
<style media="screen" type="text/css">
* {
  margin: 0;
  border: 0;
  padding: 0;
}
dl, dt, dd{
	list-style-type: none;
}
#menu {
  width: 100%;
  float: left;
  border-top: 1px solid black;
}
#menu dl{
	float:left;
	background: #FFFFCC;
}
#menu dl.closed dd{
	display: none;
}
#menu dl.open dd{
	display: inherit;
}
#menu dt{
	width:100px
}
#menu dd {
	float:left;
  width:100px;
  border-right: 1px solid black;
  color:black;
}
#menu a {
  display: block;
  padding: 5px;
  color: #000;
  text-decoration: none;
}
#menu a:hover {
  background-color: #000033;
  color: #FFFFFF;
  text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 1</dt>
<dd>SottoMenu 1</dd>
<dd>SottoMenu 1</dd>
<dd>SottoMenu 1</dd>
<dd>SottoMenu 1</dd>
<dd>SottoMenu 1</dd>
</dl>
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 2</dt>
<dd>SottoMenu 2</dd>
<dd>SottoMenu 2</dd>
<dd>SottoMenu 2</dd>
<dd>SottoMenu 2</dd>
<dd>SottoMenu 2</dd>
</dl>
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 3</dt>
<dd>SottoMenu 3</dd>
<dd>SottoMenu 3</dd>
<dd>SottoMenu 3</dd>
<dd>SottoMenu 3</dd>
<dd>SottoMenu 3</dd>
</dl>
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 4</dt>
<dd>SottoMenu 4</dd>
<dd>SottoMenu 4</dd>
<dd>SottoMenu 4</dd>
<dd>SottoMenu 4</dd>
<dd>SottoMenu 4</dd>
</dl>
<dl class="closed" onmouseover="this.className='open'" onmouseout="this.className='closed'">
<dt>Menu 5</dt>
<dd>SottoMenu 5</dd>
<dd>SottoMenu 5</dd>
<dd>SottoMenu 5</dd>
<dd>SottoMenu 5</dd>
<dd>SottoMenu 5</dd>
</dl>
</div>










</p>
</body>
</html>

**mr.fifteen** · 30-03-2008, 23:09

Praticamente perfetto... solo non si potrebbe far si che i link del primo menù restino fermi al loro posto quando si passa sopra con il mouse...?

Discussione: Menù orizzontale tipo HTML

Strumenti discussione

Ricerca discussione

Visualizza

Menù orizzontale tipo HTML

Re: Menù orizzontale tipo HTML

Permessi di invio