Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Bootstrap horizontal scrolling tabs
trifek
post 23.01.2019, 12:25:35
Post #1





Grupa: Zarejestrowani
Postów: 340
Pomógł: 0
Dołączył: 28.09.2015

Ostrzeżenie: (0%)
-----


Witam.
Mam taki kod:
  1.  
  2. <div class="container">
  3. <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
  4. <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
  5. <div class="wrapper">
  6. <ul class="nav nav-tabs list" id="myTab">
  7. <li class="active"><a href="#home">Home</a></li>
  8. <li><a href="#profile">Profile</a></li>
  9. <li><a href="#messages">Messages</a></li>
  10. <li><a href="#settings">Settings</a></li>
  11. <li><a href="#">Tab4</a></li>
  12. <li><a href="#">Tab5</a></li>
  13. <li><a href="#">Tab6</a></li>
  14. <li><a href="#">Tab7</a></li>
  15. <li><a href="#">Tab8</a></li>
  16. <li><a href="#">Tab9</a></li>
  17. <li><a href="#">Tab10</a></li>
  18. <li><a href="#">Tab11</a></li>
  19. <li><a href="#">Tab12</a></li>
  20. <li><a href="#">Tab13</a></li>
  21. <li><a href="#">Tab14</a></li>
  22. <li><a href="#">Tab15</a></li>
  23. <li><a href="#">Tab16</a></li>
  24. <li><a href="#">Tab17</a></li>
  25. </ul>
  26. </div>
  27. </div>
  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.  


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ć?



Ten post edytował trifek 23.01.2019, 12:42:24
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 18:24