Shaikh Sonny Aman’s Blog

previously www.mailtoaman.com

CSS tab style submenu with jquery

Posted on | March 6, 2008 |

Undoubtedly CSS is a powerful way to produce lightweight and slick effects on web sites. Not only good look, enhanced usability can be achieved by using CSS at a very low bandwidth… you won’t need lotz of javascripts. But, to enable interactivity with the user, their should be some sort of scripting. Thats the role that can be performed by jQuery in some seconds.

I know, there are lots of example on the web on my post topic. There are also some those can used freely. Then what the heck I am wasting my time to invent the wheel again ? Actually I am not inventing the wheel, I will just create another wheel, hope thats not offend you as there are many brands of wheel in the market!

Anyhow, I am not making the wheel from scratch. I was stepped into http://homelesspixel.de/tabs/. There I likd the css tab menu, I was looking for something almost similar to that:

CSS Tab menu

Unfortunately, there was no way to change the menu items. So I added another submenu under a link and a css class “inv” which has its ‘visibility’ attribute set to ‘hidden’.

The menu structure is like this:

<ul id=”topnav”>
<li><a id=”a0″ href=”#”>Home</a></li>
……
<li><a id=”a4″ href=”#” class=”here”>Process</a>
<ul id=”subnav”>
<li><a href=”#”>Vision</a></li>
<li><a href=”#”>Team</a></li>
….
</ul>
</li>
<li><a id=”a5″ href=”#” >Expertise</a>
<ul id=”subnav”>
<li><a href=”#”>Vision</a></li>
<li><a href=”#”>Team</a></li>
…..
</ul>
</li>

</ul>

If an ‘a’ has the class ‘here’ , it is highlighted.

I updated the css to make all the subnav are invisible by adding ‘visibility’ attribute with ‘hidden’ value.

Now, comes the jQuery to play its role. Lets first define whats I am need to do:

  1. bind a function to ‘click’ event of the ‘a‘ clicked.
  2. Remove highlight from all the ‘a’.
  3. Hide all the subnav’s.
  4. Set the currently clicked ‘a’ highlighted.
  5. Set its subnav visible.

Now, these steps are done in the following script:

$(document).ready(function()
{
$(’#topnav li > a’).bind(’click’, function()
{
$(’#topnav li > a’).removeClass(’here’);
$(’#topnav li > ul’).css(’visibility’,'hidden’);

$(this).addClass(’here’);$(’#topnav li > ul’).css(’visibility’,'visible’);

});
});
Bingo!!! Now I have my own tab style menu using CSS and jQuery.

Please feel free to use it if you ever need and do give your comment. I would really appreciate if you can show me a better way.

Good night.

Category: CSS, JavaScript, jQuery
Tags: > > > >

Comments

4 Responses to “CSS tab style submenu with jquery”

  1. Personal Loan
    March 29th, 2008 @ 12:21 am

    Your comment about s Blog. is intriquing.

  2. youreviltwin
    April 6th, 2008 @ 11:14 am

    When you don’t have a clue on the topic, don’t even try to write anything! First find out what people are talking about, and then write what you think!!!

  3. Suzie Cheel
    April 9th, 2008 @ 2:11 am

    Huh… Slightly addled, but on the whole I like this post. You’ve got some fresh ideas. But please, write more lucid.

  4. Shaikh Sonny Aman
    April 13th, 2008 @ 11:53 am

    Hey Muscle Builder,
    thank you for your visit.

    I did not give a zip cause the original code can be
    found at http://homelesspixel.de/tabs/ as mentioned in the post.

    From now on I will upload demo for such posts.
    Thank you for your advice.

Leave a Reply