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!
Original source
21 responses to “JavaScript CSS Custom Drop Down Menu System Tutorial Validated HTML5”
dude can u show how to do it with Oracle 9i DB , without oci ?
who do I get drop down code
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
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?
dont learn jquery until you learn javascript
css dropdown or popup menu are as good as the javascript dropdown menu
could anybody give the link to the source code for this video, please?
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.
excellent tutorial..
thx and god bless you and the world… ^___^
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.
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.
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.
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.
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?
got it to work with fadeEffects.js, but couldn't get it to work with jQuery
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
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
Nice tutorial….
where is that file js/fadeEffects.js?
These are literally the best tutorials I have found on the internet. Thanks man!
dear sir this video is very helpful for me thanks adam sir..
thank u very much
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.