Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   SEO Friendly Drop Down Menu Using JQuery (http://www.go4expert.com/articles/seo-friendly-drop-menu-using-jquery-t22914/)

shabbir 3Aug2010 14:35

SEO Friendly Drop Down Menu Using JQuery
 
1 Attachment(s)
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.

kien_vn 31Aug2010 12:19

Re: SEO Friendly Drop Down Menu Using JQuery
 
good solution for SEO

johnta 31Aug2010 17:44

Re: SEO Friendly Drop Down Menu Using JQuery
 
If the above script is SEO friendly just for adding H2,H3 . I can insert them with out javascript , am I right ,, thanx

kien_vn 31Aug2010 19:09

Re: SEO Friendly Drop Down Menu Using JQuery
 
Quote:

Originally Posted by johnta (Post 72173)
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.

shabbir 31Aug2010 19:17

Re: SEO Friendly Drop Down Menu Using JQuery
 
Quote:

Originally Posted by johnta (Post 72173)
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.

shabbir 4Sep2010 12:21

Re: SEO Friendly Drop Down Menu Using JQuery
 
Nominate this article for Article of the month - Aug 2010 before September 15 2010.

mikecriss 24Sep2010 01:58

Re: SEO Friendly Drop Down Menu Using JQuery
 
Nice work done.
Really good information to share for a newbie like me.

shabbir 29Sep2010 09:38

Re: SEO Friendly Drop Down Menu Using JQuery
 
Vote for this article for Article of the month - Aug 2010

Full Zip Hoody 30Sep2010 01:22

Re: SEO Friendly Drop Down Menu Using JQuery
 
seems tha i am not allowed to vote bu i would.. nice and useful post bro,

shabbir 30Sep2010 08:45

Re: SEO Friendly Drop Down Menu Using JQuery
 
Quote:

Originally Posted by Full Zip Hoody (Post 73231)
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.


All times are GMT +5.5. The time now is 22:39.