水平滚动导航-多个

Question

我想实现水平滚动导航，就像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; }

但我想拥有的是：首先，应该只有一行（例如在Codepen上），例如具有不同年份（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;}

在完成“ example-two” div之后添加此div ...

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