Loading:


    Menu wysuwające się z lewej strony witryny

    Menu po kliknięciu płynnie wysuwa się lewej strony witryny.

    [ Zobacz efekt ]


    Przed testowaniem działania usuń wszystkie komentarze.





    Napisz Artyku³

    Listing


    // 1. Wstaw ten kod między znaczniki <head>:

    <style>

    #divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
    #divMenu a{text-decoration:none;}
    #divMenu a:hover{color:red;}
    </style>
    <script language="JavaScript1.2">

    ie=document.all?1:0
    n=document.layers?1:0
    ns6=document.getElementById&&!document.all?1:0

    //These are the variables you have to set:

    //How much of the layer do you wan't to be visible when it's in the out state?
    lshow=60

    //How many pixels should it move every step?
    var move=10;

    //At what speed (in milliseconds, lower value is more speed)
    menuSpeed=40

    //Do you want it to move with the page if the user scroll the page?
    var moveOnScroll=true


    //You should't have to change anything below this.

    //Defining variables

    var ltop;
    var tim=0;

    //Object constructor
    function makeMenu(obj,nest){
        nest=(!nest) ? '':'document.'+nest+'.'
        if (n) this.css=eval(nest+'document.'+obj)
        else if (ns6) this.css=document.getElementById(obj).style
        else if (ie) this.css=eval(obj+'.style')                                           
            this.state=1
            this.go=0
            if (n) this.width=this.css.document.width
            else if (ns6) this.width=document.getElementById(obj).offsetWidth
            else if (ie) this.width=eval(obj+'.offsetWidth')
            this.left=b_getleft
        this.obj = obj + "Object";  eval(this.obj + "=this")       
    }
    //Get's the top position.
    function b_getleft(){
            if (n||ns6){ gleft=parseInt(this.css.left)}
            else if (ie){ gleft=eval(this.css.pixelLeft)}
            return gleft;
    }

    //Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)

    function moveMenu(){
            if(!oMenu.state){
                    clearTimeout(tim)
                    mIn()   
            }else{
                    clearTimeout(tim)
                    mOut()
            }
    }
    //Menu in
    function mIn(){
            if(oMenu.left()>-oMenu.width+lshow){
                    oMenu.go=1
                    oMenu.css.left=oMenu.left()-move
                    tim=setTimeout("mIn()",menuSpeed)
            }else{
                    oMenu.go=0
                    oMenu.state=1
            }       
    }
    //Menu out
    function mOut(){
            if(oMenu.left()<0){
                    oMenu.go=1
                    oMenu.css.left=oMenu.left()+move
                    tim=setTimeout("mOut()",menuSpeed)
            }else{
                    oMenu.go=0
                    oMenu.state=0
            }       
    }

    //Checking if the page is scrolled, if it is move the menu after

    function checkScrolled(){
            if(!oMenu.go) oMenu.css.top=eval(scrolled)+parseInt(ltop)
            if(n||ns6) setTimeout('checkScrolled()',30)
    }

    //Inits the page, makes the menu object, moves it to the right place,
    show it

    function menuInit(){
            oMenu=new makeMenu('divMenu')
            if (n||ns6) scrolled="window.pageYOffset"
            else if (ie) scrolled="document.body.scrollTop"
            oMenu.css.left=-oMenu.width+lshow
            if (n||ns6) ltop=oMenu.css.top
            else if (ie) ltop=oMenu.css.pixelTop
            oMenu.css.visibility='visible'
            if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
    }


    //Initing menu on pageload
    window.onload=menuInit;
    </script>




    // 2. Wstwa ten kod na końcu dokumentu przez tagiem </BODY>:

    <div id="divMenu" style="position:absolute; top:250; left:30; visibility:hidden; background-color:F0F0F0">
    <nobr>
            <a href="http://www.dynamicdrive.com">Dynamic Drive</a> -
            <a href="http://www.codingforums.com">Coding Forums</a> -
            <a href="http://active-x.com/">Active-X.com</a> -
            <a href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a>
    </nobr>
    </div>




    Dodano przez: igor
    Ranga: Administrator serwisu Punktów: 0
    Komentarze użytkowników
      • Tre¶æ komentarza
        Kod do komentarza (opcjonalnie)
        PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
        Autor
        Token
        token

         

         








    funkcje.net
    Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2025 v.1.5 | design: diviXdesign & rainbowcolors