Горизонтальная прокрутка навигация - множественный

Question

Я хотел бы realisize горизонтальной прокрутки навигации так же, как http://codepen.io/stevemckinney/pen/yNBNKa

HTML

<div class='container example-one'> 
    <div class='title'>All scrolling</div> 
    <header class='example-one-header scroll'> 
    <span class='logo'>Logo</span> 
    <nav class='vertical-align-middle'> 
     <span class='nav-item'>Blog</span> 
     <span class='nav-item'>Portfolio</span> 
     <span class='nav-item'>Downloads</span> 
     <span class='nav-item'>About</span> 
     <span class='nav-item'>Contact</span> 
    </nav> 
    </header> 
</div> 
<div class='container example-two'> 
    <div class='title'>Nav only scrolling</div> 
    <header class='example-two-header'> 
    <span class='logo'>Logo</span> 
    <nav class='vertical-align-middle scroll'> 
     <span class='nav-item'>Blog</span> 
     <span class='nav-item'>Portfolio</span> 
     <span class='nav-item'>Downloads</span> 
     <span class='nav-item'>About</span> 
     <span class='nav-item'>Contact</span> 
    </nav> 
    </header> 
</div> 
<div class='container example-three'> 
    <div class='title'>Nav separated</div> 
    <header class='example-three-header'> 
    <span class='logo'>Logo</span> 
    </header> 
    <nav class='vertical-align-middle scroll'> 
    <span class='nav-item'>Blog</span> 
    <span class='nav-item'>Portfolio</span> 
    <span class='nav-item'>Downloads</span> 
    <span class='nav-item'>About</span> 
    <span class='nav-item'>Contact</span> 
    </nav> 
</div> 

CSS

// Make each area overflow horizontally and 
// have the ability to have other items 
// scrolled into view 
.scroll { 
    white-space: nowrap; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: -ms-autohiding-scrollbar; } 

// Example two required styles ---------------/
.example-two-header { 
    .logo { 
    width: 25%; } 
    nav { 
    width: 75%; } } 

// Example three required styles ---------------/
.example-three { 
    .logo, 
    nav { 
    width: 100%; } 

    .nav-item { 
    color: #f6f7ee; } } 

// Shared styles ---------------/
header { 
    background: #152637; } 

// Examples 
.example-one-header, 
.example-two-header { 
    border-radius: 3px; } 

.example-three-header { 
    border-radius: 3px 3px 0 0; } 

.example-three nav { 
    background: #727c87; 
    white-space: nowrap; 
    overflow-x: scroll; 
    -webkit-overflow-scrolling: touch; 
    border-radius: 0 0 3px 3px; } 

// Logo 
.logo { 
    text-align: center; // only effective in example 2/3 
    font-weight: 700; 
    color: #727c87; 
    border-right: 1px solid rgba(#727c87, .4); 
    padding: 13px 24px 12px; } 

// Nav items 
.nav-item { 
    padding: 13px 16px 12px; 

    &:not(:last-child) { 
    border-right: 1px solid rgba(#727c87, .2); } } 

// Setup/misc styles ---------------/
* { 
    box-sizing: border-box; } 

body { 
    max-width: 360px; 
    margin: 5% auto; 
    color: #64cce3; 
    line-height: 1.5; } 

// Remove the inline-block extra space 
header, 
nav { 
    font-size: 0; } 

// Requires font size to be reset for these elements 
.logo, 
.nav-item { 
    font-size: 14px; } 

.logo, 
.nav-item, 
.vertical-align-middle { 
    display: inline-block; 
    vertical-align: middle; } 

.title { 
    margin: 24px 0 6px; 
    font-size: 12px; 
    text-transform: uppercase; 
    letter-spacing: .2em; 
    color: #999; } 

но то, что я хотел бы иметь является следующим: Во-первых, должна быть только одна строка (например, codecen), например, ссылки на разные годы (2015, 2014, ...)

При нажатии на год второй ряд должен появиться: для фильтрации месяц

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

Он должен исчезать в содержимом в div. Таким образом, нажав на год (например, 2015), все сообщения должны появиться в div. Выбрав «Январь», содержимое div должно быть обновлено ... и т. Д.

Я ценю ваш совет!

Спасибо!

Answer 1

просто добавить эти строки в CSS ...

.example-two > header > span {float: left; width: 20%;} 
    .example-two > header > nav {float: left; width: 80%; height: 47px;} 
    .example-three-header > span { border: medium none; text-align: center ! important; width: 100%;} 
    .example-three > nav {width: 100%;} 
    .clearfix{clear:both;} 

добавить DIV после полного "примера-два" ДИВ ...

<div class="clearfix"></div>