Creating a Mac-style drop-down menu with Jquery

2008-08-11T08:39:00.000-07:00

In this Tutorials lets see how to make a professional drop-down menu with CSS & Jquery. You can checkout the finished version here or download the source files here.

Step 01

First of all we have to design the drop-down menu, I Used Photoshop to design the menu.
this is the final Design of the dropdown menu

Step 02

We need a proper plan to achieve the exact design in HTML and CSS, I used the List element to create the menu so even without the CSS the Plain HTML will still be useful !.

Basic HTML for the menu

<div id="main_menu">
<ul id="menu_links">
    <li class="home_btn"><a href="#"><b>Home</b></a></li>
    <li class="portfolio_btn"><a href="#"><b>Portfolio</b></a></li>
    <li class="downloads_btn"><a href="#"><b>Downloads</b></a></li>
    <li class="contact_btn"><a href="#"><b>Contact Us</b></a></li>
</ul>
<div style="clear:both"></div>
</div>

Here's a Simple break down of the code above

Step 03

Now its time to cut some images & write some Css This is the Sliced Version of the Photoshop Mockup. -There are 4 buttons so there are 8 images for the buttons (every button has 2 images, one for normal state and one for mouse over state) -There are 4 common images Left corner, Right corner, button separator, Menu backgroud (note our background image will be scaled to fit the menu width)

Basic CSS

Basic CSS for the menu

body {
margin: 5px;
padding: 0px;
background-color: #FFFFFF;
}

#main_menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/menu_bg.jpg);
background-repeat: repeat-x;
}

#main_menu #menu_links {
list-style-type: none;
display: block;
margin: 0px;
padding: 0px;
height: 41px;
background-image: url(images/right_corner.jpg);
background-repeat: no-repeat;
background-position: right center;
}

#main_menu #menu_links li {
float: left;
display: block;
height: 41px;
background-image: url(images/menu_seperator.jpg);
padding-left: 8px;
background-repeat: no-repeat;
}

#main_menu #menu_links li a {
display: block;
text-decoration: none;
height: 41px;
}

#main_menu #menu_links li a b {
display: none;
}

#main_menu #menu_links .home_btn,#main_menu #menu_links .home_btn_hover{
background-image: url(images/left_corner.jpg);
padding-left: 4px;
}

#main_menu #menu_links .home_btn a{
background-image: url(images/home_normal_btn.jpg);
width: 50px;
}

#main_menu #menu_links .portfolio_btn a{
background-image: url(images/portfolio_normal_btn.jpg);
width: 62px;
}

#main_menu #menu_links .downloads_btn a{
background-image: url(images/dnlds_normal_btn.jpg);
width: 78px;
}

#main_menu #menu_links .contact_btn a{
background-image: url(images/contact_normal_btn.jpg);
width: 78px;
}

#main_menu #menu_links .home_btn_hover a{
background-image: url(images/home_hover_btn.jpg);
width: 50px;
}

#main_menu #menu_links .portfolio_btn_hover a{
background-image: url(images/portfolio_hover_btn.jpg);
width: 62px;
}

#main_menu #menu_links .downloads_btn_hover a{
background-image: url(images/dnlds_hover_btn.jpg);
width: 78px;
}

#main_menu #menu_links .contact_btn_hover a{
background-image: url(images/contact_hover_btn.jpg);
width: 78px;
}

#main_menu #menu_links li #portfolio_menu{
left: 63px;
z-index: 200;
}

#main_menu #menu_links li #downloads_menu{
left: 133px;
z-index: 199;
}

TUTELibrary

Creating a Mac-style drop-down menu with Jquery

Step 01

Step 02

Step 03

Basic CSS