Create a css3 dropdown menu in wordpress

In this tutorial i will show you how to create a apple style css3 drop down menu in wordpress.Ok lets start, at  first i use this code to create navigation in wordpress.

Paste this code in your header.php


<div id="navigation" >
 <ul id="nav">
 <li><a href="<?php bloginfo('siteurl'); ?>">Home</a></li>
 <?php wp_list_pages('title_li=&sort_column=menu_order'); ?>
 </ul>
</div><!-- #navigation -->

Some jQuery required to show/hide the drop down menu’s.Paste this code before wp_head();


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $("#nav ul").css({display: "none"}); // Opera Fix
 $("#nav li").hover(function(){
 $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });
 });
 </script>

Now refresh your browser your web site may look like this.

css3-menu-wordpress

Now the css part.Place this css in your style.css


#navigation{
 margin: 0;
 padding:10px;
 display: block;
 float: left;
 margin: 0 auto;
 width: 940px;
}
#nav {
 margin: 0;
 padding: 7px 6px 0;
 line-height: 100%;
 border-radius: 2em;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  background: #F2F2F2; /* for non-css3 browsers */
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#7a7a7a'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#7a7a7a)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #F2F2F2,  #7a7a7a); /* for firefox 3.6+ */
 border: solid 1px #6d6d6d;
}
#nav li {
 margin: 0 5px;
 padding: 0 0 8px;
 float: left;
 position: relative;
 list-style: none;
}
/* main level link */
#nav a {

 font-family:Georgia, Times, serif;
 font-size:18px;
 font-weight: bold;
 color: #DBD7D8;
 text-decoration: none;
 display: block;
 padding:  8px 20px;
 margin: 0;
 -webkit-border-radius: 1.6em;
 -moz-border-radius: 1.6em;
 text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

}
/* main level link hover */
#nav .current a, #nav li:hover > a {
 background: #d1d1d1; /* for non-css3 browsers */
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */
 color: #444;
 border-top: solid 1px #f8f8f8;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
 background: none;
 border: none;
 color: #666;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#nav ul a:hover {
 background: #BEC1C2 !important; /* for non-css3 browsers */
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#BEC1C2', endColorstr='#F0F5F7'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#BEC1C2), to(#F0F5F7)) !important; /* for webkit browsers */
 background: -moz-linear-gradient(top,  #BEC1C2,  #F0F5F7) !important; /* for firefox 3.6+ */
 color: #fff !important;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
 background: #ddd; /* for non-css3 browsers */
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */
 display: none;
 margin: 0;
 padding: 0;
 width: 200px;
 position: absolute;
 top: 35px;
 left: 0;
 border: solid 1px #b4b4b4;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
 box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
 display: block;
}
#nav ul li {
 float: none;
 margin: 0;
 padding: 0;
}
#nav ul a {
 font-weight: normal;
 text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
 left: 181px;
 top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
 -webkit-border-top-left-radius: 9px;
 -moz-border-radius-topleft: 9px;
 -webkit-border-top-right-radius: 9px;
 -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
 -webkit-border-bottom-left-radius: 9px;
 -moz-border-radius-bottomleft: 9px;
 -webkit-border-bottom-right-radius: 9px;
 -moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

html[xmlns] #nav {
 display: block;
}
* html #nav {
 height: 1%;
}

Now visit your final look!
css3-menu-wordpress-final

In non css3 browser it may be look like this.

css3-menu-wordpress-final-non

12 replies
  1. Roshan
    Roshan says:

    Hello, the tutorial was easy to understand, but I am stuck with the second point, that is inserting the jquery.

    “Some jQuery required to show/hide the drop down menu’s.Paste this code before wp_head(); ”

    But, in which file should I insert the jquery before wp_head() ?

    Can you help me with inserting this in the KSYK theme ?

    Reply
      • Roshan
        Roshan says:

        Thank you Maidul for your quick reply.
        In the header.php file, I saw
        only…When i paste it just above this tag, the code that I paste was displayed in the localhost insatll…
        The theme KSYK I used was downloaded from magpress.

        Reply
          • Roshan
            Roshan says:

            When I placed it in the footer, it worked like a charm, but the location wasn’t proper, it was left aligned, and the content box started right after the menu, in the same line.

            I will try with mode edits.

            Thank You

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply