Пробел между списком и верхней частью страницы

Question

Я использую дизайн, который я нашел на веб-сайте, и это выглядит действительно круто, но я хотел изменить его, чтобы он выглядел так, как мне нужно.

Оригинальный демо выглядел как этот

, но я нуждался в них, чтобы быть бок о бок, так что я создал таблицу, которая была шириной 100% и две колонки. Я поместил оба списка в таблицу, но произошло что-то странное.

Я проверил и нет обивка на вершине и не существует другого объекта. В списке и таблице установлены значения v-align. Я приложил jFiddle для лучшей справки и помощи.

JSFiddle

Спасибо всем большое!

<table width="100%" border="0"> 
<tbody valign="top"> 
<tr valign="top"> 
    <td valign="top"> 
    <ul class="tabs"> 
     <li class="tabs__item color1"> 
     <h2><span>[Review] The New LG G18</span></h2> 
     <p class="tabs__stats">Content</p> 
     </li> 
     <li class="tabs__item color2"> 
     <h2><span>[ROM][8.3.1] SlimSaber R31</span> </h2> 
     <p class="tabs__stats">Content</p> 
     </li> 
     <li class="tabs__item color3"> 
     <h2><span>[APP] Goo Simulator Extreme</span></h2> 
     <p class="tabs__stats">Content</p> 
     </li> 
     <li class="tabs__item color4"> 
     <h2><span>[Tutorial] Pooping Your Pants</span></h2> 
     <p class="tabs__stats">Content</p> 
     </li> 
     <div class="views-toggle views-toggle--hidden"> 
     <svg fill="white" viewBox="0 0 24 24"> 
      <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/> 
      <path d="M0 0h24v24h-24z" fill="none"/> 
     </svg> 
     </div> 
    </ul> 
    <script  src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/index.js"></script> 
    </td> 
    <td valign="top"> 
    <ul class="tabs"> 
     <li class="tabs__item color1"> 
     <h2><span>[Review] The New LG G18</span></h2> 
     <p class="tabs__stats">Content</p> 
     </li> 
     <li class="tabs__item color2"> 
     <h2><span>[ROM][8.3.1] SlimSaber R31</span> </h2> 
     <p class="tabs__stats">Content</p> 
     </li> 
     <li class="tabs__item color3"> 
     <h2><span>[APP] Goo Simulator Extreme</span></h2> 
     <p class="tabs__stats">Content</p> 
     </li> 
     <li class="tabs__item color4"> 
     <h2><span>[Tutorial] Pooping Your Pants</span></h2> 
     <p class="tabs__stats">Content</p> 
     </li> 
     <div class="views-toggle views-toggle--hidden"> 
     <svg fill="white" viewBox="0 0 24 24"> 
      <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/> 
      <path d="M0 0h24v24h-24z" fill="none"/> 
     </svg> 
     </div> 
    </ul> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/index.js"></script> 
    </td> 
</tr> 
</tbody> 
    </table> 

Answer 1

Это код, который нужно в moveTabs функционировать

var indexOffset = 0;  
    tabs.each(function(index) { 
    if ($(this).hasClass('tabs__first')) 
     indexOffset = index-1; 

    transY = (index-indexOffset) * 10;   
    scale  = 0.5 + (index-indexOffset)/25; 

затем добавить tabs__first к классу первого элемента, который вы хотите «сбросить»

Как это работает -

• В цикле я проверяю флажок tabs___ first marker , когда вижу это, я установил свое смещение на один меньше, чем индекс

• При выполнении преобразования по элементу вместо использования индекса для преобразования (как это делал исходный код) я использую index-indexOffset.

скрипку - https://jsfiddle.net/s4sc2mu1/2/

Answer 2

Проблема заключается в том, что javascript устанавливает, как далеко по странице появляются окна, основанные на их индексе в списке.

transY  = index * 10; 

Я сохранил копию скрипки (http://jsfiddle.net/trn44k7j/2/), но вот те изменения, которые должны быть сделано:

Добавить идентификатор в оба ваших неупорядоченных списках:

<ul class="tabs" id="list1"> 

<ul class="tabs" id="list2"> 

в яваскрипта разделе, добавьте еще два списка, на основе новых идентификаторов:

var tabs  = $('li.tabs__item');   // current list 
var tabs1  = $('#list1 li.tabs__item'); // new list 
var tabs2  = $('#list2 li.tabs__item'); // new list 

Кроме того, в JavaScript, изменить это:

tabs.each(function(index) { 
    transY = index * 10;   
    scale  = 0.5 + index/25; 

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')'); 
    }); 

к этому:

tabs1.each(function(index) { 
    transY = index * 10;   
    scale  = 0.5 + index/25; 

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')'); 
    }); 

tabs2.each(function(index) { 
    transY = index * 10;   
    scale  = 0.5 + index/25; 

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')'); 
    }); 

Что мы делаем здесь, получаем два отдельные списки для двух столбцов. Затем мы запускаем javascript, чтобы установить позиции в ящике на основе двух отдельных списков, поэтому, когда он использует индекс, он будет начинаться с 0 для каждого столбца, вместо того, чтобы продолжать в столбце два, где остановился столбец.

Answer 3

В ваш Javascript

tabs.each(function(index) { 
    transY = index * 10;   
    scale  = 0.5 + index/25; 

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')'); 
    }); 

никогда не сбрасывается, так трансформировании, что второй столбец, как если бы они были добавлены к первому столбцу.

Вам нужна лучшая логика для настройки «переход». В настоящее время вы устанавливаете его на основе индекса списка «вкладки», так что вкладка 1 равна 10vh, вкладка 2 - 20vh, а вкладка 7 - 70vh.

Простой легко понять решение

Если вы знаете, что всегда будет 4 «вкладки» в колонке вы могли бы сделать жесткий кодированный исправить, изменив выше:

tabs.each(function(index) { 
    transY = (index%4) * 10;   
    scale  = 0.5 + index/25; 

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')'); 
    }); 

В противном случае вы необходимо переработать логику, лежащую в основе установки «tabs» y location, чтобы не основываться исключительно на количестве «вкладок». Это только в образовательных целях, чтобы показать вам, почему ваша логика была неправильной и простое решение, которое не использует сложные методы.

EDIT:

Решение с использованием Jquery дерева навигации

А ни жёстко решение, которое является немного более сложным. Логика состоит в том, чтобы захватить каждый список «табуляции» и для каждого дочернего элемента в этом списке «tabs» захватить каждый элемент списка с классом «tabs__item» и преобразовать их высоту на основе этого. Это 100% модульное и будет работать для любого количества «tab__item» в любом количестве «вкладок» для любого количества «вкладок» и не требует изменения файлов CSS или изменений в вашей текущей структуре.

$('.tabs').each(function(index) { 
     $(this).children('li.tabs__item').each(function(index) { 
      transY = index * 10;   
      scale  = 0.5 + index/25; 

      transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')'); 
     }); 
    }); 

JS Fiddle Ссылка: https://jsfiddle.net/trn44k7j/8/

Answer 4

проверить это прямо сейчас: https://jsfiddle.net/trn44k7j/3/

Дело в том, каждое окно создается с параметрами через индекс. Но скрипт считает ВСЕ окна не только в конкретной ячейке. Это не реальное решение, но, по крайней мере, это показывает, где вам нужно futher думать, вот что я обновление:

tabs.each(function(index) { 
      if (index % 4 == 1){ 
      index=1; 
      } 
      if (index % 4 == 2){ 
      index=2; 
      } 
      if (index % 4 == 3){ 
      index=3; 
      }   
      if (index % 4 == 0){ 
      index=0; 
      } 
     transY = index * 10;   
     scale  = 0.5 + index/25; 

     transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')'); 
     }); 

Answer 5

ИМХО это устраняет проблему:

var Tabs = (function() { 

    var toggler = $('.views-toggle'); 
    var tabs  = $('li.tabs__item'); 
    var toggled = false; 

    var transform = function(el, value) { 
    el.css('transform', value); 
    el.css('-webkit-transform', value); 
    el.css('-ms-transform', value); 
    }; 
    var transition = function(el, value) { 
    el.css('transition', value); 
    el.css('-webkit-transition', value); 
    el.css('-ms-transition', value); 
    }; 

    var moveContent = function() { 
    if (!toggled) { 
     toggled = true; 
    } else { 
     toggled = false; 
    } 

    moveTabs(toggled); 

    return false; 
    }; 

    var moveTabs = function(a) { 
    var transY, scale; 

    if (a) { 
     tabs.css({ 
     'opacity': '1', 
     'box-shadow': '0 30px 60px rgba(0,0,0,0.4)', 
     'cursor': 'pointer' 
     }); 

     tabs.each(function(index) {   

     transY = $(this).index() * 10;   
     scale  = 0.5 + $(this).index()/25; 

     transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')'); 
     }); 

     toggler.addClass('views-toggle--hidden'); 
    } else { 
     transform(tabs, 'translate3d(0,0,0) scale(1)'); 
    } 
    }; 

    var switchTabs = function() { 
    var selected = $(this); 
    var others = selected.siblings('li'); 

    if (toggled) { 
     transition(others, 'transform 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06)'); 
     transform(others, 'translate3d(0, 100%, 0) scale(1)'); 
     transform(selected, 'translate3d(0,0,0) scale(1)'); 
     tabs.css({ 
     'box-shadow': '0 30px 60px rgba(0,0,0,0.4)', 
     'cursor': 'default' 
     }); 
     toggled = false; 

     selected.on('transitionend webkitTransitionend', function() { 
     toggler.removeClass('views-toggle--hidden'); 
     others.css({ 
      'opacity': '0' 
     }); 
     transform(others, 'translate3d(0, 100%, 0) scale(0)'); 
     transition(others, 'transform 0.9s cubic-bezier(0.23, 1, 0.32, 1)'); 
     selected.off('transitionend webkitTransitionend'); 
     }); 
    } 
    }; 

    var setup = function() { 
    toggled = true; 
    moveTabs(toggled); 
    }; 

    var init = function() { 
    $(document).on('ready', setup); 
     toggler.on('click touchstart', moveContent); 
    tabs.on('click touchstart', switchTabs); 
    }; 

    return { 
    init: init 
    }; 

}()); 

Tabs.init(); 

https://jsfiddle.net/trn44k7j/5/