KOMPOOS.NL

slide menu

home » javascripts » text-effects » sliding-menu.html

voorbeeld slide menu

uitleg slider menu

Om het menu op jouw pagina te plaatsen moet je de body tag vervangen door de regel die hieronder staat, de html code in de body-sectie plaatsen, de stylesheet in de head-sectie "zetten", en het javascript zo laag als mogelijk in de body-sectie plaatsen. Het tweede menu-item (cross browser) is ge-highlight. Dit wordt geregeld door een id="1" die in de tweede li is geplaatst. Daar waar het id geplaatst wordt (de desbetreffende li) zal het menu item "oplichten".

vervanging voor body-tag


<body onload="slider_effect.init('sliding_menu','slider')">

de html-code voor het sliding menu


<div class="sliding_menu">
        <ul id="sliding_menu">
                <li><a href="/javascripts/text-effects/sliding-menu.html">sliding menu</a></li>
                <li id="1"><a href="/javascripts/text-effects/sliding-menu.html">cross browser</a></li>
                <li><a href="/javascripts/text-effects/sliding-menu.html">ultra snel</a></li>
                <li><a href="/javascripts/text-effects/sliding-menu.html">makkelijk</a></li>
        </ul>
        <div id="slider"></div>
</div>

javascript voor sliding menu


<script>
var slider_effect = function() {
    var snelheid = 16,
    slide_id,
    slide_tag = [],
    slide_element_id,
    slidertje,
    op_hogen = 8,
    el, ew, c, l, w, ld, lr,
    li, wd, wr, wi, p, sliding_link;
    return {
        init: function(is_class_id, is_div_id) {
            slide_id = document.getElementById(is_class_id);
            slide_tag = slide_id.getElementsByTagName('li');
            l = slide_tag.length;
            for (op_hogen = 0; op_hogen < l; op_hogen++) {
                c = slide_tag[op_hogen];
                sliding_link = c.id;
                if (sliding_link == 1) {
                    slidertje = c;
                    w = c.offsetWidth;
                    p = c.offsetLeft;
                }
                c.onmouseover = function() {
                    return function() {
                        slider_effect.muis_uit(this);
                    };
                } (c);
                c.onmouseout = function() {
                    return function() {
                        slider_effect.muis_uit(slidertje);
                    };
                } (c);
            }
            slide_element_id = document.getElementById(is_div_id);
            slide_element_id.style.width = w + 'px';
            slide_element_id.style.left = p + 'px';
        },
        muis_uit: function(d) {
            clearInterval(slide_id.tm);
            el = parseInt(d.offsetLeft, 10);
            ew = parseInt(d.offsetWidth, 10);
            slide_id.tm = setInterval(function() {
                slider_effect.aanwezig(el, ew);
            },
            op_hogen);
        },
        aanwezig: function(el, ew) {
            l = parseInt(slide_element_id.offsetLeft, 10);
            w = parseInt(slide_element_id.offsetWidth, 10);
            if (l != el || w != ew) {
                if (l != el) {
                    ld = (l > el) ? -1: 1;
                    lr = Math.abs(el - l);
                    li = (lr < snelheid) ? ld * lr: ld * snelheid;
                    slide_element_id.style.left = (l + li) + 'px';
                }
                if (w != ew) {
                    wd = (w > ew) ? -1: 1;
                    wr = Math.abs(ew - w);
                    wi = (wr < snelheid) ? wd * wr: wd * snelheid;
                    slide_element_id.style.width = (w + wi) + 'px';
                }
            } else {
                clearInterval(slide_id.tm);
            }
        }
    };
} ();
</script>

stylesheet voor het sliding menu


<style type="text/css">
        .sliding_menu{
                font-family:Helvetica,Geneva,Arial,sans-serif;
                width:660px;
                font-weight:bold;
                background:#004466;
                color:inherit;
                position:relative;
                height:48px;
                padding-left:10px;
                border-top:1px #00bbbb solid}
        .sliding_menu ul{
                border:0;
                margin-left:0px;
                background:transparent;
                color:inherit;
                list-style:none;
                z-index:20;
                position:absolute;
                width:100%}
        .sliding_menu ul{
                z-index:100}
        .sliding_menu li{
                background:transparent;
                float:left}
        .sliding_menu a,.sliding_menu a:focus,.sliding_menu a:active,.sliding_menu a:visited{
                height:48px;
                background:transparent;
                text-decoration:none;
                color:#ccffcc;
                padding-top:10px;
                padding-right:28px;
                padding-left:18px}
        .sliding_menu a:hover{
                background:transparent;
                color:#ffffff}
        #slider{
                position:absolute;
                top:6px;
                height:36px;
                color:inherit;
                background:#0000ff;
                z-index:50;
                margin-left:4px;
                border-right:1px #0066FF outset;
                border-top:1px #0066FF inset}
</style>