JavaScript CSS Custom Drop Down Menu System Tutorial Validated HTML5

[@chalupagrande]

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

[@denno021]

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

[@AS3Ninja]

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

[@csmozg]

500 video! congrats!!

[@Contreras04]

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.

[@GendusaBrain]

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

[@kennedy712]

Another great vid Adam! Thanks!!

[@communityband1]

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?

[@lightandsounder]

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

[@ollyking7692]

Modify the function which calls fadeOut, use $("#" + x) instead of just x, as you need to form a jQuery object by selecting x: if(document.getElementById(x).style.display == 'block'){ $("#" + x).fadeOut("slow"); } else { $("#" + x).fadeIn("slow"); } And change the script source file too, works for me.

[@TeamVinisha]

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

[@ollyking7692]

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.

[@AnujKaithwas]

that is really sick dude.

[@bobbykalia1100]

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

[@one4mrDj]

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?

[@AUTODUDE666]

+one4mrDj try..... make a new file with your dropmenu. then use this code where you want the drop menu to appear.... do not forget to put this on a PHP-enabled server. It will not work with just HTML

[@gazzathehatter]

Hi there.. im trying to design a webpage..for my tshirt printing business.. where people can make there own.. where they can click on colours and a t-shirt will change colour and if they want text on it.. etc etc and all sizes as well.. could u do a video or videos on this for me as im stuck.. much appreciation

[@practicerepeat5927]

dont learn jquery until you learn javascript

[@alrodriguez2261]

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

[@oscarwilches6107]

Here is all the code 1. HTML Document Our Company Services Pool Cleaning Yard Pest Location Queens Brooklyn Bronx Staff George Allen Frank Contact Us Welcome Welcome to my company website 2. CSS body { margin: 0px; } div#myheader { height: 100px; background: #D2E9FF; border-bottom: #09F 1px solid; } div#logo { height: 75px; border: #09F 1px dashed; font-size: 44px; padding: 0px 12px; } div#headermenusystem { margin-left: 16px; } div#headermenusystem > div { float: left; margin: 0px 20px; } div.dropmenus { display: none; position: absolute; top: 100px; width: 120px; background: #D2E9FF; z-index: 2; padding: 4px; border: #0385CB 3px solid; border-top: none; -moz-border-radius: 0px 0px 8px 8px; border-radius: opx opx 8px 8px; } div.dropmenus > a { display: block; margin: 4px; padding: 7px; font-size: 14px; text-decoration: none; background: #E8E8E8; border: #666 1px solid; -moz-border-radius: 3px; border-radius: 3px; color: #000; } div.dropmenus > a:hover { background: #FFF; border: #06F 1px solid; color: #000; } div#restofpage { padding: 36px; } 3. JavaScript fadeEffects.js file // This code is for the external file named fadeEffects.js // Script and lesson by Adam Khoury @ www.developphp.com var fade_in_from = 0; var fade_out_from = 10; function fadeIn(element){ var target = document.getElementById(element); target.style.display = "block"; var newSetting = fade_in_from / 10; target.style.opacity = newSetting; // opacity ranges from 0 to 1 fade_in_from++; if(fade_in_from == 10){ target.style.opacity = 1; clearTimeout(loopTimer); fade_in_from = 0; return false; } var loopTimer = setTimeout('fadeIn(\''+element+'\')',50); } function fadeOut(element){ var target = document.getElementById(element); var newSetting = fade_out_from / 10; target.style.opacity = newSetting; fade_out_from--; if(fade_out_from == 0){ target.style.opacity = 0; target.style.display = "none"; clearTimeout(loopTimer); fade_out_from = 10; return false; } var loopTimer = setTimeout('fadeOut(\''+element+'\')',50); } 4. JavaScript menu.js file var ma = ["dropmenu1","dropmenu2","dropmenu3"]; function dropMenu(x) { for (var m in ma) { if(ma[m] != x) { document.getElementById(ma[m]).style.display = "none"; } } if (document.getElementById(x).style.display == 'block') { fadeOut(x); } else { fadeIn(x); } }

[@leelafish]

very well-explained... thank you.

[@James-pyon]

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?

[@waynefilkins8394]

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.

[@James-pyon]

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.

[@wuyanchu]

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

[@malthepetersen9587]

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.

[@NZ006]

how about the borders on the menu?

[@practicerepeat5927]

css dropdown or popup menu are as good as the javascript dropdown menu

[@MrSerberker]

Not really, because you cant click somewhere to make it go away, but for the rest its the same :D

[@MrSerberker]

Accually you can choose between popup openable but nothing in there is clackable or popup openable but not close able on the outside. xD

[@flangofas]

thanks for your help!

[@James-pyon]

got it to work with fadeEffects.js, but couldn't get it to work with jQuery

[@iGrendizer]

Thank you Adam شكرا جزيلا :D

[@sithidethbouasavanh5558]

could anybody give the link to the source code for this video, please?

[@oscarwilches6107]

Here is all the code 1. HTML Document Our Company Services Pool Cleaning Yard Pest Location Queens Brooklyn Bronx Staff George Allen Frank Contact Us Welcome Welcome to my company website 2. CSS body { margin: 0px; } div#myheader { height: 100px; background: #D2E9FF; border-bottom: #09F 1px solid; } div#logo { height: 75px; border: #09F 1px dashed; font-size: 44px; padding: 0px 12px; } div#headermenusystem { margin-left: 16px; } div#headermenusystem > div { float: left; margin: 0px 20px; } div.dropmenus { display: none; position: absolute; top: 100px; width: 120px; background: #D2E9FF; z-index: 2; padding: 4px; border: #0385CB 3px solid; border-top: none; -moz-border-radius: 0px 0px 8px 8px; border-radius: opx opx 8px 8px; } div.dropmenus > a { display: block; margin: 4px; padding: 7px; font-size: 14px; text-decoration: none; background: #E8E8E8; border: #666 1px solid; -moz-border-radius: 3px; border-radius: 3px; color: #000; } div.dropmenus > a:hover { background: #FFF; border: #06F 1px solid; color: #000; } div#restofpage { padding: 36px; } 3. JavaScript fadeEffects.js file // This code is for the external file named fadeEffects.js // Script and lesson by Adam Khoury @ www.developphp.com var fade_in_from = 0; var fade_out_from = 10; function fadeIn(element){ var target = document.getElementById(element); target.style.display = "block"; var newSetting = fade_in_from / 10; target.style.opacity = newSetting; // opacity ranges from 0 to 1 fade_in_from++; if(fade_in_from == 10){ target.style.opacity = 1; clearTimeout(loopTimer); fade_in_from = 0; return false; } var loopTimer = setTimeout('fadeIn(\''+element+'\')',50); } function fadeOut(element){ var target = document.getElementById(element); var newSetting = fade_out_from / 10; target.style.opacity = newSetting; fade_out_from--; if(fade_out_from == 0){ target.style.opacity = 0; target.style.display = "none"; clearTimeout(loopTimer); fade_out_from = 10; return false; } var loopTimer = setTimeout('fadeOut(\''+element+'\')',50); } 4. JavaScript menu.js file var ma = ["dropmenu1","dropmenu2","dropmenu3"]; function dropMenu(x) { for (var m in ma) { if(ma[m] != x) { document.getElementById(ma[m]).style.display = "none"; } } if (document.getElementById(x).style.display == 'block') { fadeOut(x); } else { fadeIn(x); } }

[@lloydhilton9419]

who do I get drop down code

[@oscarwilches6107]

Here is all the code 1. HTML Document Our Company Services Pool Cleaning Yard Pest Location Queens Brooklyn Bronx Staff George Allen Frank Contact Us Welcome Welcome to my company website 2. CSS body { margin: 0px; } div#myheader { height: 100px; background: #D2E9FF; border-bottom: #09F 1px solid; } div#logo { height: 75px; border: #09F 1px dashed; font-size: 44px; padding: 0px 12px; } div#headermenusystem { margin-left: 16px; } div#headermenusystem > div { float: left; margin: 0px 20px; } div.dropmenus { display: none; position: absolute; top: 100px; width: 120px; background: #D2E9FF; z-index: 2; padding: 4px; border: #0385CB 3px solid; border-top: none; -moz-border-radius: 0px 0px 8px 8px; border-radius: opx opx 8px 8px; } div.dropmenus > a { display: block; margin: 4px; padding: 7px; font-size: 14px; text-decoration: none; background: #E8E8E8; border: #666 1px solid; -moz-border-radius: 3px; border-radius: 3px; color: #000; } div.dropmenus > a:hover { background: #FFF; border: #06F 1px solid; color: #000; } div#restofpage { padding: 36px; } 3. JavaScript fadeEffects.js file // This code is for the external file named fadeEffects.js // Script and lesson by Adam Khoury @ www.developphp.com var fade_in_from = 0; var fade_out_from = 10; function fadeIn(element){ var target = document.getElementById(element); target.style.display = "block"; var newSetting = fade_in_from / 10; target.style.opacity = newSetting; // opacity ranges from 0 to 1 fade_in_from++; if(fade_in_from == 10){ target.style.opacity = 1; clearTimeout(loopTimer); fade_in_from = 0; return false; } var loopTimer = setTimeout('fadeIn(\''+element+'\')',50); } function fadeOut(element){ var target = document.getElementById(element); var newSetting = fade_out_from / 10; target.style.opacity = newSetting; fade_out_from--; if(fade_out_from == 0){ target.style.opacity = 0; target.style.display = "none"; clearTimeout(loopTimer); fade_out_from = 10; return false; } var loopTimer = setTimeout('fadeOut(\''+element+'\')',50); } 4. JavaScript menu.js file var ma = ["dropmenu1","dropmenu2","dropmenu3"]; function dropMenu(x) { for (var m in ma) { if(ma[m] != x) { document.getElementById(ma[m]).style.display = "none"; } } if (document.getElementById(x).style.display == 'block') { fadeOut(x); } else { fadeIn(x); } }

[@brotonelalex1278]

Hi Adam, can you teach us also how to get hot chicks? =)

[@fotohunt]

so.., did you get a hot chicks? : )