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!

Original source


21 responses to “JavaScript CSS Custom Drop Down Menu System Tutorial Validated HTML5”

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

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

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

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

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

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

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

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

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

Leave a Reply