There many instances you need UI to have tabbed menu. There are so many wonderful options to implement this.
- http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial
- http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/
Anyways, following is my simple version.
<html>
<head>
<title>Tab Select Widget Example</title>
<style type="text/css" >
.tabblu{color:#fff;font:bold 12px Arial;height:32px; position: relative; margin-top:2px; border-left:1px solid #fff; z-index: 2;}
.tabblu a{color:#fff;cursor: pointer;}
.tabblu ul{padding:0px!important; list-style:none;margin:0px 0px 0px 0px; text-align: center;}
.tabblu li{padding:10px 10px 6px 10px;float:left;border-right:1px solid #fff;background-color:#A6B7C9; border-bottom: 1px solid #ddd;}
.tmon{background-color:#fff !important; color:#8A8A8A;border:1px solid #ddd;border-bottom:1px solid #fff!important;background-image: none!important;border-right:1px solid #ddd!important;margin-left:-1px;margin-bottom:-4px; position:relative; z-index: 1;}
.tmon a{color:#8A8A8A; text-decoration: none;}
</style>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.js_toggling_tab a').click(function(event){
$(this).parents('ul').find('.tmon').removeClass('tmon').children('div').hide().end().children('a').show();
$(this).after('<div>'+this.text+'</div>').hide().parent().addClass('tmon');
event.preventDefault();
})
});
</script>
</head>
<body>
<div class="tabblu">
<ul>
<li class="js_toggling_tab "><a href="#">NYSE</a></li>
<li class="js_toggling_tab"><a href="#">NYSE Arca</a></li>
<li class="js_toggling_tab tmon"><a href="#">NYSE Amex</a></li>
<li class="js_toggling_tab"><a href="#">NYSE 2</a></li>
<li class="js_toggling_tab"><a href="#">NYSE 3</a></li>
<li class="js_toggling_tab"><a href="#">NYSE 4</a></li>
<li class="js_toggling_tab"><a href="#">NYSE 5</a></li>
<li class="js_toggling_tab"><a href="#">NYSE 6</a></li>
</ul>
</div>
<div>U can add any number of tabls. All u gotta do is to add a class 'js_toggling_tab' to it.</div>
</body>
</html>
No comments:
Post a Comment