Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Gotowe rozwiązania _ Bootstrap horizontal scrolling tabs

Napisany przez: trifek 23.01.2019, 12:25:35

Witam.
Mam taki kod:

[HTML] pobierz, plaintext 
  1.  
  2. <http://december.com/html/4/element/div.html class="container">
  3.   <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>
  4.   <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>
  5.   <http://december.com/html/4/element/div.html class="wrapper">
  6.     <http://december.com/html/4/element/ul.html class="nav nav-tabs list" id="myTab">
  7.       <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>
  8.       <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>
  9.       <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>
  10.       <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>
  11.       <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>
  12.       <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>
  13.       <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>
  14.       <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>
  15.       <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>
  16.       <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>
  17.       <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>
  18.       <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>
  19. 	  <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>
  20.       <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>
  21.       <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>
  22. 	  <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>
  23.       <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>
  24.       <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>
  25.   </http://december.com/html/4/element/ul.html>
  26.   </http://december.com/html/4/element/div.html>
  27. </http://december.com/html/4/element/div.html>
  28.  
  29.  
  30. wrapper {
  31.     position:relative;
  32.     margin:0 auto;
  33.     overflow:hidden;
  34. 	padding:5px;
  35.   	height:50px;
  36. }
  37.  
  38. .list {
  39.     position:absolute;
  40.     left:0px;
  41.     top:0px;
  42.   	min-width:3000px;
  43.   	margin-left:12px;
  44.     margin-top:0px;
  45. }
  46.  
  47. .list li{
  48. 	display:table-cell;
  49.     position:relative;
  50.     text-align:center;
  51.     cursor:grab;
  52.     cursor:-webkit-grab;
  53.     color:#efefef;
  54.     vertical-align:middle;
  55. }
  56.  
  57. .scroller {
  58.   text-align:center;
  59.   cursor:pointer;
  60.   display:none;
  61.   padding:7px;
  62.   padding-top:11px;
  63.   white-space:no-wrap;
  64.   vertical-align:middle;
  65.   background-color:#fff;
  66. }
  67.  
  68. .scroller-right{
  69.   float:right;
  70. }
  71.  
  72. .scroller-left {
  73.   float:left;
  74. }
  75.  
  76.  
  77.    .tabs-left, .tabs-right {
  78.             border-bottom: none;
  79.             padding-top: 2px;
  80.         }
  81.         .tabs-left {
  82.             border-right: 1px solid #ddd;
  83.         }
  84.         .tabs-right {
  85.             border-left: 1px solid #ddd;
  86.         }
  87.         .tabs-left>li, .tabs-right>li {
  88.             float: none;
  89.             margin-bottom: 2px;
  90.         }
  91.         .tabs-left>li {
  92.             margin-right: -1px;
  93.         }
  94.         .tabs-right>li {
  95.             margin-left: -1px;
  96.         }
  97.         .tabs-left>li.active>a,
  98.         .tabs-left>li.active>a:hover,
  99.         .tabs-left>li.active>a:focus {
  100.             border-bottom-color: #ddd;
  101.             border-right-color: transparent;
  102.         }
  103.  
  104.         .tabs-right>li.active>a,
  105.         .tabs-right>li.active>a:hover,
  106.         .tabs-right>li.active>a:focus {
  107.             border-bottom: 1px solid #ddd;
  108.             border-left-color: transparent;
  109.         }
  110.         .tabs-left>li>a {
  111.             border-radius: 4px 0 0 4px;
  112.             margin-right: 0;
  113.             display:block;
  114.         }
  115.         .tabs-right>li>a {
  116.             border-radius: 0 4px 4px 0;
  117.             margin-right: 0;
  118.         }
  119.         .sideways {
  120.             margin-top:50px;
  121.             border: none;
  122.             position: relative;
  123.         }
  124.         .sideways>li {
  125.             height: 20px;
  126.             width: 120px;
  127.             margin-bottom: 100px;
  128.         }
  129.         .sideways>li>a {
  130.             border-bottom: 1px solid #ddd;
  131.             border-right-color: transparent;
  132.             text-align: center;
  133.             border-radius: 4px 4px 0px 0px;
  134.         }
  135.         .sideways>li.active>a,
  136.         .sideways>li.active>a:hover,
  137.         .sideways>li.active>a:focus {
  138.             border-bottom-color: transparent;
  139.             border-right-color: #ddd;
  140.             border-left-color: #ddd;
  141.         }
  142.         .sideways.tabs-left {
  143.             left: -50px;
  144.         }
  145.         .sideways.tabs-right {
  146.             right: -50px;
  147.         }
  148.         .sideways.tabs-right>li {
  149.             -webkit-transform: rotate(90deg);
  150.             -moz-transform: rotate(90deg);
  151.             -ms-transform: rotate(90deg);
  152.             -o-transform: rotate(90deg);
  153.             transform: rotate(90deg);
  154.         }
  155.         .sideways.tabs-left>li {
  156.             -webkit-transform: rotate(-90deg);
  157.             -moz-transform: rotate(-90deg);
  158.             -ms-transform: rotate(-90deg);
  159.             -o-transform: rotate(-90deg);
  160.             transform: rotate(-90deg);
  161.         }
  162.         .showTab{
  163.             display: block !important;
  164.         }
  165.         .hideTab{
  166.             display: none !important;
  167.         }
  168.  
  169.  
  170.  
  171.  
  172. var hidWidth;
  173. var scrollBarWidths = 40;
  174.  
  175. var widthOfList = function(){
  176.   var itemsWidth = 0;
  177.   $('.list li').each(function(){
  178.     var itemWidth = $(this).outerWidth();
  179.     itemsWidth+=itemWidth;
  180.   });
  181.   return itemsWidth;
  182. };
  183.  
  184. var widthOfHidden = function(){
  185.   return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
  186. };
  187.  
  188. var getLeftPosi = function(){
  189.   return $('.list').position().left;
  190. };
  191.  
  192. var reAdjust = function(){
  193.   if (($('.wrapper').outerWidth()) < widthOfList()) {
  194.     $('.scroller-right').show();
  195.   }
  196.   else {
  197.     $('.scroller-right').hide();
  198.   }
  199.  
  200.   if (getLeftPosi()<0) {
  201.     $('.scroller-left').show();
  202.   }
  203.   else {
  204.     $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
  205.   	$('.scroller-left').hide();
  206.   }
  207. }
  208.  
  209. reAdjust();
  210.  
  211. $(window).on('resize',function(e){  
  212.   	reAdjust();
  213. });
  214.  
  215. $('.scroller-right').click(function() {
  216.  
  217.   $('.scroller-left').fadeIn('slow');
  218.   $('.scroller-right').fadeOut('slow');
  219.  
  220.   $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
  221.  
  222.   });
  223. });
  224.  
  225. $('.scroller-left').click(function() {
  226.  
  227. 	$('.scroller-right').fadeIn('slow');
  228. 	$('.scroller-left').fadeOut('slow');
  229.  
  230.   	$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
  231.  
  232.   	});
  233. });    
  234.  
  235.  
  236.  
[HTML] pobierz, plaintext


Podgląd: https://codepen.io/srees/pen/pgVLbm


Powyższy kod tworzy poziome menu z możliwością przesuwania na boki (lewo/prawo).

Chciałbym obrócić to menu z poziomego na pionowe + pozycje menu żeby przesuwały się zamiast lewo/prawo - to w górę/w dół.

Wie ktoś może jak to zrobić?


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)