Salve a tutti, mi sono iscritto per chiedere un aiuto sulla realizzazione di un menù a scomparsa orizzontale inline.
Questo dovrebbe essere il risultato:
Premessa: E' la prima volta che provo ad realizzare un menù e ho preso come esempio principale quello messo a disposizione su un altro sito.
Ora vi posto il codice html della parte di quel che ho tentato di fare:
Il problema più evidente che i rullover, usati per la prima parte del menà, non vengono visualizzati.
Css:
[Spoiler][/Spoiler]codice:#Menu { margin-top: 3px; height: 80px; width: 930px; margin-left: 214px; padding-left: 8px; } .ul{ float : left; height : 30px; margin:0px 0px 0px 0px; /* zero margin*/ padding :0px 0px 0px 0px; /* zero padding*/ border :0px 0px 0px 0px; /* niente bordi*/ width : 730px; list-style-type : none; /* non ha puntatura*/ } .ul li { float:left; height : 30px; /* altezza della lista*/ width : 101px; /* larghezza della lista*/ margin : 0px 0px 0px 0px; /* senza margine*/ padding :0px 0px 0px 0px; /* non si distanzia*/ border : 0px 0px 0px 0px; list-style-type : none; /* senza puntatura*/ display : inline; /* si espande per tutta la larghezza su di un ' unica linea*/ text-align:center; font-size: 10px; } .ul li a{ height : 30px; /* altezza della lista*/ float : left; /* importante*/ width : 100px; /* larghezza della lista*/ text-decoration : none; /* non ha sottolineatura*/ background-color : #000; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; display : inline; } .ul li a:link, .ul li a:hover, .ul li a:active, .ul li a:visited { color:#333; text-decoration : none; background-color:#FFF; font-weight : 600; } /*.ul li a:hover, .ul li a:active{ color:#333; text-decoration : none; background-color:#FFF; font-weight : 600; } .ul li a:visited{ color:#333; text-decoration : none; background-color:#FFF; font-weight : 600; } */ .gold{ height : 25px; vertical-align : bottom; } #menu01[id], #menu02[id], #menu03[id], #menu04[id], #menu05[id], #menu06[id], #menu07[id], #menu08[id], #menu09[id], #menu10[id], #menu11[id], #menu12[id]{ position:absolute; } #menu01, #menu02, #menu03, #menu04, #menu05, #menu06, #menu07, #menu08, #menu09, #menu10, #menu11, #menu12{ border:0px 0px 0px 0px; margin:5px 0px 0px 0px; padding:0px 0px 0px 0px; position : absolute; /*importantissimo*/ height:79px; /*importantissimo!!!! altezza del menu impostata a 0px altrimenti fa casino*/ width : 938px; /*e' importante che sia largo almeno un px in piu' della classe .ul*/ top : 102px; /*distanza assoluta dal top della pagina*/ left : 214px; /* distanza assoluta dal left della pagina*/ } #div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12{ border:0px 0px 0px 0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; top : 0px; /*rispetto a menu01, menu02...*/ position : relative; /*importantissimo*/ width : 70px; /*larghezza di ogni menu*/ height : 30px; /*altezza di ogni menu*/ } /* settaggio di ogni singolo menu in orizzontale. */ #div1{ left:17px; } #div2{ left:98px; } #div3{ left:180px; } #div4{ left:303px; } #div5{ left:404px; } #div6{ left:505px; } #div7{ left:606px; } #div8{ left:707px; } #div9{ left:808px; } #div10{ left:909px; } #div11{ left:1010px; } #div12{ left:1111px; } /* inizio della dichiarazione delle classi che richiamano il menu. I menu funzionano in virtu' di questo richiamo*/ .Down img { /* quando il menu e' a riposo non è visibile*/ display:none; visibility:hidden; } html >body .Up img{ /*questa dichiarazione si rende necessaria per i browser gecko : non serve far apparire l'immagine perche' il menu scorra, ma serve per IE, che capisce meno di un tubo*/ display:none; visibility:hidden; } .Up img { /* classe che viene richiamata quando il mouse passa sul menu*/ display:inherit; visibility:hidden; /*il menu e' visibile e lo rimane fino a quando il mouse rimane sul menu*/ } .Down .ul{ display:none; } .Up .ul{ display:inherit; } /*.gold{ text-align: center; background-color:#FFF; color: #415A3D0; }*/ /*td{ padding-left: 7px; }*/
Grazie per l'aiuto.
Rispondi quotando
