這是一款非常實用的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);

}

});

總結

以上是生活随笔為你收集整理的html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。