Как сделать 2-уровневую вкладку прокрутки в CSS, как это в HTML 5

Question

Мне нужно сделать такие вкладки с горизонтальной прокруткой, и я использую HTML 5 figure и figure заголовок

Пример HTML

<div class="footernav">
  <a href="javascript:void(0)">
    <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
        <figcaption>
                <h3>Product Name</h3>
        </figcaption>
    </figure>
  </a>
</div>

CSS

.footernav {white-space;no-wrap; padding-top: 0.2%; border-top: 1px solid white; overflow: auto; white-space:nowrap; padding-bottom: 1.9%;}
.footernav a { text-decoration: none; font-weight: bold; display: inline-block; padding-right: 1.5%; padding-left: 1.5%; text-align: center; margin-top: 1.1em; overflow:hidden; }
.footernav figure:last-child { margin-right: 0; }
.footernav img { min-width: 118px; max-width: 118px; padding:3px;  }
figure{margin:0}
.footernav a:hover,
.footernav a.selected { border-top-left-radius: 15px;
border-top-right-radius: 15px; background:red}
.footernav h3 { color: #000; font-weight: 700; margin-top: 0; margin-bottom: 0.3em; font-size: 1.1em; text-transform: uppercase; margin-top:0.5em }

см. Здесь http://jsfiddle.net/jitendravyas/XnAsL/1/ (ссылка обновлена)

Теперь, как сделать 2-й уровень и сделать его как на картинке ниже?

Оба уровня должны прокручиваться.

Answer 1

Я просто использовал простейшую логику, какую только мог придумать.

Проверьте обновление вашей скрипки здесь .

Я просто скопировал ваш div, дал им общий класс для обозначения в качестве подпункта. Затем использовал атрибут rel в исходной ссылке, чтобы показать эти поля.

$(".link").click(function() {
    var rel = $(this).attr('rel');
    $(".subtabs").hide();
    $("#"+rel).show();
});

Обновление:

Так как вам нужно решение CSS, для обозначения подпунктов лучшим (или единственным) способом является их слишком большое вложение. Но ваш текущий шаблон разметки не позволит этого. в качестве встроенного элемента будет содержаться блочный элемент. Хотя это будет действовать в HTML5 (который, конечно, все еще находится в экспериментальной фазе), не отображается должным образом (на самом деле, div будет появляться прямо из тега) Таким образом, вы должны изменить стиль разметки на что-то подходящее.

Согласно нашему обсуждению, эта скрипка делает то, что нужно.

Обновление II

Поскольку вы сказали, что сценарий будет выполняться кем-то другим. Простой фрагмент поможет выполнить работу. Определенная строка будет выбрана и останется выбранной, когда пользователь щелкнет по ней ... Здесь вы можете проверить скрипку

$(".footernav > li").click(function() {
    $(this).toggleClass("selected");
});

_{Постскриптум Положение второго ряда не работает должным образом внутри коробки скрипки. Таким образом, у вас может быть тест на отдельной странице.}