D4mations.com

Toggle Function Click Drop Down Menus CSS3 JavaScript Tutorial



Lesson Code: http://www.developphp.com/video/JavaScript/Toggle-Function-Click-Drop-Down-Menus-Tutorial
By popular request, learn to program click based toggle menu functionality in JavaScript that will trigger CSS3 transition effects that you specify in your CSS. I believe as touch screens become more popular this type of functionality will become the norm for drop down menus, as opposed to traditional mouseover and mouseout hover driven menus.

Original source

d4mer

, , , , , , , , , , , , , , ,

33 responses to “Toggle Function Click Drop Down Menus CSS3 JavaScript Tutorial”

  10. I have used this on a couple of my websites and it works GREAT! However, I have found when wrapping the button in php tags it kills the JavaScript inside of it. I'll show you what I have so you can help me correct it…

    <?php if(isset($_SESSION['id'])) {
    echo "<button class='messagesbtn' onclick='document.getElementById('messages-menu').style.display='block''>&#9993;</button>
    <div id='messages-menu'>
    <h4><b>Notifications</b></h4><hr>
    <h4>All Caught Up!</h4>
    <hr><h4><b>Messages</b></h4><hr>
    <h4>None To Show</h4>
    </div>";
    }
    ?>

  16. Thank's Adam! But my javaScript doesn't work in this code.. Could you tell me what is my mistake?
    <!doctype html>
    <head>

    <!–Meta
    =============================================== –>

    <meta charset="utf-8">

    <!– title
    ================================================ –>
    <title>title</title>

    <!– SCC and JavaScript Links
    ================================================= –>

    <link href ="topbar.css" rel ="stylesheet"
    style="text/css"/>

    <script type= text/javascript>
    function toggleNavPanel(x){
    var panel = document.getElementById(x), navarrow = document.GetElementById("navarrow"), max="300px";
    if(panel.style.height == maxH){
    panel.style.height = "0px";
    navarrow.innerHTML = "&#9662;";
    }else{
    pane.style.height = maxH;
    navarrow.innerHTML = "&#9652;";
    }
    }
    </script>

    </head>

    <body>

    <!–Drop down BUtton and nav bar
    ==============================================================–>
    <div id="topbar" style= "width: 100%; height:60px;">
    <div id="logo">logo</div>
    <div id="sections_btn_holder">
    <button onclick "togglrNavPanel('sections_panel')"> Navigator<span id="navarrow">&#9662;</span></button>
    </div>
    <div id="sections_panel">

    <div>
    You could try to add content of your form here
    </div>
    </div>
    </div>

    </body>

    </html>
    and here is my external CSS:

    body,html{
    margin:0px;
    background:#999;
    }

    /drop down topbar/
    div#topbar {
    background:-webkit-linear-gradient(#666, #000);
    background:linear-gradient(#666, #000);
    hieght: 60px;

    }
    div#topbar > #logo{
    float:left;
    width:140px;
    height:35px;
    margin:8px 0px 0px 30px;
    font-size:36px;
    color:#999;

    }
    div#topbar > #sections_btn_holder{

    float:left;
    width:144px;
    height:46px;
    padding-top:16px;

    }

    div#topbar > #sections_panel{
    position:absolute;
    height:0px;
    width:550px;
    background:#000;
    top:60px;
    left:160px;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    z-index: 10000;
    transition: height 0.3s linear 0s;

    }
    div#topbar > #sections_panel > div{
    background:#333;
    padding:20px;
    height:238px;
    margin:10px;
    color:#FC0;
    }

  18. greetings sir
    ever since i watched one of your tutorials,i fall in love with your works,thanks for your generosity .
    actually i want to implement a toggle to two panels at the same time with the help of this video below is the code

    <img src="icons/menu2.png" onclick="toggleNavPanel('section2_panel','section1_panel')">
    <div id="section1_panel></div>
    <div id="section1_panel></div>
    i used the script here for the video but only one panel toggles down at the click of the icon

  19. one quick question: I'm using anchor tags instead of a button tag and when I put the navarrow it doesnt show up… I just wanna know why it doesnt show in my code

    I love your vids. I'm a 14 year old web designer in training and your vids help me alot 🙂 pls keep it up

  29. i don't suppose anyone here knows of a way to get the buttons to shut when another is clicked.. ?

    assuming there is more than one at the top.

    i have it set up as a nav menu with a drop down secondary nav bar, obviously with this it just overlays the last dropped down menu instead of closing it and opening the new one..

Leave a Reply