Witam.
Mam taki kod:
<http://december.com/html/4/element/div.html class="container"> <http://december.com/html/4/element/div.html class="scroller scroller-left"><http://december.com/html/4/element/i.html class="glyphicon glyphicon-chevron-left"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="scroller scroller-right"><http://december.com/html/4/element/i.html class="glyphicon glyphicon-chevron-right"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="wrapper"> <http://december.com/html/4/element/ul.html class="nav nav-tabs list" id="myTab"> <http://december.com/html/4/element/li.html class="active"><http://december.com/html/4/element/a.html href="#home">Home</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#profile">Profile</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#messages">Messages</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#settings">Settings</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab4</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab5</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab6</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab7</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab8</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab9</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab10</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab11</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab12</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab13</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab14</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab15</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab16</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html href="#">Tab17</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> </http://december.com/html/4/element/ul.html> </http://december.com/html/4/element/div.html> </http://december.com/html/4/element/div.html> wrapper { position:relative; margin:0 auto; overflow:hidden; padding:5px; height:50px; } .list { position:absolute; left:0px; top:0px; min-width:3000px; margin-left:12px; margin-top:0px; } .list li{ display:table-cell; position:relative; text-align:center; cursor:grab; cursor:-webkit-grab; color:#efefef; vertical-align:middle; } .scroller { text-align:center; cursor:pointer; display:none; padding:7px; padding-top:11px; white-space:no-wrap; vertical-align:middle; background-color:#fff; } .scroller-right{ float:right; } .scroller-left { float:left; } .tabs-left, .tabs-right { border-bottom: none; padding-top: 2px; } .tabs-left { border-right: 1px solid #ddd; } .tabs-right { border-left: 1px solid #ddd; } .tabs-left>li, .tabs-right>li { float: none; margin-bottom: 2px; } .tabs-left>li { margin-right: -1px; } .tabs-right>li { margin-left: -1px; } .tabs-left>li.active>a, .tabs-left>li.active>a:hover, .tabs-left>li.active>a:focus { border-bottom-color: #ddd; border-right-color: transparent; } .tabs-right>li.active>a, .tabs-right>li.active>a:hover, .tabs-right>li.active>a:focus { border-bottom: 1px solid #ddd; border-left-color: transparent; } .tabs-left>li>a { border-radius: 4px 0 0 4px; margin-right: 0; display:block; } .tabs-right>li>a { border-radius: 0 4px 4px 0; margin-right: 0; } .sideways { margin-top:50px; border: none; position: relative; } .sideways>li { height: 20px; width: 120px; margin-bottom: 100px; } .sideways>li>a { border-bottom: 1px solid #ddd; border-right-color: transparent; text-align: center; border-radius: 4px 4px 0px 0px; } .sideways>li.active>a, .sideways>li.active>a:hover, .sideways>li.active>a:focus { border-bottom-color: transparent; border-right-color: #ddd; border-left-color: #ddd; } .sideways.tabs-left { left: -50px; } .sideways.tabs-right { right: -50px; } .sideways.tabs-right>li { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .sideways.tabs-left>li { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .showTab{ display: block !important; } .hideTab{ display: none !important; } var hidWidth; var scrollBarWidths = 40; var widthOfList = function(){ var itemsWidth = 0; $('.list li').each(function(){ var itemWidth = $(this).outerWidth(); itemsWidth+=itemWidth; }); return itemsWidth; }; var widthOfHidden = function(){ return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths; }; var getLeftPosi = function(){ return $('.list').position().left; }; var reAdjust = function(){ if (($('.wrapper').outerWidth()) < widthOfList()) { $('.scroller-right').show(); } else { $('.scroller-right').hide(); } if (getLeftPosi()<0) { $('.scroller-left').show(); } else { $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow'); $('.scroller-left').hide(); } } reAdjust(); $(window).on('resize',function(e){ reAdjust(); }); $('.scroller-right').click(function() { $('.scroller-left').fadeIn('slow'); $('.scroller-right').fadeOut('slow'); $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){ }); }); $('.scroller-left').click(function() { $('.scroller-right').fadeIn('slow'); $('.scroller-left').fadeOut('slow'); $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){ }); });
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)