Re: [jQuery] two level tabs

[waseem sabjee]

are you talking about their horizontal nav ?

that would be known as a super dropline menu
you can see the demo here :
http://www.cranshawmiddleton.co.uk/waxworks/index_ie6.html#nogo
<http://www.cranshawmiddleton.co.uk/waxworks/index_ie6.html#nogo>and the
code here : http://codingforums.com/showthread.php?t=170981

<http://codingforums.com/showthread.php?t=170981>the above mentioned is a
css version.

i would do it this way
done in 5 minutes.
you would have to style it yourself if you want to use it.

HTML
==========

<div class="menu">
 <div class="parentlevel">
  <div class="item"><h3><a href="#">Item</a></h3></div>
  <div class="item"><h3><a href="#">Item</a></h3></div>
  <div class="item"><h3><a href="#">Item</a></h3></div>
  <div class="item"><h3><a href="#">Item</a></h3></div>
   <br class="end" />
 </div>
 <div class="droplevel">
  <div class="drop">
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <br class="end" />
  </div>
  <div class="drop">
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <br class="end" />
  </div>
  <div class="drop">
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <br class="end" />
  </div>
  <div class="drop">
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <div class="item"><h3><a href="#">Item</a></h3></div>
   <br class="end" />
  </div>
 </div>
</div>

CSS
==============
<style type="text/css">
* {
margin:0;
padding:0;
font-size:11px;
font-weight:normal;
font-family:verdana;
line-height:1.5em;
}
a:link, a:visited {
 color:#900;
}
a:hover {
 color:#F00;
}
.item {
 float:left;
 margin:0 5px;
 padding:0 5px;
}
.drop {
display:none;
}
.end {
 clear:left;
 font-size:0;
 height:0;
}
</style>

jQuery
=============

<script type="text/javascript">
$(function() {
var obj = $(".menu");
var parentlevel = $(".parentlevel", obj);
var items = $(".item", parentlevel);
var current;
var drop = $(".drop", obj);
items.click(function(e) {
 e.preventDefault();
});
items.hover(function() {
 var index = items.index($(this));
 if(index != current) {
  drop.eq(index).show();
  current = index;
 }
}, function() {
 drop.eq(current).hide();
});
});
</script>

On Wed, Nov 25, 2009 at 11:35 AM, mreeves
<martin.ree...@focusdigital.co.uk>wrote:

> What would be the best way to go about producing a two level tab
> interface with jQuery like the one used on http://www.latimes.com/ ?
>
> Thanks
> Martin
>