Creating Stylish Drop down Menu with Wordpress Bookmarks

Creating Stylish Drop down Menu with WordPress Bookmarks

In this tutorial we will take a look at how to build dynamic drop down menu for wordpress based on wordpress links. We will customize wordpress built-in api to generate the code for the drop down or sub menu.

wordpress-drop-down-final

A month back, Antonio Lupetti [Woorkup] showed us a cool dropdown menu technique. I used the same technique to integrate it into wordpress and turn the bookmarks into a stylish submenu with some modifications. I have used CSS to style/block the submenu items. It’s very nice and very effective from search engine point of view because everything is text based.

So lets get started.

We will use WordPress built-in API to generate the menu for us.

<?php wp_list_bookmarks('title_li=&categorize=0&title_before=<li>&title_after=</li>'); ?>

We have added

&title_before, &title_after

which help us block the items in

<li>item</li>

tags, this way it will be easy for us to style them.

Our Markup

<div class="page-navi">
   <ul>
	<li><a href="#">home</a></li>
	<li><a href="#">About me</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Galleries</a>
             <ul class="submenu">
          <?php wp_list_bookmarks('title_li=&categorize=0&title_before=<li>&title_after=</li>'); ?>
             </ul>
        </li>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">Contact</a></li>
   </ul>
</div>

CSS Code for main nav

.page-navi
{
	float: right;
	width: 504px;
	margin-right: -19px;
        color: #BABABA;
	font-family: "Trajan Pro", georgia, "Times New Roman", times, serif;
	font-size: 12.4px;
	font-style: normal;
	font-weight: bold;
	letter-spacing: 0.2px;
	line-height: 1.5em;
}
.page-navi UL LI
{
	float: left;
}
.page-navi UL
{
	margin-right: 0;
	margin-right: 2px;
	margin-top: 6px;
}
.page-navi LI
{
	margin-left: 12px;
}
.page-navi A
{
	color: #777777;
	font-size: 11px;
	line-height: 13px;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
}
.page-navi A:hover
{
	color: #007AA8;
	text-decoration: none;
}

This will create our basic menu, now lets style the submenu

CSS for Submenu

.page-navi UL LI UL
{
	padding: 0px 10px 10px 0;
	margin-top: 14px;
}
.page-navi UL LI UL LI
{
	float: none;
	margin-top: 6px;
	margin-left: 10px;
}
.page-navi UL LI UL LI A:link, .page-navi UL LI UL LI A:visited
{
	color: #555;
	padding: 8px;
	width: 156px;
	display: block;
}
.page-navi UL LI UL LI A:hover
{
	color: #3B5998;
	background: #EBEFF7;
}
.submenu
{
	position: absolute;
	display: none;
	line-height: 23px;
	z-index: 1000;
	top: 39px;
	background-color: #020202;
}

You can see that display property of submenu is set to none, we will use jQuery to Show / Hide the Submenu

<script type="text/javascript">
function nav(){
$('div.page-navi ul li').mouseover(function() {
$(this).find('ul:first').show();
});
 
$('div.page-navi ul li').mouseleave(function() {
$('div.page-navi ul li ul').hide();
});
 
$('div.page-navi ul li ul').mouseleave(function() {
$('div.page-navi ul li ul').hide();
});
};
 
$(document).ready(function() {
nav();
});
</script>

Hope this technique helps you.

Author: Tamuir khan

I am a Designer and Web Developer at Emrialo, I have been in this industry for over 5 years now. Im a Mac Fanatic + i love playing cards.

Tags: CSS, Tutorials, Wordpress

Share and Enjoy:

This entry was posted on Tuesday, November 10th, 2009 at 8:33 am

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.

Mayank says:

December 22, 2009 at 9:21 am

Hey, My client is using IE6 please tell, will this script work with IE6? Please reply soon I am in big trouble.

Thanks in Advance!!

Mayank

Tamuir khan says:

January 15, 2010 at 3:34 am

Yes it will work perfectly for IE6 and above but you might have to tweak css to make it work with IE6