[CSS3] jQuery Dropdown Navigation in WordPress

Styling the Sub Level Menus

Now, just add this bit of CSS to your CSS file to make your sub level menus look all nice and pretty. Its pretty straightforward.










/* Sub Level Nav */
#header ul li ul {
	background: #F4F4F4;
	border: 0px solid #000;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	margin: 10px 0 0 -46px;
	padding: 0 10px 0;
	position: relative;
	width: 126px;
}

#header ul li ul li {
	border-bottom: 1px solid #CCC;
	display: block;
	float: none;
	height: 14px;
	padding: 8px 0;
	text-align: center;
	width: 126px;
	margin: 0;
}

#header ul li ul li a {
	color: #620d20;
	text-shadow: none;
}

#header ul li ul li a:hover {
	color: #000;
}

#header ul li ul li:last-child:not(li.arrow) {
	border: 0;
}

/* Arrow */
.arrow {
	background: url(arrow.png) no-repeat;
	border: 0;
	display: none;
	position: absolute;
		top: -10px;
		left: 63px;
	height: 11px;
	width: 20px;
	text-indent: -9999px;
}

Making it Work with WordPress

The Admin Panel

The items for the menu are going to be pages, so when you create your pages the ones you want to be the top level menu items make them have no parent. The items you want under a main item and appear on hover give them the parent of said element. The field to give a page parent is located in the right sidebar during page creation.

The PHP

Now, making this work with WordPress is very easy. All you need to do is include the CSS and JavaScript with your current theme and then do the following with your header.php file.

<div id="header">
<ul>
	<li><a href="&lt;?php bloginfo('url'); ?&gt;">Home</a></li>


</ul>
</div>

Final Thoughts

Of course this isn’t a perfect multi-level navigation; it is an awesome start to making your own. This will only look good in WebKit and Mozilla browsers, it’s a feature only meant for them at the current time. If you have IE, switch to a WebKit or Mozilla browser to view the end result. Both the wordpress and html version are located inside the source files, enjoy them and we hope you’ll learn from it.

With our Testking 220-701 tutorials, learn how to enhance your WordPress themes in a whole new way. Download our free Testking 350-030 tutorials and Testking 70-642 guide to become expert.

Pages: 1 2 3 4

This entry was posted on Monday, March 22nd, 2010 at 09:30 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson

49 Responses »

  1. Thank you! I might use it in my future WordPress website! :)

  2. ok great tutorial , and I’ll leave comment for respect

  3. There is a bug…
    When you pass the dropdown menu item a couple of times, it continues animating…

    If you move quickly 5 times over the button, it will animate 5 times… Is there a fix for it?

  4. Any reason you did not nest your tags properly? I mean going right into another LI without first opening a UL?

    Also, you should probably add a stop before you animate. When you mouse in and out rapidly, you are forced to wait for animation.

  5. @SD and @Matt

    We will try to find a solution for this ASAP.

  6. @SD I will look into it.

    @Matt It has it on my local version. I must have messde up while typing this tutorial. When using the WordPress code

  7. Nice tut.
    Ive found that the arrow element gets in the way of the first link in the list.
    Is there a way to make the arrow li smaller and less obtrusive?

    Thanks.

  8. Found a solution for the arrow blocking the first link in the list.
    Just add z-index: -100; to the .arrow {} css element

  9. Could you please help me with one error im getting with this tutorial.
    Im getting a border on the left hand side of the .arrow element when the list animates up.

    You could please let me know how to remove this.
    My menu can be seen here: http://www.unit23skatepark.co.uk
    Mouse over the team or contact links.

    Thanks in advance.
    Chris.

  10. Tried the z-index fix above but it doesnt seem to do anything. Only way I found to get over the problem is to make the .arrow class more specific so that it overwrites the standard #header ul li ul li styles rather than defaulting to them.

    Change the .arrow selector to #header ul li ul li.arrow. Then on the last line add padding-bottom: 0; and you shouldnt have the arrow obscuring the link.

  11. Awesome tut … haven’t seen a simpler drop-down-jquery-tut anywhere.
    Note: does not work if you use WordPress’s own “jquery.js” from the includes directory.

  12. not working on localhost wordpress theme that is being developed :(

  13. Is there any way to center the submenu, because if you have a menu item with the name of Portfolio, the submenu is not centered.

  14. Ok, the submenu is centered only if the menu item has a fixed width but if i change the width to auto then the submenu is not centered, is there a way to fix this?

    • The only way to horizontally align an UL element without a fixed width is to use something like this:

      #nav ul {
      clear: left;
      float: left;
      position: relative;
      left: 50%;
      }

      #nav li {
      display: block;
      float: left;
      position: relative;
      right: 50%;
      }

  15. Thanks for a nice tut.

    I had a problem with a not so smooth animation after hovering the menu(due to the arrow being removed)

    (I used other styling with all images maybe thats why?)

    If you are having a similar problem the fix is to put the ‘remove arrow’ in front ‘add arrow’.

    Does the same job:

    //remove the Arrow
    jQuery(‘ul li.arrow’, this).remove();
    //Add the Arrow
    jQuery(‘ul li:first-child’, this).before(
    ‘arrow’

  16. This post was extremely nicely written, and it also contains numerous helpful facts. I appreciated your professional way of writing the publish. Thanks, you have made it easy for me to understand.

  17. Can you give me more examples? I really want to create a drop down menu for my website! Thanks for your sharing and i’m looking forward to your more attractive content!

  18. Is there a fix for the way this menu pushes the whole page down on hover. I tried playing with z-index with no success.

  19. Very nice code snippet. It works great!

  20. Hi There!,

    this is my first ever post/comment/question regarding a tutorial.

    First off, thank you so much for sharing you knowledge with everyone. (it’s people like you that make it possible for people like me to design websites)

    Question:

    When I view this drop down in firefox, the border and shadow don’t show. I haven’t tried IE yet.

    is there a fix?

    peace!

    mark

  21. Hello Cody.
    first , i�d like to thank you for a big help that you gave me with this menu.
    but i still have some problems with render in the internet explorer browser .
    take a look at the link: http://www.assadballarinybrito.adv.br/teste/index.html
    and if you have a solution for this… because in another browser it’s working very well…
    Thanks a lot!

  22. put jQuery .stop function in your animation not to run it again and again!!

Trackbacks

  1. You are now listed on FAQPAL
  2. This Weeks Twitter Design News Roundup N.30 - Speckyboy Design Magazine
  3. 45+ Fresh Wordpress Tutorials, Techniques and Hacks - Speckyboy Design Magazine
  4. 45+ Fresh Wordpress Tutorials, Techniques and Hacks · rogdykker
  5. 45+ Fresh Wordpress Tutorials, Techniques and Hacks | EMDMA
  6. 45+ Fresh Wordpress Tutorials, Techniques and Hacks | WebDesign Collection
  7. Best of the Web: First Quarter | Site Design Tips
  8. Best of the Web: First Quarter | Best Web Magazine
  9. Best of the Web: First Quarter | jiggymotto.com
  10. 45+ Fresh Wordpress Tutorials « MoeMir
  11. WordPress?????
  12. 25 Best Examples of jQuery and CSS Drop-down Menu Tutorials
  13. 40 Very Useful Wordpress Tutorials Help You Become an Expert - Ntt.cc
  14. Top 20 jQuery CSS Drop Down Menus | webtrendset
  15. Beautiful CSS and jQuery Drop down Menu Tutorials | WebsterBox - Web design Blog
  16. 45+ Fresh Wordpress Tutorials | MoeMir
  17. 24 simple jQuery Drop-down Menus that will amaze your visitors | Web Design Ne.ws
  18. 25 Beautiful Examples of CSS and jQuery Drop down Menu Tutorials « Studiodm – Web design & Development
  19. 30?jQuery?????? | ????
  20. 50+ Awesome jQuery Dropdown Menus | Pulse2 Technology and Social Media News

Leave a Response

We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.