Tabify content menu nav floated to the left and content shown on the right(floated left) depending on tab ID
(function($){
$.fn.extend({
tabify: function() {
function getHref(el){
hash = $(el).find('a').attr('href');
if(hash)
return hash.substring(0,hash.length-4);
else
return false;
}
function setActive(el){
$(el).addClass('active');
if(getHref(el))
$(getHref(el)).show();
else
return false;
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
return this.each(function() {
var self = this;
$(this).find('li>a').each(function(){
$(this).attr('href',$(this).attr('href') + '-tab');
});
function handleHash(){
if(location.hash)
setActive($(self).find('a[href=' + location.hash + ']').parent());
}
if(location.hash)
handleHash();
setInterval(handleHash,100);
$(this).find('li').each(function(){
if($(this).hasClass('active'))
$(getHref(this)).show();
else
$(getHref(this)).hide();
});
});
}
});
})(jQuery);
<ul id="menu-nav">
<li class="active"><a href="#appetizers">Appetizers</a></li>
<li><a href="#pasta">Pasta Dishes</a></li>
<li><a href="#baked">Baked Pasta</a></li>
<li><a href="#tortellini">Tortellini</a></li>
<li><a href="#entrees">Entrees</a></li>
<li><a href="#seafood">Seafood</a></li>
<li><a href="#side">Side Dishes</a></li>
<li><a href="#pizza">Pizza</a></li>
<li><a href="#mikes">Mike's Pizzas</a></li>
<li><a href="#subs">Subs</a></li>
<li><a href="#desserts">Desserts</a></li>
<li><a href="#bev">Beverages</a></li>
<li><a href="#cate">Catering</a></li>
</ul>
<div id="appetizers" class="contents">
<ul class="foods">
<li><span class="price">$3.75</span><h3>French Fries</h3></li>
<li><span class="price">$8.95</span><h3>Chicken Fingers</h3><em class="desc">(with honey mustard)</em></li>
<li><span class="price">$9.25</span><h3>Fried Mozzarella</h3><em class="desc">(tomato sauce)</em></li>
<li><span class="price">$10.25</span><h3>Fried Calamari</h3></li>
<li><span class="price">$7.95</span><h3>Antipasto Salad</h3><em class="desc">(Small $7.95 Large $9.95)</em></li>
<li><span class="price">$5.95</span><h3>Tossed Salad</h3></li>
<li><span class="price">$6.25</span><h3>Caesar Salad</h3><em class="desc">(with Chicken $9.25)</em></li>
<li><span class="price">$3.25</span><h3>Minestrone Soup</h3><em class="desc">(Cup $3.25 Bowl $4.95)</em></li>
<li><span class="price">$3.25</span><h3>Pasta & Fagioli Salad</h3><em class="desc">(Cup $3.25 Bowl $4.95)</em></li>
<li><span class="price">$9.95</span><h3>Fresh Mozzarella Salad</h3></li>
<li><span class="price">$12.95</span><h3>Mussels Marinara</h3></li>
<li><span class="price">$2.95</span><h3>Garlic Rolls</h3><em class="desc">(Half Dozen $2.95, Dozen $4.95)</em></li>
<li><span class="price">$9.95</span><h3>Chicken Wings</h3></li>
<li><span class="price">$5.95</span><h3>Bruschetta</h3></li>
</ul>
</div>
<div id="pasta" class="contents">
<ul class="foods">
<p>Choose your favorite pasta: Spaghetti, Ziti, Linguini, or Fettucini. Served with a cup of soup or salad and three garlic rolls.</p>
<h2>Choice of Sauce:</h2>
<li><span class="price">$12.50</span><h3>Tomato Sauce</h3></li>
<li><span class="price">$12.50</span><h3>Marinara</h3></li>
<li><span class="price">$13.25</span><h3>Meatball</h3></li>
<li><span class="price">$13.25</span><h3>Sausage</h3></li>
<li><span class="price">$13.25</span><h3>Meat Sauce</h3></li>
<li><span class="price">$12.50</span><h3>Garlic and Oil </h3></li>
<li><span class="price">$13.25</span><h3>Mushroom</h3></li>
<li><span class="price">$13.75</span><h3>Carbonara</h3></li>
<li><span class="price">$14.50</span><h3>Chicken and Broccoli</h3></li>
<li><span class="price">$13.50</span><h3>Pesto Sauce</h3></li>
<li><span class="price">$13.50</span><h3>Pink Sauce</h3></li>
<li><span class="price">$13.50</span><h3>Alfredo Sauce</h3></li>
<li><span class="price">$14.75</span><h3>Montagnola</h3></li>
<li><span class="price">$14.25</span><h3>Vodka Sauce</h3></li>
<li><span class="price">$14.95</span><h3>Penne al Pesto Siciliana</h3></li>
<li><span class="price">$2.00</span><h3>Baked</h3><em class="desc">(Add for: Shrimp $4.00 Chicken $3.00)</em></li>
</ul>
</div>
<script src="http://mikespizzaofkendall.com/wp-content/themes/mp/js/tabs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function () {
$('#menu-nav').tabify();
});
// ]]>
</script>
#menu-nav {
padding: 0;
float: left;
width: 238px;
min-width: 238px;
background: #680b03;
min-height: 660px;
}
.contents {
float: left;
width: 300px;
padding-left: 30px;
}