Questo tutorial spiega come creare un menu fisso orizzontale che scrolla durante il movimento della pagina. Per prima cosa scarichiamo la libreria jQuery, o per fare prima inserire dentro il tag HEAD il seguente link:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> grazie a Google potrete caricare sul vostro sito la libreria jQuery direttamente dal link, inserendo il codice nell'HEAD della vostra pagina html.  

Sempre all'interno del tag HEAD inserisci questo codice:

Il JAVASCIPT

<script type="text/javascript">

var _rys = jQuery.noConflict();
_rys("document").ready(function(){
    _rys(window).scroll(function () {
        if (_rys(this).scrollTop() > 136) {
            _rys('.nav-container').addClass("block-nav");
        } else {
            _rys('.nav-container').removeClass("block-nav");
        }
    });
});</script>
 
Nel body della vostra pagina web inseirete il menu che vorrete far scrollare ad es.
 
 
 

 

Il codice HTML
 

<div class="nav-container">
 
<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">chi sono</a></li>
<li><a href="">Portfolio</a></li>
 <li><a href="">Contact</a></li>
</ul>
 </div>
</div>

Collegate un css sempre all'interno del tag HEAD che richiami le classi nav, container e f-nav es.
 

Il CSS

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
.f-nav{ z-index: 9999; position: fixed; top: 0; width: 100%;} /* this make our menu float top */  (importante)
.nav { height: 42px;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; }
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}
 
Se hai seguito tutti i passaggi dovresti ottenere una menu che scrolla insieme alla pagina! Se hai difficoltà contattami!
 
Alt

Luca Sanna

grafico creativo, web designer, web developer.


Blog tag: Css, Javascript, Web design