Simple drop down menu

I really like this post out on http://css-tricks.com/simple-jquery-dropdowns/

It’s simple to use and easy to format using CSS. Here’s something you might want to use.

1. Download the files

2. Include this in your code

<script src="../Scripts/jquery.dropdownPlain.js" type="text/javascript"></script>

3. Create a menu

            <div id="dropdownmenu">
                <ul class="dropdown">
        	        <li><a href="#" id="link_one"></a>
                        <ul class="sub_menu">
                            <li><a href="SomeWebPage.aspx">Go</a></li>
                        </ul>
                    </li>
        	        <li><a href="http://www.SomeWebPage2.com" target="_self">Another place</a></li>
                    <li><a href="#" id="link_two">Go2</a></li>
        	        <li><a href="#" id="link_three">Go3</a>
                        <ul class="sub_menu">
                            <li><a href="#" id="link_four">Go4</a></li>
                        </ul>
                  </li>
                </ul>
            </div>

4. Add your stylesheet and do whatever formatting you want, in this case, a little rounding on the edges

#dropdownmenu
{
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

/* 
	LEVEL ONE
*/
ul.dropdown                         { list-style: none;margin: 0; padding: 0;position: relative; }
ul.dropdown li                      { font-weight: normal; float: left; zoom: 1; background: #d0d0ff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
ul.dropdown a:hover		            { color: #cc8500; }
ul.dropdown a:active                { color: #c70000; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #ebebff;
	 								  color: #c70000; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #ebebff; position: relative; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ list-style: none;margin: 0; padding: 0;width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; z-index:1; }
ul.dropdown ul li 					{ font-weight: normal; background: #d0d0ff; color: #000; 
									  border-bottom: 1px solid #ccc; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ list-style: none; margin: 0; padding: 0;left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

That’s it. You’ve got yourself a simple menu.

Advertisements
Previous Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: