JavaScript CSS Custom Drop Down Menu System Tutorial Validated HTML5

Tutorial for creating custom JavaScript and CSS drop down menu systems for your website. Exploring Javascript functionality to render special behaviors in our drop down list menus. Pure CSS menus are king but JavaScript in the mix is fun too, why not play!

[chalupagrande]

These are literally the best tutorials I have found on the internet. Thanks man!

[ASNinja]

Great video Adam!! You need to do a live stream!

[denno]

in a very technical way, Adam has already shown how you create smartphone apps :). As all smartphones allow HTML5, you can create your app that way, which is by far the easiest way and allows all devices to use it. However I'm sure you're talking about native app development, but just thought I'd make you aware of the HTML5 option, if you didn't already know :).

[Contreras]

Dear Adam, your videos are the best :D. When are you gonna do a video series of iphone/smartphone development? Im looking forward to it, I have learned a lot with your tutorials. Best regards from Chile.

[lightandsounder]

I love you so much! I would also be very interested in web design for mobile, but am figuring it out, sortof.

[TeamVinisha]

dear sir this video is very helpful for me thanks adam sir..

thank u very much

[wuyanchu]

excellent tutorial..

thx and god bless you and the world... ^___^

[communityband]

I wouldn't go so far as to say HTML and JS are the easiest way to make smartphone apps. They're great for some things, but for most applications (as opposed to web pages), I find it far easier to work with a cross platform solution like Flash, Unity or NME.

[flangofas]

Hey Adam why you do not use html5 tags?
for example, and you rather using div id="header" instead of header?

[GendusaBrain]

Nice tutorial....
where is that file js/fadeEffects.js?

[bobbykalia]

ADAM!! Whilst following your tutorial I have noticed that on zooming in and out in my browser the drop-down shifts position. I have set the page at 1000 px center. What do I do, I don't want to use any other plugins like jquery and want to remain true to custom scripting. I have noticed that your sites align left so are not affected by zooming. Thanks

[onemrDj]

Question... your navbar that you have in container 1, 2 and 3, are they/navbar on every page? I'm looking for at solution to have (one) the navbar as a script imbeded on every page so that I only have to make one change when changing the menu! I interpreted it that you have the navbar with all the three containers on every page? Or have I misunderstood it? If not, why don't you have your navbar only on one place? For example if you have hundreds of pages then it's a lot of work to update every page when changing the menu. Hope to get your answer. Thanks for all your good work and effort! Edit: even if you hade the "dropMenu" as a javfunction you still have the name on every page in html. Can you get around that?

[alrodriguez]

I'm on your site. And I can't find this tutorial or any of the code. Do you have a link? Because when I run a Search its says it doesn't exist. Thanks

[ollyking]

Modify the function which calls fadeOut, use $("#" + x) instead of just x, as you need to form a jQuery object by selecting x:

== 'block'){
$("#" + x).fadeOut("slow");
} else {
$("#" + x).fadeIn("slow");
}

And change the script source file too, works for me.

[James-ylkk]

Hi Adam, I have got this working in FireFox, IE10 and Safari, but it doesn't work properly in Chrome. In Chrome the drop down menu works initially, but the second second it's kind of invisible and the links won't respond. It's almost like it's behind the div, any ideas?

[James-ylkk]

I don't get it, tried what you said but doesn't work in Chrome. Works in IE, FF and Safari. In Chrome the menu works the first time but then it appears to be behind the the page contents, half visible.

[waynefilkins]

This is not working for me, I copied the code and made a fresh page with it and it still doesn't work.  I really need to get this working.

[practicerepeat]

dont learn jquery until you learn javascript

[malthepetersen]

Hi Adam.
I can't get the code to work.
I have tried to make a test, so that I just copy/paste all the code from your website. The css and all that works fine, but I can't get the menu to dropdown.
I have tried to test the fadeEffects.js too, and it should work properly. I have tried both Firefox and Chrome, none of them works.

I hope you can help me!
Btw. Nice videos you are making, I like watching them!

Regards Malthe.

[ollyking]

I did try it in chrome I was integrating this with some of my own code so was kind of different. Main thing I noticed was with the 'absolute' position css this was totally different under chrome needed to totally rework it, underlying logic is fine though.