自动隐藏导航

所属分类:导航-水平导航,其他导航

 13154  96  查看评论 (11)
自动隐藏导航 ie兼容9

自动隐藏导航已存在相当长的一段时间了,尤其是在移动设备上。这种用户体验模式背后的理念是简单有效,这让我们更容易操作。所以我们把它贴在上面。当用户向下滚动页面,腾出更多的空间内容。如果用户向上滚动页面,我们理解他的将要访问的导航,所以我们把它带回来。

创建结构

TheHTML 体系组成的 aheader.cd-auto-hide-headerelemen 用来包装的主导航 (nav.cd-primary-nav) 和amain.cd-main-content页面主要内容。

<headerclass="cd-auto-hide-header">
  <divclass="logo">
    <ahref="#0">
      <imgsrc="img/cd-logo.svg" alt="Logo"></a>
        </div>
        <navclass="cd-primary-nav">
          <ahref="#cd-navigation" class="nav-trigger">
            <span>
              <emaria-hidden="true"></em>Menu</span>
            </a>
            <!-- .nav-trigger -->
            <ulid="cd-navigation">
              <li>
                <ahref="#0">The team</a></li>
              <li>
                <ahref="#0">Our Services</a></li>
              <li>
                <ahref="#0">Our Projects</a></li>
              <li>
                <ahref="#0">Contact Us</a></li>
              </ul>
              </nav>
              <!-- .cd-primary-nav --></header>
              <!-- .cd-auto-hide-header -->
              <mainclass="cd-main-content">
                <!-- content here --></main>
                <!-- .cd-main-content -->

如果页面有一个导航栏,插入标题元素的additionalnav.cd-secondary-navis

<headerclass="cd-auto-hide-header">
  <divclass="logo">
    <ahref="#0">
      <imgsrc="img/cd-logo.svg" alt="Logo"></a>
        </div>
        <navclass="cd-primary-nav">
          <ahref="#cd-navigation" class="nav-trigger">
            <span>
              <emaria-hidden="true"></em>Menu</span>
            </a>
            <!-- .nav-trigger -->
            <ulid="cd-navigation">
              <!-- links here --></ul>
              </nav>
              <!-- .cd-primary-nav -->
              <navclass="cd-secondary-nav">
                <ul>
                  <li>
                    <ahref="#0">Intro</a></li>
                  <!-- additional links here --></ul>
                </nav>
                <!-- .cd-secondary-nav --></header>
                <!-- .cd-auto-hide-header -->
                <mainclass="cd-main-content sub-nav">
                  <!-- content here --></main>
                  <!-- .cd-main-content -->

最后,如果二级导航低于hero block,a.cd-heroelement 插入下方 <header>,其次是 the.cd-secondary-navelement:

<headerclass="cd-auto-hide-header">
  <divclass="logo">
    <ahref="#0">
      <imgsrc="img/cd-logo.svg" alt="Logo"></a>
        </div>
        <navclass="cd-primary-nav">
          <ahref="#cd-navigation" class="nav-trigger">
            <span>
              <emaria-hidden="true"></em>Menu</span>
            </a>
            <!-- .nav-trigger -->
            <ulid="cd-navigation">
              <!-- links here --></ul>
              </nav>
              <!-- .cd-primary-nav --></header>
              <!-- .cd-auto-hide-header -->
              <sectionclass="cd-hero">
                <!-- content here --></section>
                <!-- .cd-hero -->
                <navclass="cd-secondary-nav">
                  <ul>
                    <!-- links here --></ul>
                  </nav>
                  <!-- .cd-secondary-nav -->
                  <mainclass="cd-main-content sub-nav-hero">
                    <!-- content here --></main>
                    <!-- .cd-main-content -->

添加样式

我们用the.cd-auto-hide-headerclass 来定义自动隐藏页眉的主要样式。默认情况下,标头有一个固定的位置和一个顶部为零;当用户开始向下滚动,the.is-hiddenclass用来隐藏标题右边上面视区。

.cd - auto - hide - header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100 % ;
    height: 60px;
    transition: transform.5s;
}.cd - auto - hide - header.is - hidden {
    transform: translateY( - 100 % );
}
.cd - secondary - nav.fixed {
    position: fixed;
    top: 60px;
}.cd - secondary - nav.slide - up {
    transform: translateY( - 60px);
}

最后,“主要内容”和“简介块”定义基本样式.cd-main-contentand.cd-hero(主要是填充/固定头)的基本样式。

事件处理

我们使用jQuery来监听窗口对象的滚动事件

varscrolling = false;
$(window).on('scroll',
function() {
    if (!scrolling) {
        scrolling = true; (!window.requestAnimationFrame) ? setTimeout(autoHideHeader, 250) : requestAnimationFrame(autoHideHeader);
    }
});

autoHideHeader() 函数功能隐藏/显示导航根据用户是否向上或向下滚动。


相关插件-水平导航,其他导航

jQuery响应式多级下拉导航菜单特效

脚本简介jQuery响应式多级下拉导航菜单特效是一款基于jQuery+CSS3实现的白色简洁样式风格网站导航代码
  水平导航
 3822  19

仿网易新闻头部导航栏

手机端仿网易新闻头部导航栏,浏览器选择手机端模拟
  水平导航
 16099  85

jquery鼠标控制背景滑动的网站导航

jquery鼠标控制背景滑动的网站导航,跟随鼠标,可随意设置背景滑块样式,使用方便
  水平导航
 14243  114

简易使用的导航栏

可用网站作为导航栏
  水平导航
 10910  94

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币

    土豆泥 0
    2016/12/20 20:12:49
    守望阳光 0
    2016/12/1 17:12:34
    上这个网站这么久久没有得过一个jq币 回复
    时光科技 0
    2016/9/6 9:09:22
    陸慶堂 0
    2016/8/3 12:08:58
    如果图片能轮播就更好 回复
    洪都拉斯大喷子霹雳舞王 0
    2016/8/1 21:08:25
    林雅诗 0
    2016/7/28 14:07:46
    原帖地址 https://codyhouse.co/gem/auto-hiding-navigation/ 
        rayria0
        2016/8/10 10:08:15
        谢谢红领巾
        yida9150
        2016/8/13 14:08:06
        感谢红领巾!!
        虾霸0
        2016/11/14 10:11:26
        太帅了,谢谢!
        Soul mate0
        2016/12/19 19:12:51

        感谢红领巾

        wolf0
        2017/1/21 9:17:35

        太帅了

    回复
取消回复