jcadima
3/10/2015 - 2:48 PM

Tabify content menu nav floated to the left and content shown on the right(floated left) depending on tab ID

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;
}