menu con sottovoci

**peppepegasus** · 26-01-2012, 14:26

ciao,

sto cercando un menu in cui alcune voci hanno delle sottovoci, che abbia i bottoni o in orizzontale o in verticale fatto usando semplicemente css. Ho visto qualcosa ma usano tutti javascript o jquery.
Qualcuno può segnalarmi qualche codice/tutorial o simile?
grazie.

**Mich_** · 26-01-2012, 15:39

Tra i "lilnk utili" del forum c'e` una sezione sui menu.

prova a vedre quelli di CSSplay

**peppepegasus** · 30-01-2012, 17:43

ciao,

ho dato una rapida occhiata alla sezione che mi hai segnalato ma non sono riuscito a trovare nulla che si potesse adattare al mio template. il link del template è questo:
http://www.oswd.org/design/preview/id/3134
e mi servirebbe qualcosa per sostituire il menu veticale a sinistra.
qualcuno mi può aiutare?
grazie.
ciao.

**ResianTaxidrive** · 30-01-2012, 17:51

con dozzine e dozzine di menu che ci sono su quel sito non hai trovato niente?? Possibile? Alla sezione Multi-level flyout ce n'è un sacco di menu verticali.

**Mich_** · 30-01-2012, 17:57

Ma che tipo di menu vorresti?
ovvero
Come dovrebbe essere rispetto a quello presente in quella pagina?

I sottomenu devono essere sempre aperti? (o aprirsi al passaggio del mouse)

Nel primo post chiedevi "che abbia i bottoni o in orizzontale o in verticale": e` una richiesta troppo generica; dovresti chiarire meglio (a te stesso innanzitutto) cosa vuoi.

**peppepegasus** · 30-01-2012, 19:40

ciao,

provo a guardare meglio nella sezione indicata.
Le idee sono chiare ora: mi serve un menu simile a quello a sinistra del template solo che alcune voci devono presentare delle sottovoci. Per aprire le sottovoci o si deve cliccare sulla voce o devono uscire al passaggio del mouse poco importa.
A me serve qualcosa di semplice e che possa essere facilmente integrato nel template al posto del menu di default a sinistra.
spero di essere stato chiaro ora.
grazie. ciao.

**carlomarangoni** · 31-01-2012, 00:32

HTML

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>

<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=8" />

<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />

</head>

<body>

<div class="mainmenu">

<ul>
      <li class="li_nc">Home
      <li class="li_hc">Products<ul class="ul_ch">
         <li class="li_hc">Product 1<ul class="ul_ch">
            <li class="li_hc">Description<ul class="ul_ch">
               <li class="li_nc">Overview
               <li class="li_nc">General Info
               <li class="li_nc">License[/list]
            <li class="li_nc">Buy Now[/list]
         <li class="li_nc">Product 2
         <li class="li_nc">Product 3[/list]
      <li class="li_hc">Services<ul class="ul_ch">
         <li class="li_nc">Service 1
         <li class="li_nc">Service 2
         <li class="li_nc">Service 3
         <li class="li_nc">Service 4
         <li class="li_nc">Service 5[/list]
      <li class="li_nc">More
      <li class="li_nc">Test[/list]


</div>

</body>
</html>

CSS

codice:

@charset "utf-8";
/* CSS Document */


body {
	background-color: #ffffff;

behavior:url("csshover2.htc");

}

.mainmenu{

	width: 15em;
	padding: 0;
	float: left;

}
.mainmenu ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 1;
	color:#FFFF00;
	background: #000080;

	padding: 0;
	border: solid #A0A0A4;
	border-width: 1px 1px;
	margin: 0 0 0 0;
}

.mainmenu a, .mainmenu a:visited {
	display: block;
	width: 100%;
font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
	color: #FFFF00;
	text-decoration: none;
	padding: 1em 0em;
	text-indent:1em;
	margin: 0;	

}
.mainmenu li li a{padding:1em;text-indent:0;}
.mainmenu ul ul a{
	width:100%;
	height:100%;
}
.mainmenu ul a{
		width: 100%;
}


.mainmenu li  {
	float: left;
	width:100%;
	margin:0;
	padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li  {width:100%;} /* !!!!! */
	
.mainmenu li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width:15em;	
	background: #000080;
	font-weight: normal;
	border-width: 1px;
	margin: 0;
}

.mainmenu li li {
	width: 100% ; 
}
.mainmenu li a{width: 100% ; }
.mainmenu li li a{
	width: 100%;
}

.mainmenu li ul  {
	margin: -2.1em 0 0 -0.3em;
}
.mainmenu li ul ul {
	margin: -2.1em 0 0 -0.3em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
	left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
	left: 100%; /* !!! */
}
.mainmenu li:hover>ul.ul_ch   
{
	left: 100%; /* !!! */
}

.mainmenu li:hover{
	background: #FF0000;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
	color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
	color:#FFFF00;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
	background: #B90000;
	z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
	color: #FFFF00; 
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
	color: #FFFF00;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
	color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
	color: #FFFF00;
}

**peppepegasus** · 31-01-2012, 12:28

ciao,

grazie per il codice, credo sia generato da un programmino. il problema che l'ho integrato nel template però i sottomenu non mi compaiono.
Mi servirebbe un menù le cui voci dei sottomenu invece di aprirsi lateralmente si aprano sotto..un esempio che ho trovato tra le pagine dei link suggeriti dei css c'è questo
http://www.stunicholls.com/menu/tree_frog_slide.html
anche se non era quello che avevo visto. Quello visto per il codice bisogna farne richiesta al proprietario etc etc.
questo l'ho scaricato e ora lo provo.
grazie.

Discussione: menu con sottovoci

Strumenti discussione

Ricerca discussione

Visualizza

menu con sottovoci

Permessi di invio