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!

source

36 thoughts on “JavaScript CSS Custom Drop Down Menu System Tutorial Validated HTML5”

  1. I do as my best
    Is this right

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8">
    <head>
    <title>Abdibogoreh</title>
    <style type="text/css">
    body{
    margin: 0px;
    }

    div#myheader{
    height: 100px;
    background:#D2E9FF;
    border-bottom:#09F 1px solid;
    }

    div#logo{
    height: 75px;
    border:#09F 1px solid;
    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:0px 0px 8px 8px;
    }

    div#dropmenus > a {
    background:#FFF;
    border:#06F 1px solid;
    color:#06F;
    }
    </style>
    <script type="text/javascript" src="effects.js"></script>
    <script type="text/javascript">
    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);
    }
    }
    </script>
    </head>
    <body>
    <div id="myheader">
    <div id="logo">Our company</div>
    <div id="headermenusystem">
    <div id="cont1">
    <a href="#" onclick="return false;" onmousedown="dropMenu('dropmenu1')">Services</a>
    <div id="dropmenu1" class="dropmenus">
    <a href"services.php?x=pool">Pool Cleaning</a>
    <a href"services.php?x=yard">Yard Work</a>
    <a href"services.php?x=pest">Pest Removal</a>
    </div>
    </div>
    <div id="cont2">
    <a href="#" onclick="return false;" onmousedown="dropMenu('dropmenu2')">Location</a>
    <div id="dropmenu2" class="menus">
    <a href"location.php?x=pool">Queens</a>
    <a href"location.php?x=yard">Brroklyn</a>
    <a href"location.php?x=pest">Bronx</a>
    </div>
    </div>
    </div>
    <div id="cont3">
    <a href="#" onclick="return false;" onmousedown="dropMenu('dropmenu3')">staff</a>
    <div id="dropmenu3" class="menus">
    <a href"staff.php?x=pool">Pool Cleaning</a>
    <a href"staff.php?x=yard">Yard Work</a>
    <a href"staff.php?x=pest">Pest Removal</a>
    </div>
    </div>
    <div>
    <a href="contact.php">Contact Us</a>
    </div>
    </div>
    <!–end menu system –>
    </div>
    </body>
    </html>

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *