Home | Advertise | Contact

RSS Feed | Email RSS

Top 5 WordPress Navigation Menu Tutorials

By | Filed Under Tutorials
Tag(s): , ,

300x250 Top 5 WordPress Navigation Menu Tutorials

Navigation menu is a really important part of a website, both visually and functionally. Though, I noticed that most blogs use a really simple navigation menu. A simple menu can be good sometimes, but if you’re looking for something more sophisticated, I’m pretty sure you’re going to enjoy this list.

Here’s 5 really cool tutorials to help you create a stunning navigation for your WordPress blog.

Creating Two-Tiered Conditional Navigation in WordPress

twotier Top 5 WordPress Navigation Menu Tutorials
Which WordPress user doesn’t know Darren Hoyt, the creator the free magazine theme Mimbo Magazine ? In this great tutorial, Darren explains how to create a professional two-tiered navigation menu. Source

How To: Making a Categories Drop-Down Menu

menu pages categories wordpress 300x128 Top 5 WordPress Navigation Menu Tutorials
This was my first post on Hack WordPress, and seems like you guys enjoyed it. In this tutorial, I explain how to create a navigation bar with a category drop-drown menu. Source

Adding a navigation bar to the default kubrick theme

kub Top 5 WordPress Navigation Menu Tutorials
The default “Kubrick” theme is probably the most used WordPress theme. Though, I think it should be better with a navigation bar. Hopefullt, this tutorial is here to help! Source

WordPress: “Magazine style” Horizontal dropdown menu

menu horizontal 300x61 Top 5 WordPress Navigation Menu Tutorials
One of my last tutorials, published on my blog CatsWhoCode. This how-to explain how you can create an horizontal dropdown menu. Source

Using Sliding Doors with WordPress Navigation

This sliding doors CSS hack allows you to create sophisticated tabs for your navigation bar. Sadly, WordPress core functions wp_list_pages() and wp_list_categories() don’t allow you to add the required span tag to use this technique.
This tutorial will show you how to bypass this limitation by using a hack, and then you’ll be ready to enjoy sliding-doors for your WordPress navigation! Source

Any other navigation tutorial that should be in the list? Leave us a comment below!

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!
  • Print This

    • Jean-Baptiste Jung is a blogger/web developer/web designer who lives in the French-Speaking part of Belgium. Jean-Baptiste maintains two blogs: Cats Who Code.com where he and other authors write about Web Development, Web design, Blogging tips and WordPress, and WPRecipes.com where Jean shares useful WordPress snippets on a daily basis. When he's not blogging or having fun with codes, Jean loves to spend time with his wife and cat, and traveling everywhere he can.

    There Are 33 Responses So Far »

    • Pingback: Top 5 WordPress Navigation Menu Tutorials auf Tiliaone.de

    • http://wp-premiums.com PJ

      Nice list of tutorials, to which you could add the scrollover integration tutorial given at wpcandy.

    • Pingback: Top 5 WordPress Navigation Menu Tutorials — WPCandy — WordPress Themes, Plugins, Tips, and Tricks

    • Pingback: WordPress Weekend Resources - August 29, 2008 | Theme Lab

    • Pingback: 5 Tutoriales de menu's para Wordpres | Móchate

    • Pingback: Leonaut.com

    • Frank Gil

      hey I will try to use the slide door style, seems really nice, thanks for sharing!

    • http://www.catswhocode.com jbj

      You’re welcome guys, I’m glad you enjoyed this post :)

    • http://www.oceansis.com freeocean

      I was learning templates, these elements is necessary,I hope that through learning, can make such a pretty navigation!

    • http://kyleeslick.com Kyle Eslick

      Great list! I love these types of posts.

      Thanks for contributing this post JBJ!

    • CocoaDiva

      How do I prevent my horizontal menu from showing up in all my google posts. When google looks at my individual posts it doesn’t even get to the content. All of my posts show up with the description of my blog and then the categories in the menu. Please help because my blog is indexed incorrectly!

    • http://www.catswhocode.com jbj

      @Kyle: Thanks! I’m glad to contribute to HWP.

      @CocoaDiva: I’m pretty sure the problem is the prototype.js library which is linked just after your menu…Link it on the <head> part of your header.php file, and your site will load correctly.

    • Pingback: 6 tricks and tip to create a “Magazine” WordPress theme

    • Jake

      Hi!

      I am having dramas with the menu. When I hover on a Top menu the sub menu will display but hidden under the smooth gallery photos. It there a CSS coding that will overcome this at all.

      Please follow this link for a screen shot at what I’m talking about.

      http://www.epsilonfoundation.com.au/menu.jpg

    • http://www.teraom.com teraOm

      Thanks, a two tier navigation is quite difficult to implement and this tutorial could have been a bit more elaborate.

    • Addy

      very usefull.. thank :)

    • Pingback: links for 2009-02-13 - udyr.com

    • Pingback: Congratulations High Five Winners | Inspiredology

    • Pingback: Enlaces en mi del.icio.us, 15 06 2009 | Vectoralia

    • Pingback: Learn How to Create Wordpress Themes

    • http://www.jamalahbryan.com Jamalah Bryan

      This was very useful.

    • Pingback: faceboox.net

    • http://www.videos4-you.info eyefox

      Thanks so much ! This is useful for my site !

    • http://skincareproductsbuynow.com Paul Lewis

      Looks great. :) . Great tutorial. One question though, how do I go about changing the pages in my new menubar? Is there a way I can just select which pages go on the menubar rather than all of my pages? thanks

    • http://www.foodrecap.net marvin

      First I used “Adding a navigation bar to the default kubrick theme” because my blog theme is kubrick. Its okey with internet explorer, firefox, google chrome, safari and seamonkey but problem arise with Opera. This opera browser misplaced my navigation bar. It was so ugly. Then I replaced it with “sliding doors” and applied some sexy css code. Boila ! Problem solved, my blog looks fantastic with all browsers.

      Thanks dude!

    • http://www.itsteun.nl John

      Hey nice tutorials,
      I especially like the dropdown menu :D
      I also like the fact that you fixed the IE6 problem with javascript.
      Thanks, this will be very useful when building my future sites.

    • http://www.senseforweb.com sharif

      thanks for your useful article.

    • Pingback: Using Wordpress as a Multi-Site CMS

    • Andrew@ Audit Software

      Thanks for sharing. Amazing post. I also try to stick with creating Two-Tiered menu as I think its the best from Usability side. You have listed so many options for menus. I will use some of these tutorials for building menu on my new blog i am working now.

    • Pingback: Top 5 WordPress Navigation Menu Tutorials

    • bala

      i added pages to my site but when i try to put daily posts on different topic on two different pages only the HOME page accepts it……the other is a static post and cant add a tittle or post to it

    • bingo

      i really wanted to have a top menu bar like in your hack code but what if wordpress upgraded its version? what will happen, is there changes to the output of my post?

    • Leslie

      I like the horizontal tab navigation. Could you tell me the name of the tab navigation used for comments, trackback, related posts at http://polpoinodroidi.com/wordpress-plugins/smilies-themer-toolbar/?

      Thanks a lot :)

    • Manuela

      Great info! I’m looking for a navigation menu just like yours with 2 horizontal rows on top of each other. Are u using 2 seperate menu’s or 1 with a horizontal ‘sticky’ subrow?

    • http://www.pixelpinch.com Abhash Bikram Thapa

      Nice article. Helped me to make myself a menu bar which I’m going to use in my blog.

    • http://www.italianpop.com Sandro @ Italian Music

      Very nice and useful list! As I like simple things, my favourite one is the navigation bar added to Kubrick theme.

    • http://business-card-size.net/ Tim

      Thanks for your useful tutorials.

    • http://www.webbegum.com Mack

      Thank you for posting this menu tutorial. I prefer to use son of suckerfish menu:)

    • http://ardhianmintan.com ardhian mintan

      thanks for tutorial…

    • Pingback: Navigation « Richard Allen

    • Pingback: Google Human Reader: Satisfy The Google Human Inspector | Kaiser On The Internet

    • http://www.microsofttrainingcourses.org Paul Brown

      Useful stuff, but I have to say that these days we just build complete themes in a few minutes in Artisteer – seems a lot simpler!

    • Pingback: Creating a dropdown menu in Wordpress

    • http://sekretytresurypsa.pl/ tresura psa

      That’s very usefull. Thanks for that. Every wordpress tutorial should have this one.

      Thank you so much:)

    • http://www.hiberniaadventures.com sean

      hi there,
      Im trying to create a new page for my website with various columns. The page has not gone live but when i go to view page using most browsers except for internet explorer , my vertical side nav bar moves to the bottom right of the page.
      Why is this and can you help me to prevent this from happening on all browsers.

    • http://www.handycss.com Tahir Shah

      Submenu Tree provides a method for structuring content hierarchically. For content, which has a menu link, Submenu Tree displays a list of content, which is at the same level or below the content in the menu.

      http://www.handycss.com/css-menus/creating-menu-with-sub-menu-below/

    • http://www.boredsoup.com corporate

      Thanks. I’ve been trying to change my navigation bar. I’m not really good at php though. That code is actually pretty simple though it seems just child and parent. I’m talking about the 2nd one with the black drop downs. Thanks a million bookmarked.

    • Pingback: WordPress Arena: A Blog for WordPress Developers, Designers and Blogger

    • http://www.hdscreenwallpapers.com ayan

      its nice thanks i was looking for this menu thanks alot

    • http://geekyard.com Geekyard

      I personally love “Magazine Style” Horizontal Navigation bar ;)