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

33 thoughts on “Toggle Function Click Drop Down Menus CSS3 JavaScript Tutorial

  • September 11, 2019 at 04:36
    Permalink

    2019 here
    console shows:

    Uncaught TypeError: Cannot read property 'style' of null

    at toggleNavPanel (main.js:3)

    at HTMLButtonElement.onclick (index.html:60)

  • September 11, 2019 at 04:36
    Permalink

    hi Adam
    how its possible to replace <div id="sections_panel"> into <div class="sections_panel"> doesn't work? i want to replace the id's into a classes,
    Thank you so much for the answer.

  • September 11, 2019 at 04:36
    Permalink

    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>";
    }
    ?>

  • September 11, 2019 at 04:36
    Permalink

    good work, but can you do this design from simple scratch on video. I like to follow step by step like bob ross

  • September 11, 2019 at 04:36
    Permalink

    hey adam ,, can you tell me why js codes display old code effect which have to be changed instantly. it display changes after some time why not instantly. thanks .

  • September 11, 2019 at 04:36
    Permalink

    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;
    }

  • September 11, 2019 at 04:36
    Permalink

    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

  • September 11, 2019 at 04:36
    Permalink

    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

  • September 11, 2019 at 04:36
    Permalink

    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..

  • September 11, 2019 at 04:36
    Permalink

    Anybody knows why the menu automatically opens when i open the site on mobile devices? cant figure it out..

Leave a Reply