Toggle Function Click Drop Down Menus CSS3 JavaScript 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.

[tangolobo]

Thanks Adam for all your tutorials!  I've learned more in the last month watching your videos than I ever could have imagined.  You're really good at explaining this stuff bro.

[marcovianwd]

Adam as per usual you kick ass with your tutorials! Thanks dude!

[Gizmo]

Perfect! Looks good for a login fields the register link underneath,  

[carlojones]

Still doing it in 2019.
Thank you sir

[dmcoub]

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

[wondersjohnson]

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

[naziruadam]

Hey Adam. First of all Happy New Year. I've been recently researching on webRTC and have found it a kinda complicating. Your tutorials are quite simple to comprehend. Please if you can do some tut on webRTC (especially using JQuery) so that at least can give me a good head start.
By the way this tuggle tut is great. Thanks.

[mosialive]

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

[iamjia]

Great video, What is the editor you are using?

[JoeGator]

I copied the code from your site and I am really trying to get it to work. I am new to this, so it is hard to diagnose what is wrong in my version. Is it possible that you could add a working version that we could open from your website with via link?

Thank you, this would be a lifesaver from troubleshooting before i even begin to explore your example.

Very nice tutorial and presented very well by you. Nice work and very helpful for those trying to learn coding, , , :)

[patty]

Also, how do you do the transition function on the logo (an image)? Is it a GIF that you don't play unless the user hovers their mouse over it?

[JosephCampbellSolutions]

Just what I was looking for. I'm want this functionality to only work on mobile size screens.. is there a way to target the function only when the screen size is between a certain value?

[smokinghot]

2019 here
console shows:
Uncaught TypeError: Cannot read property 'style' of null
at toggleNavPanel (main.js:3)
at HTMLButtonElement.onclick (index.html:60)

[chome]

I want the button at the bottom of the page. How do I get it to toggle up instead of down?

[alfredkokaku]

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

[ThreeCoast]

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

[peterm.souzajr.]

how can i do this using a conditional php menu system, -if logged user yes. -if logged user no

[Eng-Shuuke]

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

[ahano]

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

[Jimmypl]

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