水平滚动导航 - 多个答案

【问题标题】：Horizontal scroll navigation - multiple水平滚动导航 - 多个
【发布时间】：2015-11-20 10:12:58
【问题描述】：

我想实现一个水平滚动导航，就像 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 的内容......等等。

感谢您的建议！

谢谢！

【问题讨论】：

标签： jquery horizontal-scrolling

【解决方案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>

【讨论】：