这是一款非常实用的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()
方法用于根据用户是向上还是向下滚动页面来显示或隐藏滚动条。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!