Jquery Tab Overflow Plugin

Resize your browser window to see the tab overflow in action. Use the markup below for the Menu and the JS plugin will do the rest of the dom manipulation. Gives you a quick dropdown menu and scrolling tabs when screen is too small too see them all.

The JS

The CSS

body{
		font-size:11px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		text-align:center;
		line-height:14px;
		background: #666;
	}
	
	#container{
		text-align:left;	
		margin:20px;
		border:1px solid #CCC;
		min-height:500px;
		background:#fff;
	}
		
	/* Some resets and basic utilities */
	*{
		margin:0;
		padding:0;
	}
	
	.tabHeader {
		position:relative;
		padding: 10px 10px 0 10px;
		background: #FFF url(images/navItemBg.gif) repeat-x left bottom;
		clear: both;
		border-bottom: 1px solid #999;
	}
	
	.tabHeader h1{	
		font-size:14px;
		padding:10px 0;
		color:#666;
		text-shadow:1px 1px 1px #ccc;
	}
	
	.content{
		padding:25px;	
	}
	
	/*Sub Nav Tabs*/
	.tabbedMenuWrap {
		position:relative;
	}	
		
	.tabbedScrollWrap {
		position:relative;
		top:1px;
		overflow:hidden; 
		height:27px;
	}
	
	.scrollArrows{
		position:absolute;
		bottom:-1px;
		z-index:10;
		background:url(images/tabOverflowArrows.gif) repeat-x -15px 0px ;
		color:#FFFFFF;
		text-align:center;
		display:block;
		width:15px;
		height:25px;
		text-decoration:none;
	}
	
	.scrollArrows:hover{
		background-position:-15px -25px;
	}
	
	.menuScrollLeft{
		left:-10px;
		border-left:none;
		background-position:0px 0;
	}
	.menuScrollLeft:hover{
		background-position:0px -25px;
		}
	
	.menuScrollRight{
		right:-10px;
		border-right:none;
	}
	
	.tabbedMenu {
		margin: 0;
		height: 26px;
		border-left: 0px solid #cecece;
		position: relative;
		top: 1px;
		background:#;
	}
	
	.tabbedMenu li {
		list-style-type: none;
		float: left;
		border: 1px solid #cecece;
		border-bottom: none;
		border-left: none;
		position: relative;
		top: 2px;
		white-space: nowrap;
	}
	.tabbedMenu li:first-child {
		border-left:1px solid #CECECE;
	}
	
	.tabbedMenu li.selected {
		border-color: #999;
		border-left: 1px solid #999;
		border-right: 1px solid #999;
		top: 1px;
	}
	
	.tabbedMenu li a {
		display:block;
		float:left;
		padding: 4px 15px;
		color: #999;
		background:url(images/navItemBg.gif) repeat-x  left 0px #FFFFFF;	
		text-decoration: none;
		text-shadow:0px 1px 0px  #fff;
	}
	.tabbedMenu li a:hover {
		background-position:left 20px;
		color: #666;
		}
	
	.tabbedMenu li.selected a {
		padding: 5px 15px;
		color: #666;
		font-weight:bold;
		background: #fff;	
	}
	
	.tabList{
		position:absolute;
		top:-3px;
		right:-10px;
		z-index:30;
	
	}
	
	.tabListLink{
		position:absolute;
		top:0;
		right:0px;
		width:15px;
		height:10px;
		background: url(images/tabListArrow.gif) no-repeat 0 0;
		display:block;
		text-decoration:none;
	}
	.tabListLink:hover{
		background-color:#EAF0F6;
	}
	.tabListLink:focus{
		background-position: -15px -10px;
		background-color:#799FC5;
	}
	
	.tabList ul {
		display:none;
		margin: 0;
		height:auto;
		width:200px;
		position: relative;
		top:10px;
		border: 1px solid #799FC5;	
		background:#EAF0F6;
	}
	
	.tabList ul li {
		position:static;
		list-style-type: none;
		float: none;
		border: 0px solid #cecece;	
		border-bottom: 1px dotted #FFF;
		top:0;
	}
	
	.tabList ul li a {
		display:block;
		float:none;
		padding: 4px 15px;
		color: #999;
		text-decoration: none;
	}
	
	.tabList li.selected a {
		background:#FFFFFF url(images/navItemBg.gif) repeat-x  left 0px ;	
	}
	
	.tabList li a:hover {
		background:#FFFFFF url(images/navItemBg.gif) repeat-x left 10px;
		color: #666;
		}

The Markup

<div class="tabHeader"> 
        <h1>
            Jquery Tab Overflow Plugin  - Create Firefox like Tabs
        </h1>   
        <ul class="tabbedMenu">
            <li >
                <a href="#" id="navLink_1">Tab 1</a>
            </li>  
            
            <li>
                <a href="#" id="navLink_2">Tab 2</a>
            </li> 
            
            <li class="selected">
                <a href="#" id="navLink_3">Tab 3</a>
            </li> 			
            
            <li>
                <a href="#" id="navLink_4">Tab 4</a>
            </li> 			
            
            <li>
                <a href="#" id="navLink_5">Tab 5</a>
            </li> 		
            
            <li>
                <a href="#" id="navLink_6">Tab 6</a>
            </li> 
            
            <li>
                <a href="#" id="navLink_7">Tab 7</a>
            </li> 			
            
            <li>
                <a href="#" id="navLink_8">Tab 8</a>
            </li> 			
            
            <li>
                <a href="#" id="navLink_9">Tab 9</a>
            </li> 	            	
        </ul>
    </div>