Menu che scorre insieme alla pagina

Discussione in 'Javascript' iniziata da Marco_88, 25 Marzo 2015.

  1. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    Ciao a tutti, ho trovato questo script dalle guide di Mr Webmaster che è quello che stavo esattamente cercando:

    Codice:
    <html>
    <head>
    <title>Menu che scorre insieme alla pagina</title>
    
    <script language="javascript">
    <!--
    
    var timer = 0;
    
    
    function MyMenu()
    
    {
    
    document.getElementById('menu').style.pixelTop = document.body.scrollTop;
    timer = setTimeout("MyMenu()", 1);
    }
    
    
    function Stop()
    
    {
    
    clearTimeout(timer);
    }
    
    //-->
    </script>
    
    
    </head>
    
    
    <body onload="MyMenu()" onunload="Stop()">
    
    
    <div id="menu" style="position: Absolute;">
    <b>Menu</b><br>
    <a href="http://www.lukeonweb.net">lukeonweb.net</a><br>
    <a href="http://www.ducatidreams.net">Ducati Dreams Club</a><br>
    <a href="http://www.mrwebmaster.it">MR Webmaster</a><br>
    </div>
    
    
    <p align="center">Scorri la pagina</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    
    
    </body>
    </html>
    

    Non me ne intendo ancora di Javascript , e vorrei modificare lo scroll per far si che anziché partire dal body e cioè dall'inizio della pagina, parta da metà pagina in un contenitore che ho già pronto.
    Avete qualche consiglio su come iniziare?

    Tnx
     
  2. WottaFacca

    WottaFacca Utente Attivo

    Registrato:
    20 Marzo 2015
    Messaggi:
    134
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    Desenzano d/G
    Scusa la mia ignoranza, ma non sono riuscito a capire cosa vuoi fare.

    Tu vuoi un menu che, con lo scroll della pagina, rimanga fissato al centro della pagina oppure che parta dal centro della pagina e se ti muovi si muove anche lui?

    comunque potresti provare in questo modo

    HTML:
    <html>
    <head>
    <title>Menu che scorre insieme alla pagina</title>
    
    <script language="javascript">
    <!--
    
    var timer = 0;
    
    
    function MyMenu()
    
    {
    
    document.getElementById('menu').style.pixelTop = document.body.scrollTop;
    timer = setTimeout("MyMenu()", 1);
    }
    
    
    function Stop()
    
    {
    
    clearTimeout(timer);
    }
    
    //-->
    </script>
    
    
    </head>
    
    
    <body onload="MyMenu()" onunload="Stop()">
    
    
    <div id="menu" style="position: fixed; margin-top: 25%;">
    <b>Menu</b><br>
    <a href="http://www.lukeonweb.net">lukeonweb.net</a><br>
    <a href="http://www.ducatidreams.net">Ducati Dreams Club</a><br>
    <a href="http://www.mrwebmaster.it">MR Webmaster</a><br>
    </div>
    
    
    <p align="center">Scorri la pagina</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    
    
    </body>
    </html>
    se invece vuoi che si muova anche il menu devi cambiare il valore di position da fixed ad absolute
     
  3. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    Ciao, provo a spiegarmi meglio: il menu così concepito scorre su tutta la pagina (body) il problema è che quando sono in cima alla pagina mi trovo il menu che sovrasta l'header e invece vorrei che lo scroll parta solo quando raggiunge il contenitore del menu, che non si trova in cima del body ma a metà body e che quindi scorra giù da li in poi.
    In forma verbale: " Rimani bloccato sul contenitore a metà body div menu e solo una volta raggiunto fai lo scroll in giù, se risalgo, bloccati nuovamente nel div menu".
    Spero di aver reso XD
     
  4. WottaFacca

    WottaFacca Utente Attivo

    Registrato:
    20 Marzo 2015
    Messaggi:
    134
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    Desenzano d/G
    Allora mi spiace ma purtroppo non credo di riuscire ad aiutarti.

    Ho avuto anch'io dei probelmi con un'esercizio in cui dovevo bloccare il menù un punto della pagina, ma rimane fisso per tutto il tempo e quindi non sono riuscito a farlo muovere con lo scroll, quindi ho dovuto "sistemarla" in modo che comunque avrebbe avuto un minimo di senso xD
     
  5. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    Eccolo! L'ho trovato ed è proprio in questa pagina del forum! Mi serve esattamente la funzione del contenitore del banner pubblicitario che è posizionato tra un post e l'altro: E' fisso da un certo punto in poi, appena scendi giù il contenitore segue l'andamento dello scroll! Magari qualcuno dello staff può aiutarmi a replicarlo...attendo fiducioso
     
  6. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    In alternativa ho trovato questo che però originariamente era destinato ai banner pubblicitari e l ho modificato così, ora il menu è posizionato esattamente dove volevo, stranamente però quando scrollo in giù rimane bloccato in quella posizione (non scrolla anche lui)...



    Codice:
    <script type="text/javascript">
    var SB;
    function ScrollBanOK()
    {
    	document.getElementById("menu").style.position = "absolute";
    	document.getElementById("menu").style.top = document.body.scrollTop;
    	document.getElementById("menu").style.marginTop = "1380px";
    	
    
    	SB = window.setTimeout("ScrollBanOK()", 0);
    }
    function ScrollBanNO()
    {
    	window.clearTimeout(SB);
    }
    </script>
    
    <body onload="ScrollBanOK()" onunload="ScrollBanNO()">
    
    
     
  7. WottaFacca

    WottaFacca Utente Attivo

    Registrato:
    20 Marzo 2015
    Messaggi:
    134
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    Desenzano d/G
    Prova cambiando il valore di positione in relative
     
  8. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    @WottaFacca

    No, non va neanche quello...

    Adesso l'ho modificato così, mettendo il window.screen.height:

    Codice:
    <script type="text/javascript">
    var SB;
    function ScrollBanOK()
    {
    	document.getElementById("menu").style.position = "absolute";
    	document.getElementById("menu").style.top = document.div.scrollTop;
    	document.getElementById("menu").style.marginTop = (window.screen.height - 1340) + "px"; 
    	
    
    	SB = window.setTimeout("ScrollBanOK()", 1);
    }
    function ScrollBanNO()
    {
    	window.clearTimeout(SB);
    }
    </script>
    
    Però ancora non parte lo scroll
     
  9. WottaFacca

    WottaFacca Utente Attivo

    Registrato:
    20 Marzo 2015
    Messaggi:
    134
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    Desenzano d/G
    Non saprei, ho provato a modificare qualcosa con l'ultimo script che hai postato ma nada, riesco a far scrollare il menù, ma purtroppo non parte dal centro della pagina come vuoi te.
     
  10. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    A me non scrolla nemmeno. Eppure non dovrebbe essere difficile come operazione, mannaggia.
     
  11. WottaFacca

    WottaFacca Utente Attivo

    Registrato:
    20 Marzo 2015
    Messaggi:
    134
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    Desenzano d/G
    Io posso dirti che se metti
    Codice:
     position: fixed; 
    il menu viene giù con lo scroll della pagina, però è proprio fissato nella posizione in cui lo inserisci, quindi se lo fai partire dal centro della pagina lui rimarrà sempre al centro della pagina
     
  12. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    Niente sto tentando e ritentando ma senza risultati.
     
  13. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Ciao prova anche questo esempio, ho usato jquery
    HTML:
    <html>
        <head>
            <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    var yOffset = $("div#menu").offset().top;
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > yOffset) {
                            $("div#menu").css({
                                'width': $("div#container").width() * 0.3,
                                'top': 0,
                                'left': $("div#menu").offset().left,
                                'position': 'fixed'
                            });
                        } else {
                            $("div#menu").css({
                                'width': "100%",
                                'top': yOffset + 'px',
                                'left': 0,
                                'position': 'static'
                            });
                        }
                    });
                });
            </script>
            <style>
                html body {
                    text-align: center;
                    background-color: #E4E4E4;
                }
    
                div#container {
                    width: 90%;
                    overflow: hidden;
                    margin:auto;
                    background-color: #FFF;
                }
                div#header {
                    height: 120px;
                    background-color: #0d3b85;
                }
                div#menusx {
                    position: static;
                    width:30%;
                    overflow: hidden;
                    float:left;
                }
                div#logo {
                    height:150px;
                }
                div#menu {
                    position: static;
                    height: 250px;
                    background-color: #0d3b85;
                }
                div#content {
                    width:70%;
                    float: right;
                    height:1500px;
                }
                div#footer {
                    height: 120px;
                    background-color: #0d3b85;
                    clear:both;
                }
            </style>
        </head>
        <body>
            <div id="container">
                <div id="header"></div>
                <div id="menusx">
                    <div id="logo"></div>
                    <div id="menu"></div>
                </div>
                <div id="content"></div>
                <div id="footer"></div>
            </div>
        </body>
    </html>
     
  14. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    Si è perfetto, grazie criric! :)
     
  15. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    Adesso ho solo un altro problema, lo scroll in verticale funziona perfettamente, però se con il magic mouse apple faccio lo scroll laterale mi sposta il div menu fuori dal contenitore principale (che nel mio caso si chiama è una class "960").

    Questo è il codice così come è modificato.




    HTML:
    <div class="960">
       <div id="menucategorie">
          <div id="menu">
               <nav>
    
     <script type="text/javascript">
                $(document).ready(function () {
                    var yOffset = $("#menu").offset().top;
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > yOffset) {
                            $("#menu").css({
                                'width': $(".960").width() * 0.3,
                                'top': 0,
                                'left': $("#menu").offset().left,
                                'right': $("#menu").offset().right,
                                'position': 'fixed'
                            });
                        } else {
                            $("#menu").css({
                                'width': "100%",
                                'top': yOffset + 'px',
                                'left': 0,
                                'right': 0,
                                'position': 'static'
                            });
                        }
                    });
                });
            </script>
          
           </nav>
         </div>
       </div>
    </div>
    
    
     
  16. WottaFacca

    WottaFacca Utente Attivo

    Registrato:
    20 Marzo 2015
    Messaggi:
    134
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    Desenzano d/G
    Aggiungi nel css, alle regole del body

    Codice:
    overflow-x: hidden;
    così lo scroll laterale è bloccato e non si può più fare

    Dimmi se ti va bene in questo modo :)
     
  17. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    No, si muove lo stesso. Fino a quando non raggiungo l'elemento #menu, lo scroll laterale è bloccato, appena il #menu si "slega" e diventa "fixed" lo scrolling laterale si attiva.
    Credo che sia il body a muoversi lateralmente e invece il div menu è appunto bloccato nella posizione fissa.
     
  18. WottaFacca

    WottaFacca Utente Attivo

    Registrato:
    20 Marzo 2015
    Messaggi:
    134
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    Desenzano d/G
    Se puoi, scrivi il codice che hai te, oppure metti il link della pagina, solo per vedere come funziona e per capire meglio come bisogna fare
     
  19. Marco_88

    Marco_88 Utente Attivo

    Registrato:
    4 Dicembre 2014
    Messaggi:
    150
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Occupazione:
    Grafica e Sviluppo
    Località:
    Roma
    Home Page:
    No purtroppo non ho il link perché sto lavorando in locale, quindi ti copio e incollo il codice di interesse.

    HTML:
    
    <div id="menucategorie">
       <!---------------------------------------  Nuovo menu di navigazione per categorie  -------------------------------->
       
     <h2 style="padding:0 0 10px 0px; text-align:center; font-size: 30px; margin-top: 30px;"><?php echo $labels["l_categorie"]; ?></h2> 
     
        
    <ul id="icons_bar">
    
      <li class="icons_bar" style="margin:40px 0px 0px 16px;"><img src="http://forum.mrwebmaster.it/images/immobili.gif" width="80px" height="80px"/></li>
      <li class="icons_bar" style="margin:40px 0px 0px 100px"><img src="http://forum.mrwebmaster.it/images/impianti.gif" width="80px" height="80px"/></li>
      <li class="icons_bar" style="margin:60px 0px 0px 80px"><img src="http://forum.mrwebmaster.it/images/auto.gif" width="125px" height="55px"/></li>
      <li class="icons_bar" style="margin:40px 0px 0px 75px"><img src="http://forum.mrwebmaster.it/images/prodottifiniti.gif" width="80px" height="80px"/></li>
      <li class="icons_bar" style="margin:60px 0px 0px 95px"><img src="http://forum.mrwebmaster.it/images/attrezzature.gif" width="105px" height="62px"/></li>
    
    </ul>   
    
       
    
            <script type="text/javascript">
                $(document).ready(function () {
                    var yOffset = $("#menu").offset().top;
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > yOffset) {
                            $("#menu").css({
                                'width': $(".d960").width() * 0.3,
                                'top': 0,
                                'left': $("#menu").offset().left,
                                'right': $("#menu").offset().right,
                                'position': 'fixed',
                                
                            });
                        } else {
                            $("#menu").css({
                                'width': "100%",
                                'top': yOffset + 'px',
                                'left': 0,
                                'right': 0,
                                'position': 'static'
                            });
                        }
                    });
                });
            </script>
    
    
    
    
    <div id="menu" style="z-index:99;">
    
       <div id="nav">
          
            <ul>
    			<li>
    				<a href="#">Immobili</a>
    					<ul class="fallback">
    						   <li><a href="/commerciale">Commerciale</a>
    						   <li><a href="/industriale">Industriale</a>
    						   <li><a href="/residenziale">Residenziale</a>
    						   <li><a href="/terreni">Terreni</a>
                         
         
    				       </ul>
    			</li>
                    
               
                        <li>
    						<a href="#">Impianti</a>
    						<ul class="fallback">
    						   <li><a href="/industria-chimica-e-farmaceutica">Chimica</a>
    						   <li><a href="/dolciario">Dolciario</a>
    						   <li><a href="/industria-alimentare-e-delle-bevande">Alimentare</a>
    						   <li><a href="/lavorazione-della-carta">Cartario</a>
    						 
    
    
    				                </ul>
    		    </li>
    			
    		
    			
                        <li>
    						<a href="#">Automezzi</a>
    						<ul class="fallback">
    						   <li><a href="/autocarri">Autocarri</a>
    						   <li><a href="/autovetture">Autovetture</a>
    						   <li><a href="/lusso">Lusso</a>
    						   <li><a href="/mezzi-opera">Mezzi d'opera</a>
    						   <li><a href="/motoveicoli">Motoveicoli</a>
    						   <li><a href="/autocarri">Autocarri</a>
    						   <li><a href="/rimorchi">Rimorchi</a>
    						   
    							
    						</ul>
    		 </li>
    			
    				
    		 
                         <li>
    						<a href="#">Prodotti Finiti</a>
    						<ul class="fallback">
    						     <li><a href="/prodotti-finiti">Prodotti finiti</a>
    						
    						</ul>
    		 </li>
    					
    			
    					
    			
                       <li>
    						<a href="#">Attrezzature</a>
    						<ul class="fallback">
    						
    						</ul>
    		</li>
                       
                </ul>
    		 
    		 
    		 </nav>	
    	</div>
    </div>  	
    
    


    E questi sono i css

    HTML:
    
    body {
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:14px;
    	margin:auto;
    	padding:0;
    	color:#333;
    	background: url('../images/body_bg.png') center repeat-y;
    
    	
    }
    
    
    .d960 {
    	margin:0 auto;
    	width:960px;
    }
    
    
    
    /***** Div Categorie ******/
    
    
    #menucategorie {
    	width:100%; 
    	border-bottom: solid 2px #003B79; 
    	background: none; 
    	text-align:center; 
    	margin-top:0px; 
    	min-height:400px;
    	max-height:400px;
    	overflown:hidden;
    }
    
    
    /************* Nuovo Menu Nav *************/
    
    
    #nav {background: transparent; width: 950px; padding:0px; margin-left:-20px;margin-top:0px; text-align:center; z-index:999; overflown:hidden;}
    #nav ul {text-align:center;background: #396696;  font-size:18px; width: 100%;}
    #nav ul li {float:left;display:inline;background:#396696; width: 165px; height: 32px; padding: 10px; line-height:15px;}
    #nav ul li:hover {background:#c2c2c2;}
    #nav ul li a {display:block;padding:10px 0px;color:#ffffff;}
    #nav ul li ul {position:absolute;width:160px;background:transparent;}
    #nav ul li ul li {width:165px;margin-left:-50px;}
    #nav ul li ul li a {display:block;padding:10px 10px;color:#ffffff;}
    #nav ul li ul li:hover a {background:transparent;}
    #nav ul li ul.fallback {display:none;  -webkit-transition: block 0.4s; /* For Safari 3.1 to 6.0 */ }
    #nav ul li:hover ul.fallback {display:block;}
    #nav li {display:block;}
    
    
    
     
    Ultima modifica: 26 Marzo 2015
  20. WottaFacca

    WottaFacca Utente Attivo

    Registrato:
    20 Marzo 2015
    Messaggi:
    134
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Località:
    Desenzano d/G
    Ovviamente quello che vedo io non è il massimo, visto che mancano le immagini, però non fa neanche l'effeto di seguire la pagina, quindi mi sa che manca qualcosa

    HTML:
    <html>
    
    <head> <title> esempio </title> 
    
    <style>
    body {
    
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:14px;
    	margin:auto;
    	padding:0;
    	color:#333;
    	background: url('../images/body_bg.png') center repeat-y;
    	
    	
    }
    
    
    .d960 {
    	margin:0 auto;
    	width:960px;
    }
    
    
    
    /***** Div Categorie ******/
    
    
    #menucategorie {
    	width:100%; 
    	border-bottom: solid 2px #003B79; 
    	background: none; 
    	text-align:center; 
    	margin-top:0px; 
    	min-height:400px;
    	max-height:400px;
    	
    }
    
    
    /************* Nuovo Menu Nav *************/
    
    
    #nav {
    
     background: transparent;
     width: 950px;
     padding:0px;
     margin-left:-20px;
     margin-top:0px;
     text-align:center;
     z-index:999;
     overflown:hidden;
     
    }
    
    #nav ul {
    
    text-align:center;
    background: #396696;
    font-size:18px;
    width: 100%;
    
    }
    
    #nav ul li {
     
    float:left;
    display:inline;
    background:#396696;
    width: 165px;
    height: 32px;
    padding: 10px;
    line-height:15px;
    
    }
    #nav ul li:hover {
    
    background:#c2c2c2;
    
    }
    
    #nav ul li a {
    
    display:block;
    padding:10px 0px;
    color:#ffffff;
    
    }
    
    #nav ul li ul {
    
    position:absolute;
    width:160px;
    background:transparent;
    
    }
    
    #nav ul li ul li {
    
    width:165px;
    margin-left:-50px;
    
    }
    
    #nav ul li ul li a {
    
    display:block;
    padding:10px 10px;
    color:#ffffff;
    
    }
    
    #nav ul li ul li:hover a {
    
    background:transparent;
    
    }
    
    #nav ul li ul.fallback {
    
    display:none;
    -webkit-transition: block 0.4s; /* For Safari 3.1 to 6.0 */
    
    }
    
    #nav ul li:hover ul.fallback {
    
    display:block;
    
    }
    
    #nav li {
    
    display:block;
    
    }
    
    
    
    </style>
    
    
    </head>
    <body>
    
    <div id="menucategorie">
       <!---------------------------------------  Nuovo menu di navigazione per categorie  -------------------------------->
       
     <h2 style="padding:0 0 10px 0px; text-align:center; font-size: 30px; margin-top: 30px;"><?php echo $labels["l_categorie"]; ?></h2> 
     
        <ul id="icons_bar">
    
      <li class="icons_bar" style="margin:40px 0px 0px 16px;"><img src="http://forum.mrwebmaster.it/images/immobili.gif" width="80px" height="80px"/></li>
      <li class="icons_bar" style="margin:40px 0px 0px 100px"><img src="http://forum.mrwebmaster.it/images/impianti.gif" width="80px" height="80px"/></li>
      <li class="icons_bar" style="margin:60px 0px 0px 80px"><img src="http://forum.mrwebmaster.it/images/auto.gif" width="125px" height="55px"/></li>
      <li class="icons_bar" style="margin:40px 0px 0px 75px"><img src="http://forum.mrwebmaster.it/images/prodottifiniti.gif" width="80px" height="80px"/></li>
      <li class="icons_bar" style="margin:60px 0px 0px 95px"><img src="http://forum.mrwebmaster.it/images/attrezzature.gif" width="105px" height="62px"/></li>
    
    </ul>
    
       
    
            <script type="text/javascript">
                $(document).ready(function () {
                    var yOffset = $("#menu").offset().top;
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > yOffset) {
                            $("#menu").css({
                                'width': $(".d960").width() * 0.3,
                                'top': 0,
                                'left': $("#menu").offset().left,
                                'right': $("#menu").offset().right,
                                'position': 'fixed',
                                
                            });
                        } else {
                            $("#menu").css({
                                'width': "100%",
                                'top': yOffset + 'px',
                                'left': 0,
                                'right': 0,
                                'position': 'static'
                            });
                        }
                    });
                });
            </script>
    
    
    
    
    <div id="menu" style="z-index:99;">
    
       <div id="nav">
          
            <ul>
    			<li>
    				<a href="#">Immobili</a>
    					<ul class="fallback">
    						   <li><a href="/commerciale">Commerciale</a>
    						   <li><a href="/industriale">Industriale</a>
    						   <li><a href="/residenziale">Residenziale</a>
    						   <li><a href="/terreni">Terreni</a>
                         
         
    				       </ul>
    			</li>
                    
               
                        <li>
    						<a href="#">Impianti</a>
    						<ul class="fallback">
    						   <li><a href="/industria-chimica-e-farmaceutica">Chimica</a>
    						   <li><a href="/dolciario">Dolciario</a>
    						   <li><a href="/industria-alimentare-e-delle-bevande">Alimentare</a>
    						   <li><a href="/lavorazione-della-carta">Cartario</a>
    						 
    
    
    				                </ul>
    		    </li>
    			
    		
    			
                        <li>
    						<a href="#">Automezzi</a>
    						<ul class="fallback">
    						   <li><a href="/autocarri">Autocarri</a>
    						   <li><a href="/autovetture">Autovetture</a>
    						   <li><a href="/lusso">Lusso</a>
    						   <li><a href="/mezzi-opera">Mezzi d'opera</a>
    						   <li><a href="/motoveicoli">Motoveicoli</a>
    						   <li><a href="/autocarri">Autocarri</a>
    						   <li><a href="/rimorchi">Rimorchi</a>
    						   
    							
    						</ul>
    		 </li>
    			
    				
    		 
                         <li>
    						<a href="#">Prodotti Finiti</a>
    						<ul class="fallback">
    						     <li><a href="/prodotti-finiti">Prodotti finiti</a>
    						
    						</ul>
    		 </li>
    					
    			
    					
    			
                       <li>
    						<a href="#">Attrezzature</a>
    						<ul class="fallback">
    						
    						</ul>
    		</li>
                       
                </ul>
    		 
    		 
    		 </nav>	
    	</div>
    </div>  
    
    
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>	
    <br><br><br><br><br><br><br><br><br><br>	
    <br><br><br><br><br><br><br><br><br><br>	
    <br><br><br><br><br><br><br><br><br><br>	
    <br><br><br><br><br><br><br><br><br><br>	
    <br><br><br><br><br><br><br><br><br><br>		
     
    </body>
    </html>
    
    
     
Sto caricando...

Condividi questa Pagina