Mega menu

[stesil]

Non ho soluzioni da dare ... e non ne vedo altre rispetto a quelle prospettate da lemon.

Scrivo comunque quello che ho trovato, cioè la causa del comportamento anomalo dei menu in IE7 .... chissà che a qualcuno non venga qualche idea ...

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

guardando la pagina con ff e poi con ie7 si vede la differenza. Il box giallo è l'analogo del div che contiene il menu di evo (z-index:10000), inserito in un div contenitore (imPage) con position relative e z-index 9000, quello verde si comporta come il box con il mega menu (z-index:9001).

Il valore di z-index del menu di evo, a quanto ho capito, viene interpretato da ie7 solo rispetto agli elementi che fanno parte dello stesso contenitore, quindi agli elementi contenuti in imPage.

E per dargli una priorità rispetto al mega menu si dovrebbe aumentare il valore di z-index di imPage ... ma così il mega menu diventa non cliccabile ... e torniamo al punto di partenza.

Se invece il mega menu fosse inserito anch'esso in imPage ... allora i valori di z-index sarebbero rispettati. E se posizionarlo diversamente da programma risulta poco agevole, si può pure provare la strada dello spostamento del codice con js, come suggerito da lemon.

[marcoboni]

Eh sì, purtroppo ieri non ho verificato il menu a comparsa (se ti riferisci a quello).
Non ho la 9 per fare delle prove "sul campo", ma sono sicuro che stesil riuscirà anche questa volta a darti una mano 
Forse è più "semplice" inserire il mega menu nell'header con un po' di JS?

Se nelle tue statistiche del sito vedi che le visite con IE7 sono "relativamente poche" puoi reindirizzare i visitatori ad una pagina dove consigli di aggiornarsi.

Mi spiace non poter fare di più.

.....in effetti avevo già controllato le statistiche del sito per capire in quanti utilizzano IE7 ma se non sbaglio google da solo il tipo di browser e non la vesione usata...... da un sito che mi ha girato @Milux sembra che tra i vari IE in sevizio il 2.5% siano la vesione 7.
Ad un nostro cliente ho già consigliato di installare l'aggiornamento alla 8 o un'altro browser ........però onestamente mi scoccia un poò forzare l'utente a cabiare il browser.
e... come sempre tnkx

[marcoboni]

Non ho soluzioni da dare ... e non ne vedo altre rispetto a quelle prospettate da lemon.

Scrivo comunque quello che ho trovato, cioè la causa del comportamento anomalo dei menu in IE7 .... chissà che a qualcuno non venga qualche idea ...

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

guardando la pagina con ff e poi con ie7 si vede la differenza. Il box giallo è l'analogo del div che contiene il menu di evo (z-index:10000), inserito in un div contenitore (imPage) con position relative e z-index 9000, quello verde si comporta come il box con il mega menu (z-index:9001).

Il valore di z-index del menu di evo, a quanto ho capito, viene interpretato da ie7 solo rispetto agli elementi che fanno parte dello stesso contenitore, quindi agli elementi contenuti in imPage.

E per dargli una priorità rispetto al mega menu si dovrebbe aumentare il valore di z-index di imPage ... ma così il mega menu diventa non cliccabile ... e torniamo al punto di partenza.

Se invece il mega menu fosse inserito anch'esso in imPage ... allora i valori di z-index sarebbero rispettati. E se posizionarlo diversamente da programma risulta poco agevole, si può pure provare la strada dello spostamento del codice con js, come suggerito da lemon.

..... più o meno penso di aver capito quello che mi avete detto, adesso sono incasinato con altri 2 siti uno da finire l'altro parte da zero ...appena ho un pò di tregua farò delle prove.
Grazie!

[lemonsong]

.....in effetti avevo già controllato le statistiche del sito per capire in quanti utilizzano IE7 ma se non sbaglio google da solo il tipo di browser e non la vesione usata......

Se ti riferisci a Google Analytics hai pure le versioni:

[ Guests cannot view attachments ]

[stesil]

Forse adesso ci siamo

http://stesil.altervista.org/evo9/megamenu/

Ho inserito il mega menu in header con codice html in modifica del modello.

In head queste due righe di jquery, per correggere il valore di overflow del div che crea automaticamente evo9 ed aggiungere il giusto valore di z-index:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Togli lo script js per centrare il menu ... non serve più.

Ciao

Edit: riattivato link

[marcoboni]

.....in effetti avevo già controllato le statistiche del sito per capire in quanti utilizzano IE7 ma se non sbaglio google da solo il tipo di browser e non la vesione usata......

Se ti riferisci a Google Analytics hai pure le versioni:

(Attachment Link)

....infatti tanto per cambiare hai ragione   ho controllato e direi che vale la pena di mettere mano al codice adesso provo la soluzione di @stesil

[marcoboni]

Forse adesso ci siamo

http://stesil.altervista.org/evo9/megamenu/


Ho inserito il mega menu in header con codice html in modifica del modello.

In head queste due righe di jquery, per correggere il valore di overflow del div che crea automaticamente evo9 ed aggiungere il giusto valore di z-index:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Togli lo script js per centrare il menu ... non serve più.

Ciao

GRAZIE!  ho provato con IE tester...... e sembra tutto ok.  penso propio che ho finito di romperti l'anima...... 

[stesil]

Prego!
... e non ti preoccupare ... nessuna rottura!

[marcoboni]

Prego!
... e non ti preoccupare ... nessuna rottura!

eehhh dai che un pò ho rotto .... spero che tutto questo lavoro torni utile al forum

[Topografo]

Hummm, ho provato ad implementarlo, anche copiando spudoratamente il codice di Marcoboni e di Stesil ma mi viene un patatracchio...
Intuisco che c'entri qualcosa il file 

csshover3.htc

Ma solo con IE6... devo includerlo?

e credo che anche che il menu.css vada modificato... o sbaglio? Ma come?

Partiamo da:

      <!--[if IE 6]>
       <style>
       body {behavior: url("files/csshover3.htc");}
       #menu li .drop {background:url("files/drop.gif") no-repeat right 8px; 
       </style>
       <![endif]-->
       <script type="">
       $(document).ready(function(){
       $('ul#menu').parent('div').css({
       'overflow':'visible',
       'z-index':'9001'
       });
       });
       </script>

Quì abbiamo un file drop.gif e csshover3.htc ... devo includerli? Da un Widget? In Home Page?

Poi passiamo al codice della pagina...
Parto da 
[/size]

[/pre]

<div style=" z-index:1000; position: absolute; top: 200px;  width:100%; height: 100%;">
<ul id="menu">
                   
                <li><a href="#" class="drop">UTV FUORISTRADA</a><!-- Begin 4 columns Item -->
                   
                       <div class="dropdown_4columns"><!-- Begin 4 columns container -->
                       
                           <div class="col_4">

                              
                              <img alt="" src="img/logo_polaris.gif" /></div>
                           
                           <div class="col_1">
                           
                               <h3>SPORTSMAN</h3>
                               <ul>
                                   <li><img alt="" src="img/sportsman.gif" /><a href="#"></a></li>
                                   
                               </ul>   
                                
                           </div>
                   
                           <div class="col_1">
                           
                               <h3>RANGER</h3>

                              <ul>
                                   <li><img alt="" src="img/sportsman.gif" /><a href="#"></a></li>
                                   
                               </ul> 
                                
                           </div>
                   
                           <div class="col_1">
                           
                               <h3>RANGER RZR</h3>
                               <ul>
                                   <li><img alt="" src="img/sportsman.gif" /><a href="#"></a></li>
                                   
                               </ul>

                                
                           </div>
                   
                           <div class="col_1">
                           
                               <h3>MEZZI SPECIALI</h3>
                              <ul>
                                   <li><img alt="" src="img/sportsman.gif" /><a href="#"></a></li>
                                   
                               </ul>
                                
                           </div>
                           
                       </div><!-- End 4 columns container -->

                   
                   </li><!-- End 4 columns Item -->
               
                  
               
               </ul>
</div>

Che era stato postato da Silver il: 02 Marzo, 2012, 15:41:07
... e quì cominciano i guai... so che dovrei modificare i parametri di

<div style=" z-index:1000; position: absolute; top: 200px;  width:100%; height: 100%;">

Ma già così mi parte in verticale la barra...

:? 
Qualche idea? (io continuo a smanettare)