Tips

Tips for Creating a Nice Drop Down Menu Effect

May 28, 2010 • By

Within web design there are a multitude of solutions and techniques that cover the same problem. No solution is entirely correct, and none are entirely wrong. That is the beauty, and sometimes the agony, of web design.

Sometimes you just want the most basic and simplest technique to solve a popular problem, and that is what today’s Design Reviver Answers question covers: How do you create a nice drop down menu effect?

You can leave a comment below or you can leave your solution on the original posted question on Answers.

How do you create a nice drop down menu effect?

How do i create a nice drop down menu effect?
This question was originally asked by Elisabett Monroy, and you will find the favorite (as voted by Answers users) solution below:

Answer from Rubacode:

How do you create a nice drop down menu effect?

…and here is the code for the menu:

Now the CSS for Styling:

ul.topnav {
    list-style: None;
    padding: 0 20px;
    margin: 0;
    float: Left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: Url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
    float: Left;
    margin: 0;
    padding: 0 15px 0 0;
    position: Relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
    padding: 10px 5px;
    color: #fff;
    display: Block;
    text-decoration: None;
    float: Left;
}
ul.topnav li a:hover{
    background: Url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: Left;
    background: Url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: Center bottom; cursor: Pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    list-style: None;
    position: Absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: None;
    float: Left;
    width: 170px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: Both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: Left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

And a little bit of jQuery:

$(document).ready(function(){

    $("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $("ul.topnav li span").click(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

This solution is pretty straight forward and very easy to implement, do you have a better solution? We would love to hear about it.

You can leave your solution below in the comment section, or you can leave an answer/solution here: How do I create a nice drop down menu effect? on Answers.

Unanswered Answers

Can you help with this weeks unanswered questions?

  1. Is it possible to Change the Google Maps API Key Dynamically Using JavaScript?
  2. Need to get the XML content of a node as a string?
  3. What Do I Need to Parse Content With Regular Expressions Using jQuery?
  4. How Can I Convert HTML Entities to Unicode Character In JavaScript?
  5. What's a Good Way to Refresh/Load a Web Page for Every 10 Seconds to View Updated Information?
  6. Does Anyone Know of Any Browsers that May Have Problems Caching XMLHTTPRequest Responses?
  7. How Can I Get a Div to Automatically Adjust to the Size of the Background I Set for it Without Setting a Specific Height for it?
  8. What's a Good Way to Test Connectivity in PHP?
  9. How Can I Keep a Centered Background Image from Breaking the Layout If the Browser Window is Resized?
  10. What File Permissions Should Be Set for Uploaded Files?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

(Visited 77 times, 1 visits today)