| Allegato | Dimensione |
|---|---|
 Untitled-5.jpg | 292.48 KB |
Buongiorno a tutti, sono un nuovissimo iscritto ma è da tempo che lurko i forums a caccia di informazioni interessanti.
Mi trovo a dover utilizzare Drupal per motivi di lavoro, e sinceramente non ne avevo mai fatto uso prima, essendo io un (ex oramai, date le soddisfazioni che mi sta dando questo CMS) discepolo di Wordpress, anche per il lato CMS.
Mi trovo davanti ad un vicolo cieco sul quale sto sbattendo la testa da questa mattina.
Il sito che sto realizzando attualmente prevede due livelli di menu, menu che ho realizzato con due blocchi scritti ad hoc per poter agilmente implementare un dropdown animato con jquery.
I due menu orizzontali sono posizionati uno in successione all'altro, verticalmente (rif. immagine allegata).
Il mio problema è che i dropdown del primo menu non riescono ad "overlappare" (oddio che brutto neologismo) il menu sottostante, e lo stesso vale per il menu sottostante che non riesce a visualizzarsi al di sopra del contenuto sottostante.
Allego una immagine per maggiore chiarezza.
Qui di seguito invece il markup dei menu:
#nav { margin:0; padding:0; list-style:none; float:right;}
#nav li { float:left; display:block; position:relative; margin:0; }
#nav li a { display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; text-align:left; color:#2F2F2F; padding-left:30px; }
#nav li a:hover { color:#FFF; }
#nav ul { position:absolute; left:30px; background-color:#000; display:none; margin:0 0 0 -1px; padding:0; list-style:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
#nav ul li { float:left; margin-left:5px; }
#nav ul a { display:block; height:12px; padding: 8px 5px; color:#FFF; float:left; }
#nav ul a:hover { text-decoration:none; }
*html #nav ul { margin:0 0 0 -2px; }
.alumnidd li { width:130px; }
.lifedd li { width:170px; }
.aboutdd li { width:190px; }quello del secondo menù è praticamente identico a parte alcune lievi modifiche.
Purtroppo non posso fornirvi un link dato che sto lavorando in locale prima della pubblicazione, ma l'immagine dovrebbe essere abbastanza chiara.
Per completezza, sto usando un subtheme creato da me con base Fusion, e utilizzo i moduli block-class e Skinr
Sono disponibile per qualsiasi altra informazione e ringrazio anticipatamente chiunque possa fornirmi una spiegazione o anche sono indicarmi la direzione da seguire.
Buona giornata,
Pirelli Matteo
Web Designer presso ArsArpel Group, Milano
ciao,
hai provato ad usare la proprietà z-index??
I Dubbi te li crea la libertà.
http://www.texas138.com
Si, ma probabilmente la applico al punto sbagliato. Al momento ho impostato uno z-index:12000; in questa parte del markup:
#nav ul { position:absolute; left:30px; background-color:#000; display:none; margin:0 0 0 -1px; padding:0; list-style:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }Ma senza risultati. Sembra quasi che i blocchi di drupal abbiano degli zindex insormontabili. Ho provato anche con la proprietà overflow:visible ma senza risultati.
mmmmm
cosi' non saprei... si dovrebbe dare uno sguardo al codice... compreso jquery... perchè guardando cosi' da una foto capisco poco...
ma i 2 menu sono in 2 div diversi ?? il codice html dei menu si puo' vedere??
I Dubbi te li crea la libertà.
http://www.texas138.com
Come no!
Allora: i menu sono in due blocchi diversi, in ognuno di questi blocchi c'è il markup del menu. I markup sono i seguenti:
<ul id="nav"><li><a href="#">ABOUT US</a>
<ul class="aboutdd">
<li><a href="#">History</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Succesful students</a></li>
<li><a href="#">A tribute to prof. Lunati</a></li>
</ul>
</li>
<li><a href="#">LIFE AT CAMPUS</a>
<ul class="lifedd">
<li><a href="#">Accomodations</a></li>
<li><a href="#">How to reach us</a></li>
<li><a href="#">Useful Addresses</a></li>
<li><a href="#">Info about Milan</a></li>
<li><a href="#">Scholarships</a></li>
</ul>
</li>
<li><a href="#">ALUMNI</a>
<ul class="alumnidd">
<li><a href="#">Register</a></li>
<li><a href="#">Class Pictures</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Job Posting</a></li>
<li><a href="#">Class Calendar</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
Governato dal seguente codice CSS
.topmenu { z-index:11000; overflow:visible;}#nav { margin:0; padding:0; list-style:none; float:right; }
#nav li { float:left; display:block; position:relative; margin:0; }
#nav li a { display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; text-align:left; color:#2F2F2F; padding-left:30px; }
#nav li a:hover { color:#FFF; }
#nav ul { position:absolute; left:30px; background-color:#000; display:none; margin:0 0 0 -1px; padding:0; list-style:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; z-index:10000; overflow:auto; }
#nav ul li { float:left; margin-left:5px; }
#nav ul a { display:block; height:12px; padding: 8px 5px; color:#FFF; float:left; }
#nav ul a:hover { text-decoration:none; }
*html #nav ul { margin:0 0 0 -2px; }
.alumnidd li { width:130px; }
.lifedd li { width:170px; }
.aboutdd li { width:190px; }
la classe ".topmenu" è una classe assegnata al blocco tramite il modulo Block-Class.
Sono riuscito a far uscire i menu dalla loro "gabbia fittizia", ma quello superiore viene troncato non appena incontra il blocco del menu principale, nonostante abbia z-index inferiore.
Sto per fondere, non riesco proprio a venirne a capo.
Può essere un problema relativo al fatto che i menu si trovino in due regioni diverse del template? (il primo in "header-top" il secondo in "header")
EDIT: mentre scrivevo stavo pastrugnando col codice e ho parzialmente risolto. Spostando entrambi i blocchi di menu nella stessa regione, lo z-index funziona correttamente. Si è presentato ora però il problema di fare l'overflow da "header-top" al contenuto, come in figura allegata)
prova a dare uno z-indez piu' basso al contenuto rispetto a quello dato ai menu...
I Dubbi te li crea la libertà.
http://www.texas138.com
Si ovvio è quello che stavo cercando di fare, ma il mio problema è: a che paramentro del CSS dichiaro lo z-index per il contenuto? Nel css relativo alla regione, oppure direttamente su .page o .node?