html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件

这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件。我们曾经在很多网站上都看到过这种顶部固定导航菜单特效。Disqus For Websites的导航菜单就是一个很好的例子。

HTML结构

使用一个section来包含住头部的图像、标题和按钮，固定导航菜单使用一个div.cd-secondary-nav包住一个无序列表：

Menu

• Services

CSS样式

这款插件是移动设备优先的，我们为无序列表设置position: fixed，并将它放到屏幕的右下方(此时它看起来像一个图标)。当用户点击.cd-secondary-nav-trigger按钮，我们给无序列表添加上.is-visible类，并将CSS3 Scale的值从0变为1，使列表展开。

当屏幕大于1170像素的时候，我们将.cd-secondary-nav-trigger按钮隐藏。并将无序列表的定位设置为static。

.cd-secondary-nav ul {

position: fixed;

right: 5%;

bottom: 20px;

visibility: hidden;

transform: scale(0);

transform-origin: 100% 100%;

transition: transform 0.3s, visibility 0s 0.3s;

}

.cd-secondary-nav ul.is-visible {

visibility: visible;

transform: scale(1);

transition: transform 0.3s, visibility 0s 0s;

}

@media only screen and (min-width: 1170px) {

.cd-secondary-nav ul {

/* reset navigation values */

position: static;

width: auto;

max-width: 100%;

visibility: visible;

transform: scale(1);

}

}

.cd-secondary-nav-trigger {

position: fixed;

bottom: 20px;

right: 5%;

width: 44px;

height: 44px;

}

@media only screen and (min-width: 1170px) {

.cd-secondary-nav-trigger {

display: none;

}

}

当用户滚动鼠标到“intro”部分时，我们为导航菜单设置.is-fixed类。将它的定位从relative 改变为fixed并修改他的高度。然后为它的子节点添加.animate-children，来使它的各个子节点产生动画。这里不能使用一个class来制作动画，因为在Firefox中有一个BUG-CSS transition animation fails when parent element changes position attribute。

@media only screen and (min-width: 1170px) {

.cd-secondary-nav.is-fixed {

position: fixed;

left: 0;

top: 0;

height: 70px;

width: 100%;

}

.cd-secondary-nav li a {

padding: 58px 40px 0 40px;

transition: padding 0.2s;

}

.cd-secondary-nav li a span {

transition: opacity 0.2s;

}

.cd-secondary-nav.animate-children li a {

padding: 26px 30px 0 30px;

}

.cd-secondary-nav.animate-children li a span {

opacity: 0;

}

}

当导航菜单处于“固定”状态时，我们希望Logo和下载按钮显示出来。所以我们定义了两个class：.is-hidden和.slide-in。

@media only screen and (min-width: 1170px) {

#cd-logo.is-hidden {

/* assign a position fixed and move outside the viewport (on the left) */

opacity: 0;

position: fixed;

left: -20%;

transition: left 0.3s, opacity 0.3s;

}

#cd-logo.is-hidden.slide-in {

/* slide in when the secondary navigation gets fixed */

left: 5%;

opacity: 1;

}

.cd-btn.is-hidden {

/* assign a position fixed and move outside the viewport (on the right) */

opacity: 0;

position: fixed;

right: -20%;

transition: right 0.3s, opacity 0.3s;

}

.cd-btn.is-hidden.slide-in {

/* slide in when the secondary nav gets fixed */

right: 5%;

opacity: 1;

}

}

JAVASCRIPT

当用户滚动页面超过导航条位置，我们为导航条添加.is-fixed并改变它的position的值。我们为.animate-children添加50ms的延时来使它的子节点产生动画。因为它们的动画不是同时发生的，因此，位置值的改变不会影响过渡效果。

var secondaryNav = $('.cd-secondary-nav'),

secondaryNavTopPosition = secondaryNav.offset().top;

$(window).on('scroll', function(){

if($(window).scrollTop() > secondaryNavTopPosition ) {

secondaryNav.addClass('is-fixed');

setTimeout(function() {

secondaryNav.addClass('animate-children');

$('#cd-logo').addClass('slide-in');

$('.cd-btn').addClass('slide-in');

}, 50);

} else {

secondaryNav.removeClass('is-fixed');

setTimeout(function() {

secondaryNav.removeClass('animate-children');

$('#cd-logo').removeClass('slide-in');

$('.cd-btn').removeClass('slide-in');

}, 50);

}

});