HTML5自动隐藏菜单,jQuery和CSS3可自动隐藏的导航菜单设计

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

使用方法

HTML结构

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

Menu

• Intro

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()方法用于根据用户是向上还是向下滚动页面来显示或隐藏滚动条。