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: <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.
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.
No not only because of that but this script does not have any other code JS code to make the effects.