A drop down menu is often your best means of keeping the navigation simple and uncluttered, that can offer your theme and users 2 new things. One, add a nice new type of effect to enhance your theme. Two, allow the users to find things more easily. There are a few plugins that you can use to make this, but in this post, I’ll show you how to make your own WordPress Drop-Down menu with CSS and jQuery and WordPress’s standard wp_list_pages, wp_nav_menu, wp_list_categories
The aim of this short tutorial is help you build a simple multi-level drop-down menu in your WordPress theme using jQuery’s JavaScript library to make sure cross-browser compatibility.
To get started with this tutorial, you’ll need to have a WordPress website up and running and a willingness to alter your theme files. Once that’s squared away you’re ready to rock!
The Standard WordPress navigation layout
Before we get into making drop downs, we need to take a look at the way WordPress layouts it’s navigation.
[gist id=2886132]
Both wp_list_pages and wp_nav_menu lay out their menus pretty much exactly the same, besides different class names, so we’ll just take a look at wp_nav_menu‘s printed code:
[gist id=2886158]
As you can see, WordPress neatly (well neat besides all the classes) layouts out the menu in a nice semantic list, with the children of the navigation nested inside of it’s parent li. This allows us to use both CSS and/or jQuery to make our drop downs work!
Styling the Navigation
Now, let’s styling the navigator. We want our list items aligned horizontally, and of course centered in the middle of the page.
[gist id=2886166]
jQuery Animation the Navigation
There’s also an easy way to make WordPress menus with jQuery drop downs. jQuery allows you to get a bit more fancy, by adding speeds and fades to the animation. It’s also useful if you’re still stuck supporting IE6.
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 disabled, the user will still be able to get around your site. Here’s the script.
[gist id=2886171]
Finally!! A Drop Down WordPress Navigation Menu using CSS and jQuery!
That’s basically it, the example is about as stripped down as I could make it. Hopefully you’ll have fun bending the code to your next project. Feel free to post comments if you have any questions about the tutorial. Happy coding!
Hi Mr. Quan. This article is so useful. I like it so much. Thank you.
Hope you can use as your own design :)
Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. Come on and keep writing your blog will be more attractive. To Your Success!
hi,
please help me.
how rename or add (dropdown menu) to style file.
Difference : “.sf-menu AND #cat-nav- ”
default file:
.sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; } .sf-menu { position: relative; margin: 0; padding: 0; list-style: none;clear:both; float: left; margin-top: 12px; padding-left: 9px; margin-bottom: 1em; background: url('images/menu_bg.png') no-repeat; height: 58px; width: 957px; z-index: 400; } .sf-menu ul { position: absolute; top: -999em; margin-top: 20px; width: 212px; right: 7px; -moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); background-image: url('images/dropdown_top.png'); background-repeat: no-repeat; background-position: top; padding-top: 8px; z-index: 400; } .sf-menu a { display: block; position: relative; text-decoration:none; color: #fff; padding: 23px 20px 0px 20px; height: 30px; text-decoration: none; text-shadow: 1px 1px 1px #000; font-weight: normal; float :right; } .sf-menu li { float: right; position: relative; font-family: Tahoma; background: url('images/menu_line.png') no-repeat; background-position: left 5px; } .sf-menu li ul li ul { right: 212px; margin-top: 0px;} .sf-menu li li { background: #ebebeb url('images/submenu_li.gif') no-repeat; background-position: 24px 15px; height: 36px ; margin: 0px; float: right; width: 212px; z-index: 10; } .sf-menu li a:hover { color: #00b4ff; } .sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #121212; outline: 0; } .sf-menu > li.sfHover.sf-ul { background: transparent url('images/parent_link_left.png') no-repeat; background-position: 7px 11px; z-index: 200; } .sf-menu li.sfHover li a:hover, .sf-menu li ul li.sfHover a, .sf-menu li ul li ul li.sfHover a { background: #f7f7f7 url('images/submenu_li_hover.gif') no-repeat; background-position: 11px 0px; } .sf-menu li.sfHover li a, .sf-menu li.sfHover li ul li a, .sf-menu li.sfHover li ul li ul li a { background: url('images/submenu_li_hover.gif') no-repeat ; background-position: -100px -100px; width: 172px; color: #404040; margin: 0px; padding: 14px 0px 0px 40px; text-shadow: 0px 1px 0px #cccccc; } .sf-menu > li.sfHover.sf-ul > a { color: #000; text-shadow: 1px 1px 1px #fff; background: transparent url('images/parent_link_right.png') no-repeat; background-position: right 11px; z-index: 301; } ul.sf-menu li.backLava { position: absolute; z-index: 3; background: url('images/lavalamp.png') no-repeat; background-position: center 0px; padding: 0; height: 16px; margin-top: 42px; } --------------------new code (DROPDOWN MENU):
---------------- #cat-nav { bottom:-14px; left:0; position:absolute; width:980px; z-index:100; } #cat-nav-left {background: url(images/n-2/cat-nav-left.png) no-repeat; width: 10px; height: 64px; float: left;} #cat-nav-content { background: url(images/n-2/cat-nav-content.png) repeat-x; float: left; height: 64px; width: 941px; } .nav li ul {box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); background: url(images/n-2/cat_menu_bg.png) repeat-y; border: 1px solid #111010; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 0px; border-top: none; padding-bottom: 15px; } #cat-nav-content ul.nav { float: right; margin-top: 10px; margin-left:18px; } #cat-nav-content ul.nav li { padding:0 17px 0 0; } #cat-nav-content ul.nav li a { padding: 8px 4px 21px; } #cat-nav-content ul.nav li.sf-ul a { padding: 8px 6px 21px 15px; } #cat-nav-content ul.nav > li.sf-ul { background: url(images/n-2/li-hover.png) no-repeat 55px right; } #cat-nav-content ul.nav > li.sf-ul > a { background: url(images/n-2/a-hover.png) no-repeat 55px left; } #cat-nav-content ul.nav > li.sf-ul.sfHover { background: url(images/n-2/li-hover.png) no-repeat top right; } #cat-nav-content ul.nav > li.sf-ul.sfHover > a { background: url(images/n-2/a-hover.png) no-repeat top left; display: block; } #cat-nav-content ul.nav li li { padding: 0px; } #cat-nav-content ul.nav ul ul { border-top: 1px solid #111010; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; } #cat-nav-content ul.nav li li a:hover { color: #00b7f3; } #cat-nav-content ul.nav li a {color: #fefefe; font-weight: bold; text-decoration: none; text-shadow: -1px -1px 1px #0a0a0a; text-align:right; } #cat-nav-content ul.nav ul li a { text-shadow: 1px 1px 1px #0a0a0a; } #cat-nav-content ul.nav > li > a:hover { } #cat-nav-content ul.nav li li {background: url(images/n-2/bullet.png) no-repeat 16px 21px; float:right; } #page-menu ul.nav li li { background:url("images/n-2/page-menu-bullet.png") no-repeat scroll 16px 16px transparent; } #page-menu ul.nav li a { padding: 8px 9px 16px; } #page-menu ul.nav > li > a.sf-with-ul:hover, #page-menu ul.nav > li.sfHover > a { background-color: #232323; } #page-menu ul.nav li li a { text-shadow: none; } #page-menu .nav li:hover ul, #page-menu ul.nav li.sfHover ul { left:0px; top:45px; } #page-menu .nav ul li:hover ul, #page-menu ul.nav ul li.sfHover ul { left:191px; top:-2px; } #cat-nav-content ul.nav li li a, #page-menu ul.nav li li a {background: url(images/n-2/n-2/divider.png) no-repeat bottom left; display: block; width: 156px; padding: 9px 5px 11px 28px !important; } #page-menu ul.nav li li a { background: none; padding: 0px 5px 0px 28px !important; } #cat-nav-right { background: url(images/n-2/n-2/cat-nav-right.png) no-repeat; width: 19px; height: 64px; float: left;} #cat-nav #search-form { float: left; width: 131px; background: url(images/n-2/n-2/search.png) no-repeat; height: 27px; margin-top: 15px;} #cat-nav #searchinput { background: none; border: none; font-style: none; color: #646464; padding-left: 12px; display: block; margin-top: 3px; float: left; width: 95px; } #cat-nav #searchsubmit { float:left; margin-top:7px; } #cat-nav #search-form img {float: right; margin-top: -24px; padding-right:10px;} #page-menu ul.nav ul { z-index: 10000; padding-bottom: 9px; background: #232323; border: 0px; padding-top: 2px; } #page-menu ul.nav ul ul { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; } ------------Thanks
This is a nice post. Really helpful
I also got similar info. in http://www.7tech.co.in/wordpress/how-to-add-a-wordpress-drop-down-menu-to-your-wordpress-theme/ which is also good.
Thanks for sharing ,i would really love to try this at the earliest on my new theme :).
Does the jQuery-code goes into functions.php?
No, you put it into js file then load it from header, it’s work as javascript code