jQuery和CSS3可自动隐藏的导航菜单设计_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款非常实用的jQuery和CSS3可自动隐藏的导航菜单设计。该设计中，导航菜单在页面向下滚动时会自动进行隐藏，在页面向上滚动时，菜单又会自动出现。

使用方法

HTML结构

该导航菜单设计的HTML结构包含几个部分：header.cd-auto-hide-header是主导航菜单。main.cd-main-content是页面的主体内容。如果页面中包含二级子菜单，那么在<header>中还有一个nav.cd-secondary-nav元素。在二级子菜单上面还可以放置一个.cd-hero元素，用来制作网站的banner。

<header class="cd-auto-hide-header">
  <div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
 
  <nav class="cd-primary-nav">
    <a href="#cd-navigation" class="nav-trigger">
      <span>
        <em aria-hidden="true"></em>
        Menu
      </span>
    </a> <!-- .nav-trigger -->
 
    <ul id="cd-navigation">
      <!-- links here -->
    </ul>
  </nav> <!-- .cd-primary-nav -->

  <section class="cd-hero">
    <!-- content here -->
  </section> <!-- .cd-hero -->

  <nav class="cd-secondary-nav">
    <ul>
      <li><a href="#0">Intro</a></li>
      <!-- additional links here -->
    </ul>
  </nav> <!-- .cd-secondary-nav -->
</header> <!-- .cd-auto-hide-header -->
 
<main class="cd-main-content sub-nav">
  <!-- content here -->
</main> <!-- .cd-main-content -->

CSS样式

在css代码中，通过.cd-auto-hide-header class类来定义自动隐藏菜单的样式。默认情况下，菜单的定位方式为固定定位，top为0,。当用户开始向下滚动页面的时候，导航条会被添加一个.is-hidden class类，它用于将导航条向上移动到视口之外，将其隐藏。

.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%);
}

在样式文件style.css中分别为3种布局设置了各种的隐藏代码，你可以在样式文件中找到它们。

JavaScript

特效中使用jQuery来监听window对象的滚动事件。

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

autoHideHeader()方法用于根据用户是向上还是向下滚动页面来显示或隐藏滚动条。