rss

Make your own WordPress drop down menu

7 May, 2008 jQuery,Navigation

When it comes to creating a site that has multi-level navigation, a drop down menu is often your best means of keeping the navigation simple and uncluttered. There are a few plugins that you can use to achieve this, but I’ve found that many of them make too many assumptions and don’t work exactly how I’d like them too. For that reason, I’ll detail a simple means of making your own WordPress drop down menu.

Here’s a demo of what we’re going to accomplish. (Tested in IE7 & FF)

Getting started

Firstly, you’ll need to setup your pages in WordPress in a hierarchal manner. IE:

  • Home Page
  • About Us
    • What We Do
    • What We’ve Done
    • Who Works For Us
  • Services
  • Portfolio
    • Our Clients
  • Contact Us

This will generate a nested UL LI list in your code.

<ul id="nav">
	<li><a href= "#">Home Page</a></li>
	<li><a href= "#">About Us</a>
		<ul id="aboutus">
			<li><a href= "#">What We Do</a></li>
			<li><a href= "#">What We've Done</a></li>
			<li><a href= "#">Who Works For Us</a></li>
		</ul>
	</li>
	<li><a href= "#">Services</a>
		<ul id="services">
			<li><a href= "#">Portfolio</a></li>
			<li><a href= "#">Our Clients</a></li>
		</ul>
	</li>
	<li><a href= "#">Contact Us</a></li>
</ul>

Sorted? :)

Making it dynamic

What you’re going to do now, is break that list down somewhat and create your own navigation. The top level menu items will be static, and their subpages will be dynamic. Like so:

<ul id="nav">
	<? wp_list_pages('title_li=&sort_column=menu_order'); ?>
</ul>

You might also want to include a home link. You can add this manually like so:

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

The Script

There’s a tiny piece of jQuery required to show/hide the drop down menu’s. From an accessibility point of view, you can link the top level navigation item so that if JS is disabled, the user will still be able to get around your site. Here’s the script.

$(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"}); });
});

The CSS

This CSS is really a guide and it largely depends on the styling of your site. The important thing is to add “position:relative;” to the first level of LI elements. The UL element (the drop down menu) needs to have “position:absolute;” so the parent LI needs to be relatively positioned to your dropdown menu doesn’t display topleft corner of the page.

/*navigation*/
#nav {padding:0;margin:0;}
#nav li {position:relative;display:block;float:left;}
#nav li a {display:block;float:left;height:30px;line-height:30px;padding: 0 20px;}

/*sub navigation*/
#nav ul {position:absolute;top: 30px;left:0;padding:0;} /*the top:30px command must be the same height as your parent LI so the dropdown displays below the main navigation*/
#nav ul a, #nav ul li {float:none;}

This is the CSS used to achieve the effect in the demo. You can of course change it to suit your site’s styles.

And presto, you’ll have a drop down menu. As you add sub pages in your WP admin, those pages will automatically be included in your drop down.

Slick :)

303 Comments

  1. Consider a unique approach to creating logos and
    banners rather than the simple rectangles
    that some companies use. One of the more effective
    ways to increase traffic and bring hordes of clients to your site would be through the distribution of press releases.
    While this is better than not driving traffic to anything of yours,
    it is ineffective when compared to driving traffic to
    a location-specific landing page with a strong offer
    and several convenient methods of contacting the
    clinic.

  2. Consider a unique approach to creating logos and banners rather than the simple
    rectangles that some companies use. A good ranking in major search engines drives
    customer attention and generates more sales. I’ve had friends in multi-level marketing
    who spent all their time trying to sell product and just recruited the
    occasional new down line member.

  3. Unquestionably believe that that you stated. Your favourite justification
    appeared to be at the web the simplest thing to take into accout of.

    I say to you, I certainly get annoyed at the same time as folks consider concerns that they plainly
    don’t recognize about. You controlled to hit the nail upon the top as smartly as outlined out the entire
    thing with no need side-effects , other folks could take a
    signal. Will probably be again to get more. Thanks

  4. I was wondering if you ever considered changing the structure of your website?
    Its very well written; I love what youve ggot to say.

    But maybe you could a little more in the way of contejt so
    people ould connect with itt better. Youve got
    an awful lot oof text for onloy having 1 or 2 images. Mybe
    you could space it out better?

  5. Get over your ex girlfriend and live the life you deserve.
    do, or a new hair colour to enhance your natural features.

    To attract women, you need to have a hawks eye
    as they do not send repeat signals.

  6. Keeping the reselling value of your house in mind is essential no matter when you’re
    planning to move. You don’t need to remove walls etc in the remodeling of kitchen and
    bathroom. Thhe many beautiful shades and designs of laminate thzt are available may explain its enormous
    popularity with today.

  7. For a small catering business, the business owner needs to make daily
    entries regarding the various financial transactions that take place everyday.
    The System Is The Solution – In 1991 we developed
    a Comprehensive Construction Strategic Bookkeeping System to add useful content to Quick – Books setup in
    order to make it work for construction companies. So choose carefully and wisely, because
    it is essential that you employ an accounting firm that you could trust.

  8. Ailments and accidents among personnel can simply cause additional expenditures and delay in construction which
    you would not want to occur. If any company or contractor nock
    at your door and offer, their services then never hire this kind of contractor or
    company. You may have noticed that bathroom
    renovation shows are becomin more and more popular aas people become do-it-yourselfers.

  9. This particular would make these people preferred for office
    uuse and barber stores. If you’re having a massage,
    schedule some time to return home and rest afterward.
    It is important that you know that you must be truly dedicated to your pursuit of a happier, healthier and more successful life if you really expect a personal development regimen
    to work.

  10. First off I would like to say wonderful blog! I had a quick question in which I’d like to
    ask if you do not mind. I was interested to know how you center yourself and clear your thoughts prior to writing.
    I have had trouble clearing my mind in getting my ideas out.
    I truly do take pleasure in writing however it just seems like the first 10
    to 15 minutes are lost simply just trying to figure out how to
    begin. Any ideas or tips? Kudos!

  11. Or you end up scrapping whatever design you are trying
    to make. They are the light bulbs that look like a folded tube of
    glass. The most popular energy saving bulbs available in the market is called Compact Fluorescent Light (CFL) bulbs.

  12. The best of Facebook’s Fishville’s tips, tricks, cheats, and guides are written by
    those who have played the game. Farmville is
    one of the most popular games on Facebook. Don’t become a hoarder
    of cheap businesses – save room for the more profitable
    ones.

  13. Great beat ! I would like to apprentice at the same time as you amend your web site,
    how could i subscribe for a blog web site? The account aided me a applicable deal.
    I were tiny bit acquainted of this your broadcast provided vibrant clear idea

  14. Greetings from Florida! I’m bored too death at work so I
    decided to brdowse your site oon my iphone during lunch break.
    I enjoy the knowledge you present here and can’t wait to take a look when I get home.
    I’m amazed at how fast your blog loaded on my cell phone
    .. I’m not even usikng WIFI, just 3G .. Anyways, awesome site!

  15. Hello There. I found your weblog using msn. That is a really neatly written article.

    I’ll be sure to bookmark it and come back to learn more of
    your helpful information. Thank you for the post. I’ll definitely comeback.

  16. Howdy! I know this is kind of off topic but I was wondering which blog platform are you using for this website?
    I’m getting tired of WordPress because I’ve had issues
    with hackers and I’m looking at alternatives for
    another platform. I would be great if you could point me in
    the direction of a good platform.

  17. Hi there, I found your blog by means of Google at the same time as looking for a
    similar topic, your site got here up, it looks good.

    I’ve bookmarked it in my google bookmarks.
    Hi there, just became aware of your weblog through Google,
    and located that it is really informative. I’m going to watch out for brussels.
    I’ll appreciate in case you continue this in future.
    Numerous people can be benefited from your writing.
    Cheers!

  18. Many off us are trying to create, a warm and welcoming.
    If you aare looking for authenticity and traditional
    American Indian values, you will be if those tiny panels hopme remodwling services of glass reflect the lights from
    thhe bulbs and globes and you are 100% satisfied! 4 Cutt a 20cm length of jewellery wire and
    fix a loop at one end of tthe twine.

  19. Thanks for some other excellent article. Where else may anybody get
    that kind of information in such an ideal approach of writing?

    I’ve a presentation next week, and I’m on the look for such information.

  20. With havin so much written content do you ever run into any problems of
    plagorism or copyright infringement? My blog has a lot of unique content I’ve either written myself or outsourced but it appears a lot of it is popping it up all over the internet without my authorization.

    Do you know any methods to help protect against content from
    being stolen? I’d definitely appreciate it.

  21. I will right away grab your rss feed as I can’t find your email subscription link or newsletter service.
    Do you have any? Please allow me recognize so that I
    may just subscribe. Thanks.

  22. Hello very nice site!! Man .. Excellent .. Superb .. I will bookmark your blog and take the feeds
    also? I am glad to seek out a lot of helpful info right here within the submit, we need work out extra strategies in this regard,
    thanks for sharing. . . . . .

  23. Hi there to all, the contents present at this site are truly remarkable for people experience, well, keep up
    the nice work fellows.

  24. Hi there colleagues, how is all, and what you want to
    say regarding this paragraph, in my view its in fact amazing in favor of
    me.

  25. Fabulous, what a blog it is! This web site presdents valuable data
    to us, keep it up.

  26. Hi! Do you know if they make any plugins to help with Search Engine Optimization?
    I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good gains.
    If you know of any please share. Many thanks!

  27. Wow! In the end I got a blog from where I be able tto truly obtain helpful data
    regarding my study and knowledge.

  28. These are genuinely great ideas in on the topic of blogging.
    You have touched some nice factors here. Any way keep up wrinting.

  29. Woah! I’m really enjoying the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between superb usability and visual appeal.
    I must say you have done a superb job with this. Also, the blog loads very fast for me on Opera.
    Superb Blog!

  30. I think the admin of this web page is in fact working hard in favor of his website, as here every material is quality based data.

  31. They do exist, and have been proven to work for some people.
    Though there is no perfect health care therapy for this affliction, Tinnitus-Miracle critique demonstrates that this method can remedy Tinnitus in a natural
    way. Here are a few tried and tested methods for administering sinusitis cures:.

  32. Thiis card is particularly useful for the youngsters
    and teenazgers who do not have their credit cards andd are curious about
    using it. Single-use Equipment frlm Haloo 3 turns into reusable and swappable Aror Abilities for Reach.
    Twitter, Facebook, My – Space IDs-Include code with a share button previously mentioned it
    that caan be connected to delliver enthusiasts to your gallery or website.

  33. I wanted to thank you for this great read!! I absolutely loved every bit of
    it. I have you book-marked to check out new stuff you post…

  34. lictors  lidding  lidless  liefest  liernes  lievest  lifeful  lifeway.
    SEPARATION OF CHURCH AND STATEAnd, of course, there’s that analytically tricky puzzle of the
    doctrine of “Separation of Church and State” to
    very simply demystify here, since it is one of the most
    misunderstood and abused subjects, on both sides, which was ever structurally primed for being
    as inherently, rationally indispensable, in its true meaning, as
    it is capable of falsifyingly and destructively cutting, again, either way.
    At the very least, read the description on the box and ask a store associate for their opinion.

  35. You’ve made some good points there. I looked on the web for additional information about
    the issue and found most individuals will go along with your
    views on this site.

  36. This is very interesting, You are a very skilled blogger.
    I’ve joined your feed and look forward to seeking more of your fantastic post.
    Also, I’ve shared your web site in my social networks!

  37. Thanks for finally talking about >Make your own WordPress drop down menu
    - The WordPress Guru <Liked it!

  38. Great post. I will be experiencing many of these issues as well..

  39. These are genuinely impressive ideas in regarding blogging.
    You have touched some pleasant points here. Any way
    keep up wrinting.

  40. I have read some good stuff here. Certainly price bookmarking for revisiting.
    I surprise how much effort you place to make the
    sort of wonderful informative website.

  41. I’ve been browsing online more than 3 hours these days, yet I by no means discovered any interesting article like yours.

    It’s pretty value sufficient for me. In my view, if all webmasters
    and bloggers made just right content material
    as you did, the web will be a lot more helpful than
    ever before.

  42. It’s actually a nice and useful piece of information. I’m satisfied that you just shared this useful information with us.
    Please stay us informed like this. Thank you for sharing.

  43. I’ve read some good stuff here. Certainly price bookmarking for revisiting.
    I wonder how so much effort you put to create this type of fantastic informative website.

  44. Excellent pieces. Keep posting such kind of information on your blog.
    Im really impressed by it.
    Hey there, You have performed a fantastic job.
    I will certainly digg it and personally recommend to my friends.
    I am confident they will be benefited from this
    web site.

  45. I would like to thank you for the efforts you have
    put in penning this blog. I am hoping to check out the same
    high-grade content by you later on as well. In fact, your creative
    writing abilities has motivated me to get my very own website
    now ;)

  46. It’s actually a nice and helpful piece of information. I’m satisfied that you simply shared
    this useful info with us. Please keep us informed like this.
    Thank you for sharing.

  47. I’m truly enjoying the design and layout of your site.
    It’s a very easy on the eyes which makes it much more pleasant
    for me to come here and visit more often. Did you
    hire out a designer to create your theme? Exceptional work!

  48. I like the valuable information you provide in your articles.
    I’ll bookmark your weblog and check again here regularly. I’m quite sure I will learn plenty of new stuff right here!
    Best of luck for the next!

Trackbacks

  1. 教你自己动手制作Wordpress下拉菜单 | 免费资源部落
  2. How to create dropdown menus in wordpress
  3. WordPress Dropdown Menus « Virtual Artifacts
  4. Loretta Young
  5. 教你自己动手制作WordPress下拉菜单 - 青青小站 - 又一个 WordPress 站点

Leave a Reply

About The WordPress Guru

Over the last 4 or 5 years, I’ve been digging into the Wonders of WordPress. From the days when the Classic theme was the shizz until now, WordPress has gone from strength to strength both as the blogging platform of choice for many big players and as a CMS with...

Learn more »