SEO Friendly Drop Down Menu Using JQuery

shabbir's Avatar author of SEO Friendly Drop Down Menu Using JQuery
This is an article on SEO Friendly Drop Down Menu Using JQuery in JavaScript and AJAX.
Non-JavaScript Programmers find it difficult to have fancy drop down menu's but not any more. Today I will show you how easy it is to create a simple yet very SEO Friendly Drop Down Menu Using JQuery.

The idea of this article came from the thread started by siddharthrkulkarni on Drop Down Menu.


You can Download the complete sample or see it live in action here.

First the HTML
HTML Code:
<ul id="menu">
	<li>
		<h2><a href="#">Home</a></h2>
	</li>
	<li class="subMenu">
		<h2><a href="#">Articles</a></h2>
		<div>
			<h3>Programming</h3>
			<p><a href="#">C-C++</a> <a href="#">Java</a> <a href="#">Visual Basic</a> <a href="#">PERL</a></p>
			<h3>Web Development</h3>
			<p><a href="#">PHP</a> <a href="#">ASP</a> <a href="#">JSP</a></p>
		</div>
	</li>
	<li class="subMenu">
		<h2><a href="#">Useful Links</a></h2>
		<div>
			<h3>Resources</h3>
			<p><a href="#">Today's Topics</a> <a href="#">Unanswered topics</a> <a href="#">Rules</a></p>
			<h3>Community</h3>
			<p><a href="#">Groups</a> <a href="#">Album</a> <a href="#">Buddies</a></p>
			<h3>Link With Message</h3>
			<p>Check Out Go4Expert's New <a href="#">Jobs Board</a></p>
		</div>
	</li>
</ul>
You can see that the above code is very SEO friendly. Each list item or li with an h2 tag will act as a top level menu item and the div just after that acts as menu body with needed links.
Now let us apply the CSS to make it look like we want it. I have added the comments on each styling so you can change as you like.
HTML Code:
body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
	font-size: 11px;
	color: #333;
}
/* Menu background and font */
ul#menu {
	background: #000;
	color: #FFF;
	margin: 0;
	padding: 0.3em 0em;
}
/* Make list go horizontal */
ul#menu li {
	display: inline;
	margin: 0.1em 1em;
	position: relative;
}
/* Reduce fonts size of Hx for better looking menu as well as making it SEO friendly */
ul#menu h2,ul#menu h3 {
	font-size: 1em;
	font-weight: bold;
	display: inline;
}
/* Links in menu without a submenu */
ul#menu li a {
	color: #FFF;
	text-decoration: none;
	padding: 0 0.4em;
}
ul#menu li a:hover {
	text-decoration: underline;
}
/* Links in menu with a submenu to show the drop down image */
ul#menu li.subMenu a {
	background: transparent url(menu_open.gif) center right no-repeat;
	padding: 0 1.2em;
}
ul#menu li.subMenu a:hover {
	text-decoration: underline;
}
/* Hide all the sub menu div and apply style */
ul#menu div {
	display: none;
}
ul#menu li.subMenu div {
	border: 1px solid #fff;
	width: 18em;
	position: absolute;
	top: 1.5em;
	left: 1em;
	padding: 1.3em;
	background: #000;
	color: #FFF;
}
/* JQuery Class which we will add */
ul#menu li.hovered div {
	display: block;
}
/* One line per link */
ul#menu li.subMenu div a {
	color: #FFC;
	padding: 0;
	background-image: none;
	text-decoration: underline;
	display:block;
}
/* Menu headings */
ul#menu div h3 {
	color: #f80;
	font-weight: bold;
	font-size: 1.2em;
}
/* sub menu links within p shows with a padding */
ul#menu div p {
	margin: 0 0 0.8em 0;
	padding: 0 0.5em;
}
And finally the Script.
HTML Code:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	function showSubMenu(){
		$(this).addClass("hovered");
	}
	function hideSubMenu(){
		$(this).removeClass("hovered");
	}
	$("li.subMenu").hover(showSubMenu,hideSubMenu)
});
</script>
The script just adds and removes the CSS property to toggle the menu item container.

Wasn't that quite simple. Share your thoughts in comments below.
Attached Files
File Type: zip drop-down-menu.zip (20.9 KB, 105 views)
0
kien_vn's Avatar, Join Date: Aug 2010
Go4Expert Member
good solution for SEO
0
johnta's Avatar, Join Date: Aug 2010
Light Poster
If the above script is SEO friendly just for adding H2,H3 . I can insert them with out javascript , am I right ,, thanx
0
kien_vn's Avatar, Join Date: Aug 2010
Go4Expert Member
Quote:
Originally Posted by johnta View Post
If the above script is SEO friendly just for adding H2,H3 . I can insert them with out javascript , am I right ,, thanx
Yes, you can use only style sheet element for your menu display. It's good, but sometime use javascript is necessary.
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Quote:
Originally Posted by johnta View Post
If the above script is SEO friendly just for adding H2,H3 . I can insert them with out javascript , am I right ,, thanx
No not only because of that but this script does not have any other code JS code to make the effects.
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Nominate this article for Article of the month - Aug 2010 before September 15 2010.
0
mikecriss's Avatar, Join Date: Jan 2009
Light Poster
Nice work done.
Really good information to share for a newbie like me.
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Vote for this article for Article of the month - Aug 2010
0
Full Zip Hoody's Avatar, Join Date: Sep 2010
Go4Expert Member
seems tha i am not allowed to vote bu i would.. nice and useful post bro,
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Quote:
Originally Posted by Full Zip Hoody View Post
seems tha i am not allowed to vote bu i would.. nice and useful post bro,
Voting is for members with more than 25 posts.