Condividi:        

HTML/CSS: creare menu multilivello

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Anthony47, Triumph Of Steel, archimede

HTML/CSS: creare menu multilivello

Postdi malcomx73 » 19/10/07 23:07

come da oggetto vorrei creare,è un po di giorni che giro e leggo ma nn riesco a venirne a una.
ho scaricato un menu ma nn riesco a personalizzarlo,mi date una mano a capire cosa modificare?
il mio menu è composto da un codice html e un foglio css se nn ho capito male x avere le modifiche devo andare nel css document.
ho provato ma niente.
qualcuno sa spiegarmi cosa modificare x avere + voci nel menu fisso.il mio ne ha solo tre.ecco il codice:
Codice: Seleziona tutto
/* CSS Document */

div.menu
{
width:483px;
position:relative;
background-color:#006600;
height:22px;
}
ul.menu
{
position:relative;
padding:0px;
margin:0px;
list-style-type:none;
float:left;
}
ul.menu ul
{
position:relative;
list-style-type:none;
margin:0px;
display:none;
background-color:#00CCFF;
}
ul.menu ul ul
{
position:absolute;
display:none;
margin-top:0px;
margin-left:0px;
}
ul.menu:hover ul
{
display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}
a.menu
{
background-color:#009933;
display:block;
width:150px;
padding-left:10px;
text-decoration:none;
color:#FFFFFF;
font-family:arial;
font-size:13px;
border-bottom: solid 1px black;
border-right: solid 1px #00cc00;
margin-bottom:-1px;
font-weight: bold;
}
a.menu:hover
{
background-color:#006600;
color:#00cc00;
}
grazie
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Sponsor
 

Postdi archimede » 20/10/07 07:31

Difficile a dirsi senza l'HTML usato per costruire il menu.

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi malcomx73 » 20/10/07 08:37

Codice: Seleziona tutto
<!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=iso-8859-1" />
<link rel="stylesheet" href="stile.css" />
<!--[if IE]>
<link rel="stylesheet" href="stileie.css" />
<![endif]-->
<title>CSS Menu</title>
</head>
<body>
<div class="menu">
<ul class="menu">
   <li><a class="menu"href="http://www.mondofantastico.altervista.org">Home</a>
      <ul>
         <li><a class="menu"href="http://www.pc-facile.com">forum</a>
         <li><a class="menu" href="http://www.">Link1</a></li>
               <li><a class="menu" href="http://www.">Link2</a></li>
               <li><a class="menu" href="http://www.">Link3</a></li>
               <li><a class="menu" href="http://www.">Link4</a></li>         
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
               <li><a class="menu" href="http://www.">Link2</a></li>
               <li><a class="menu" href="http://www.">Link3</a></li>
            </ul>
         </li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
                      
            </ul>
         </li>
       
      </ul>
   </li>
</ul>
<ul class="menu">
   <li><a class="menu"href="http://www.">Menu2</a>
      <ul>
         <li><a class="menu"href="http://www.pc-facile.com">forum</a>
         <li><a class="menu" href="http://www.">Link1</a></li>
               <li><a class="menu" href="http://www.">Link2</a></li>
               <li><a class="menu" href="http://www.">Link3</a></li>
               <li><a class="menu" href="http://www.">Link4</a></li>         
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
            </ul>
         </li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
               <li><a class="menu" href="http://www.">Link2</a></li>
               <li><a class="menu" href="http://www.">Link3</a></li>
               <li><a class="menu" href="http://www.">Link4</a></li>
            </ul>
         </li>
         <li><a class="menu"href="http://www.">Sottomenu3</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
               <li><a class="menu" href="http://www.">Link2</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li> <a class="menu"href="http://www.">Menu3</a>
      <ul>
         <li><a class="menu"href="http://www.">Sottomenu1</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
               <li><a class="menu" href="http://www.">Link2</a></li>
              <li><a class="menu" href="http://www.">Link3</a></li>
            </ul>
         </li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
               <li><a class="menu" href="http://www.">Link2</a></li>
             
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>
</body>
</html>
questo il codice html
mi ripeto vorrei creare menu 4 menu 5 ecc.
grazie
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Postdi archimede » 20/10/07 09:42

Aperture e chiusure dei tag mi sembrano parecchio incasinate. Così funziona (in Firefox), se togli le width dal CSS:
Codice: Seleziona tutto
<!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=iso-8859-1" />
<link rel="stylesheet" href="stile.css" />
<!--[if IE]>
<link rel="stylesheet" href="stileie.css" />
<![endif]-->
<title>CSS Menu</title>
</head>
<body>
<div class="menu">
<ul class="menu">
   <li><a class="menu"href="http://www.mondofantastico.altervista.org">Home</a>
      <ul>
         <li><a class="menu"href="http://www.pc-facile.com">forum</a></li>
         <li><a class="menu" href="http://www.">Link1</a></li>
         <li><a class="menu" href="http://www.">Link2</a></li>
         <li><a class="menu" href="http://www.">Link3</a></li>
         <li><a class="menu" href="http://www.">Link4</a></li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
               <li><a class="menu" href="http://www.">Link2</a></li>
               <li><a class="menu" href="http://www.">Link3</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li><a class="menu"href="http://www.">Menu2</a>
      <ul>
         <li><a class="menu"href="http://www.pc-facile.com">forum</a></li>
         <li><a class="menu" href="http://www.">Link1</a></li>
         <li><a class="menu" href="http://www.">Link2</a></li>
         <li><a class="menu" href="http://www.">Link3</a></li>
         <li><a class="menu" href="http://www.">Link4</a></li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li><a class="menu"href="http://www.">Menu3</a>
      <ul>
         <li><a class="menu"href="http://www.pc-facile.com">forum</a></li>
         <li><a class="menu" href="http://www.">Link1</a></li>
         <li><a class="menu" href="http://www.">Link2</a></li>
         <li><a class="menu" href="http://www.">Link3</a></li>
         <li><a class="menu" href="http://www.">Link4</a></li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li><a class="menu"href="http://www.">Menu4</a>
      <ul>
         <li><a class="menu"href="http://www.pc-facile.com">forum</a></li>
         <li><a class="menu" href="http://www.">Link1</a></li>
         <li><a class="menu" href="http://www.">Link2</a></li>
         <li><a class="menu" href="http://www.">Link3</a></li>
         <li><a class="menu" href="http://www.">Link4</a></li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li><a class="menu"href="http://www.">Menu5</a>
      <ul>
         <li><a class="menu"href="http://www.pc-facile.com">forum</a></li>
         <li><a class="menu" href="http://www.">Link1</a></li>
         <li><a class="menu" href="http://www.">Link2</a></li>
         <li><a class="menu" href="http://www.">Link3</a></li>
         <li><a class="menu" href="http://www.">Link4</a></li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li><a class="menu"href="http://www.">Menu6</a>
      <ul>
         <li><a class="menu"href="http://www.pc-facile.com">forum</a></li>
         <li><a class="menu" href="http://www.">Link1</a></li>
         <li><a class="menu" href="http://www.">Link2</a></li>
         <li><a class="menu" href="http://www.">Link3</a></li>
         <li><a class="menu" href="http://www.">Link4</a></li>
         <li><a class="menu"href="http://www.">Sottomenu2</a>
            <ul>
               <li><a class="menu" href="http://www.">Link1</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>
</body>
</html>
HTH.

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi malcomx73 » 20/10/07 11:05

grazie grazie.
allora se nn ho capito male x modificare quello che volevo devo toccare il codice html?io modificavo il doc.css
quindi il doc css serve a modificare il colore dello sfondo?
lo stesso menu puo funzionare anche con IE?e come?
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Postdi archimede » 20/10/07 11:30

malcomx73 ha scritto:lo stesso menu puo funzionare anche con IE?
Non lo so: hai provato?

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi malcomx73 » 20/10/07 11:54

si ho provato nn va nn è che ha bisogno di un altro doc .css
cmq nn mi hai risposto a
allora se nn ho capito male x modificare quello che volevo devo toccare il codice html?io modificavo il doc.css
quindi il doc css serve a modificare il colore dello sfondo?
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Postdi Dylan666 » 20/10/07 14:30

l'html contiene gli elementi del menù, il css ne contiene i colori e l'impaginazione
Avatar utente
Dylan666
Moderatore
 
Post: 39988
Iscritto il: 18/11/03 16:46

Postdi malcomx73 » 21/10/07 00:30

ho appena finito è bellissimo grazie x l aiuto.
mi manca di capire adesso come inserirlo nella home page sto provando ha inserire il codice html ma nn va.
poi nn si riesce ad adattare anche ad IE?
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Postdi archimede » 21/10/07 08:15

malcomx73 ha scritto:mi manca di capire adesso come inserirlo nella home page sto provando ha inserire il codice html ma nn va.
Non ho idea di come sia fatta la tua pagina, ma probabilmente il problema è che stai inserendo il menu in un altro contenitore (una table, un div o altro). Se metti il codice direttamente dopo il tag <body> dovrebbe andare.
malcomx73 ha scritto:poi nn si riesce ad adattare anche ad IE?
Naturalmente sei consapevole che il codice da te postato referenzia due css, uno dei quali specificatamente per IE, vero?

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi malcomx73 » 21/10/07 09:10

ciao
x quanto riguarda i css lo so sono 2 stile e stileie,io ho effettuato le mie modifiche su stile e le ha prese,poi ho copiato tt e lo incollato in stileie ma
ho il sentore che nn va cosi xkè in ie nn funge.
x quanto riguarda l intro.del codice nella home ho provato in vari modi prima dopo <head></head> poi dopo <boby></body>ma niente,se nn hai problemi metto il codice (un po lungo)
grazie
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Postdi archimede » 21/10/07 10:10

malcomx73 ha scritto:ho effettuato le mie modifiche su stile e le ha prese,poi ho copiato tt e lo incollato in stileie
:eeh: Cioè stile e stileie sono uguali? E secondo te che senso può avere fare un css specificatamente per un browser se poi il suo contenuto è identico al css degli altri browser?

Alessandro
archimede
Moderatore
 
Post: 2851
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi malcomx73 » 21/10/07 12:37

sono uguali solo che devo mettere questo:
Prima della chiusura del tag head inseriamo:

<link rel="stylesheet" href="stile.css" />
<!--[if IE]>
<link rel="stylesheet" href="stileie.css" />
<![endif]-->
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Postdi Maurizio74 » 21/10/07 14:43

malcomx73 ha scritto:sono uguali solo che devo mettere questo:
Prima della chiusura del tag head inseriamo:

<link rel="stylesheet" href="stile.css" />
<!--[if IE]>
<link rel="stylesheet" href="stileie.css" />
<![endif]-->
Questo serve solo a far scegliere che stile usare (se l'utente usa Internet Explorer o meno)... se poi i file stile.css e stileie.css sono identici, a che serve scegliere tra uno e l'altro ? :roll:
Nel file stileie.css devi effettuare le modifiche in modo da avere la stessa pagina (o almeno molto simile) anche con IE ;)

Ciao :)
Avatar utente
Maurizio74
Utente Senior
 
Post: 885
Iscritto il: 19/01/03 16:35
Località: Roma

Postdi malcomx73 » 22/10/07 09:38

Risolto il problema del funzionamento in IE
era da configurare il css stileie.
Adesso mi manca di metterlo nella home page.
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Postdi malcomx73 » 23/10/07 14:51

Risolto anche il problema di inserimento nella home page.
Solo nn riesco a capire come mai in IE è centrato e in Firefox no.


http://img265.imageshack.us/img265/4459 ... piakg2.jpg
malcomx73
Utente Junior
 
Post: 64
Iscritto il: 30/04/06 20:23

Postdi Dylan666 » 23/10/07 20:41

Metti solo link testuali alle immagini grandi ;)
Quello di prima l'ho modificato io
Avatar utente
Dylan666
Moderatore
 
Post: 39988
Iscritto il: 18/11/03 16:46


Torna a Programmazione


Topic correlati a "HTML/CSS: creare menu multilivello":


Chi c’è in linea

Visitano il forum: Nessuno e 9 ospiti