這是一款非常實(shí)用的jQuery和css3響應(yīng)式垂直固定導(dǎo)航菜單插件。當(dāng)你的頁(yè)面上有很多的內(nèi)容，用戶(hù)需要花費(fèi)大量的時(shí)間才能找到他們想要的內(nèi)容。這個(gè)垂直固定導(dǎo)航菜單插件能夠?yàn)轫?yè)面提供一個(gè)內(nèi)容預(yù)覽，使用戶(hù)能非常輕松的找到他們需要的內(nèi)容。

HTML結(jié)構(gòu)

導(dǎo)航菜單使用nav作為wrapper,并為每一個(gè)導(dǎo)航項(xiàng)創(chuàng)建一個(gè)section。另外添加了一個(gè)trigger用于在觸摸屏設(shè)備上導(dǎo)航。

Open navigation

• Item 1

CSS樣式

我們使用Modernizr(.touch和.no-touch)來(lái)檢測(cè)觸摸和非觸摸設(shè)備，并提供兩個(gè)自定義的導(dǎo)航方法。因此，你在大屏幕上不論如何縮小瀏覽器，看到的都是小點(diǎn)導(dǎo)航按鈕，但是如果觸摸屏設(shè)備來(lái)查看這個(gè)demo，你會(huì)看到下圖所示的樣子：

在非觸摸屏的設(shè)備上，我們將trigger隱藏，并給元素設(shè)置position: fixed。

默認(rèn)情況下，我們給導(dǎo)航菜單項(xiàng)設(shè)置scale-down的transform效果。在鼠標(biāo)滑過(guò)它們時(shí)，在使它們scale-up起來(lái)。

.no-touch #cd-vertical-nav {

/*fix the navigation*/

position: fixed;

right: 40px;

top: 50%;

bottom: auto;

transform: translateY(-50%);

}

.no-touch #cd-vertical-nav a span {

float: right;

/*scale down navigation dots and labels*/

transform: scale(0.6);

}

.no-touch #cd-vertical-nav .cd-dot {

transform-origin: 50% 50%;

}

.no-touch #cd-vertical-nav .cd-label {

transform-origin: 100% 50%;

}

.no-touch #vertical-nav a:hover span {

/*scale up navigation dots and labels*/

transform: scale(1);

}

.no-touch #cd-vertical-nav a:hover .cd-label {

/*show labels*/

opacity: 1;

}

在移動(dòng)觸摸設(shè)備上，我們?yōu)?cd-nav-trigger和設(shè)置position: fixed。

當(dāng)用戶(hù)點(diǎn)擊了.cd-nav-trigger元素，我們給導(dǎo)航菜單添加.open類(lèi)，用來(lái)改變CSS3 scale的值從0變到1，并通過(guò)CSS3 transition使動(dòng)畫(huà)更加平滑。

下面是一些簡(jiǎn)化代碼：

.touch #cd-vertical-nav {

position: fixed;

z-index: 1;

right: 5%;

bottom: 30px;

width: 90%;

max-width: 400px;

max-height: 90%;

transform: scale(0);

transition-property: transform;

transition-duration: 0.2s;

}

.touch #cd-vertical-nav.open {

transform: scale(1);

}

JAVASCRIPT

當(dāng)用戶(hù)向下滾動(dòng)鼠標(biāo)，updateNavigation()方法會(huì)計(jì)算出哪一個(gè)是當(dāng)前瀏覽的section，并未相應(yīng)的導(dǎo)航菜單項(xiàng)添加.is-selected類(lèi)(基于導(dǎo)航菜單項(xiàng)的data-number屬性)。

jQuery(document).ready(function($){

var contentSections = $('.cd-section'),

navigationItems = $('#cd-vertical-nav a');

updateNavigation();

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

updateNavigation();

});

//smooth scroll to the section

navigationItems.on('click', function(event){

event.preventDefault();

smoothScroll($(this.hash));

});

//smooth scroll to second section

$('.cd-scroll-down').on('click', function(event){

event.preventDefault();

smoothScroll($(this.hash));

});

//open-close navigation on touch devices

$('.touch .cd-nav-trigger').on('click', function(){

$('.touch #cd-vertical-nav').toggleClass('open');

});

//close navigation on touch devices when selectin an elemnt from the list

$('.touch #cd-vertical-nav a').on('click', function(){

$('.touch #cd-vertical-nav').removeClass('open');

});

function updateNavigation() {

contentSections.each(function(){

$this = $(this);

var activeSection = $('#cd-vertical-nav a[href="#'+$this.attr('id')+'"]').data('number') - 1;

if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {

navigationItems.eq(activeSection).addClass('is-selected');

}else {

navigationItems.eq(activeSection).removeClass('is-selected');

}

});

}

function smoothScroll(target) {

$('body,html').animate(

{'scrollTop':target.offset().top},

600

);

}

});

總結(jié)

以上是生活随笔為你收集整理的html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。