• Thursday , 14 November 2019

Toggle Function Click Drop Down Menus CSS3 JavaScript Tutorial

Code Canyon



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

3d Ocean

Related Posts

33 Comments

  1. Carlo Jones
    September 11, 2019 at 04:36

    Still doing it in 2019.
    Thank you sir

  2. Smoking Hot
    September 11, 2019 at 04:36

    2019 here
    console shows:

    Uncaught TypeError: Cannot read property 'style' of null

    at toggleNavPanel (main.js:3)

    at HTMLButtonElement.onclick (index.html:60)

  3. Tiberius v2
    September 11, 2019 at 04:36

    How to do animating background?

  4. Christian Ayala
    September 11, 2019 at 04:36

    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.

  5. Nassim Bendjillali
    September 11, 2019 at 04:36

    think you so muth sir

  6. Elkhan Hamet
    September 11, 2019 at 04:36

    amazing

  7. Patrascu Lucian
    September 11, 2019 at 04:36

    z-index is OVER 9000

  8. Jessie Yang
    September 11, 2019 at 04:36

    Great video, What is the editor you are using?

  9. Alfred Kokaku
    September 11, 2019 at 04:36

    Mr, how to no cover the following content when Navigator is on? Thanks.

  10. WebDeveloprz
    September 11, 2019 at 04:36

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

  11. Klaatu
    September 11, 2019 at 04:36

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

  12. Winter Olympics
    September 11, 2019 at 04:36

    The requested file has been moved or deleted.

  13. Xaoo
    September 11, 2019 at 04:36

    What if we have more than one button?

  14. Marilyn Henry
    September 11, 2019 at 04:36

    thank you

  15. hemant singh
    September 11, 2019 at 04:36

    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 .

  16. Kate Catz
    September 11, 2019 at 04:36

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

  17. fun with gunjan
    September 11, 2019 at 04:36

    thanks bro

  18. wonders Johnson
    September 11, 2019 at 04:36

    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. Caleb Daradal
    September 11, 2019 at 04:36

    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

  20. Oscar Luza
    September 11, 2019 at 04:36

    Where you get &#9662 Value? this a reference memory direction?

  21. Green is Beautiful
    September 11, 2019 at 04:36

    Wow Thank you so much man. You're Majestic!

  22. BUSINESS OWNERS GUIDE
    September 11, 2019 at 04:36

    Thank You For The Great Videos…. 🙂

  23. joaquin delgado
    September 11, 2019 at 04:36

    thanks for teaching!!

  24. joaquin delgado
    September 11, 2019 at 04:36

    great,just i'm looking for,but changing bars to "X" icon…how can do that?.i'm trying With sprite images but no works.

  25. dmcoub78
    September 11, 2019 at 04:36

    Thanks for the post really helped with with a home work assignment

  26. GeekEducation
    September 11, 2019 at 04:36

    Wow, this Training premium quality look like oreilly

  27. Armandas Barkauskas
    September 11, 2019 at 04:36

    great tutorial, exacly what I searched for :). TY

  28. Nour Ali Hassan
    September 11, 2019 at 04:36

    adam its not working for me help plz
    i have done the all code some us you right it

  29. Jimmypl007
    September 11, 2019 at 04:36

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

  30. Joshua Wilson
    September 11, 2019 at 04:36

    you rock!

  31. Juan Patiño
    September 11, 2019 at 04:36

    Excellent!!!!!

  32. Ion Comanici
    September 11, 2019 at 04:36

    thank Adam,,, u r d best eva  )))))))))))

  33. ahano
    September 11, 2019 at 04:36

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

Leave A Comment

You must be logged in to post a comment.