1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

SEO Friendly Drop Down Menu Using JQuery

Discussion in 'JavaScript and AJAX' started by shabbir, Aug 3, 2010.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,285
    Likes Received:
    364
    Trophy Points:
    83
    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.

    [​IMG]

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

    First the HTML
    HTML:
    <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:
    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:
    <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:

  2. kien_vn

    kien_vn New Member

    Joined:
    Aug 31, 2010
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    0
    good solution for SEO
     
  3. johnta

    johnta New Member

    Joined:
    Aug 30, 2010
    Messages:
    8
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    If the above script is SEO friendly just for adding H2,H3 . I can insert them with out javascript , am I right ,, thanx
     
  4. kien_vn

    kien_vn New Member

    Joined:
    Aug 31, 2010
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    0
    Yes, you can use only style sheet element for your menu display. It's good, but sometime use javascript is necessary.
     
  5. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,285
    Likes Received:
    364
    Trophy Points:
    83
    No not only because of that but this script does not have any other code JS code to make the effects.
     
  6. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,285
    Likes Received:
    364
    Trophy Points:
    83
  7. mikecriss

    mikecriss New Member

    Joined:
    Jan 14, 2009
    Messages:
    8
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    Nice work done.
    Really good information to share for a newbie like me.
     
  8. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,285
    Likes Received:
    364
    Trophy Points:
    83
  9. Full Zip Hoody

    Full Zip Hoody New Member

    Joined:
    Sep 29, 2010
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Programer
    Location:
    US of A
    seems tha i am not allowed to vote bu i would.. nice and useful post bro,
     
  10. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,285
    Likes Received:
    364
    Trophy Points:
    83
    Voting is for members with more than 25 posts.
     

Share This Page