jQuery網站側邊隱藏展開導航插件二（轉）
阿新 • • 發佈：2017-09-09
osi width ica pointer 隱藏 gif xhtml and -type 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>頁面初加載的動畫</title> <script src="jquery-1.11.3.min.js"></script> <style> /*View Code重置一些樣式*/ *, *::after, *::before { box-sizing: border-box; /*padding: 0;*/ margin: 0; font-size: 14px; } .cd-vertical-nav ul{ list-style: none; } a { color: #c0a672; text-decoration: none; } .nav{ height: 80px; } .cd-image-replace { /* 小屏顯示的圖標 */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; } /* -------------------------------- 小屏時的圖標樣式，和小圖標響應式的顯示與隱藏 -------------------------------- */ .cd-nav-trigger { display: block; position: fixed; z-index: 2; bottom: 30px; right: 5%; height: 44px; width: 44px; border-radius: 0.25em; background: rgba(9, 150,90, 0.9); /* reset button style */ cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: none; outline: none; } .cd-nav-trigger span { position: absolute; height: 4px; width: 4px; background-color: #3a2c41; border-radius: 50%; left: 50%; top: 50%; bottom: auto; right: auto; transform: translateX(-50%) translateY(-50%); } .cd-nav-trigger span::before, .cd-nav-trigger span::after { content: ‘‘; position: absolute; left: 0; height: 100%; width: 100%; background-color: #3a2c41; border-radius: inherit; } .cd-nav-trigger span::before { top: -9px; } .cd-nav-trigger span::after { bottom: -9px; } @media only screen and (min-width: 768px) { .cd-nav-trigger { display: none; } } /* -------------------------------- 導航條的背景等屬性 -------------------------------- */ /*移動優先原則 這裏是小屏時的導航*/ .cd-vertical-nav { position: fixed; z-index: 1; right: 5%; bottom: 30px; width: 90%; max-width: 400px; max-height: 90%; overflow-y: auto; transform: scale(0); transform-origin: right bottom; transition: transform 0.2s; border-radius: 0.25em; background-color: rgba(9, 9, 9, 0.9); } .cd-vertical-nav li{ height:auto; } .cd-vertical-nav a { display: block; padding: 1em; color: #3a2c41; font-weight: bold; border-bottom: 1px solid rgba(58, 44, 65, 0.1); } .cd-vertical-nav a.active { color: #c0a672; } .cd-vertical-nav.open { transform: scale(1); z-index: 10; -webkit-overflow-scrolling: touch; } .cd-vertical-nav.open + .cd-nav-trigger { background-color: transparent; } .cd-vertical-nav.open + .cd-nav-trigger span { background-color: rgba(58, 44, 65, 0); } .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after { /* 給點擊後的按鈕做叉號（×）樣式 */ height: 3px; width: 20px; border-radius: 0; left: -8px; } .cd-vertical-nav.open + .cd-nav-trigger span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 1px; } .cd-vertical-nav.open + .cd-nav-trigger span::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); bottom: 0; } @media only screen and (min-width: 768px) { .cd-vertical-nav { /* pc端展示的效果，首先重置一下樣式 */ right: 0; top: 0; bottom: auto; text-align: center; /*這裏的vh是相對可視屏幕的高度，100vh表示高度始終等於瀏覽器可是高度*/ height: 100vh; width: 90px; max-width: none; max-height: none; transform: scale(1); background-color: transparent; overflow: hidden; /* 下面通過flex彈性盒子，讓內容的主軸線編程垂直的。 然後通過修改主軸的元素排列方式讓他們居中*/ display: flex; flex-direction: column; justify-content: center; } /*下面通過調節內容的縮放比和padding，margin等屬性來調節個選項間的距離，實現動畫效果*/ .cd-vertical-nav::before { /* 背景色 */ content: ‘‘; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: translateX(100%); transition: transform 0.4s; } .cd-vertical-nav:hover::before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-vertical-nav ul { vertical-align: middle; text-align: center; padding-left: 15px; } .cd-vertical-nav a { position: relative; padding: 0.5em 0 0; margin:0 auto; border-bottom: none; font-size: 1.2rem; color: #eaf2e3; transition: all .5s; } .cd-vertical-nav a.active i{ background-color: #00a58c; color: #ffffff; } .cd-vertical-nav a.active span{ color: #00a58c; } .cd-vertical-nav a.active::before, .cd-vertical-nav a:hover::before { background-color: #c0a672; } .cd-vertical-nav .label { display: block; opacity: 0; transform: translateX(150%); height: 0; transition: all 0.5s; } .cd-vertical-nav:hover .label { height:auto; opacity: 1; transform: translateX(0); padding-top: 5px; } .cd-vertical-nav:hover a { padding: 1em 0 0; margin-top: 0.8em; margin-right: 15px; } .cd-vertical-nav i{ display: inline-block; width: 32px; height: 32px; font-size: 18px; line-height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #0a9dc7; background-color: #fff; transform: scale(0.3); transition: all 0.3s; } .cd-vertical-nav:hover i{ transform: scale(1); } } /*配合頁面css*/ section{ height: 100vh; } section:nth-of-type(2n){ background-color: #ff0000; } section:nth-of-type(2n+1){ background-color: #ffff00; } </style> </head> <body> <div class="nav">這是頂部的導航</div> <nav class="cd-vertical-nav navbar collapse"> <ul> <li><a data-scroll href="#tab1" class="active"><i class="iconfont icon-shouyeshouye"></i><span class="label">首頁</span></a></li> <li><a data-scroll href="#tab2"><i class="iconfont icon-guanyu"></i><span class="label">關於</span></a></li> <li><a data-scroll href="#tab3"><i class="iconfont icon-jineng"></i><span class="label">技能</span></a></li> <li><a data-scroll href="#tab4"><i class="iconfont icon-gongzuojingyan"></i><span class="label">工作經驗</span></a></li> </ul> </nav> <button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button> <section id="tab1"></section> <section id="tab2"></section> <section id="tab3"></section> <section id="tab4"></section> </body> <script> $(function(){ var a =$("section"); //獲取每個大塊的元素 var b = []; for (i=0;i< a.length;i++){ b[i]=a[i].offsetTop; //把每個大塊距離頁面最頂部的距離，賦給b數組 } var c = $(window).scrollTop();//頁面刷新是獲取滾動條的位置 if(c>=80){ //頂部導航欄高80；頂部導航消失的時候讓側邊導航出來 $(".cd-vertical-nav").show(); if(window.innerWidth<768){ //小屏的情況下讓按鈕隱藏/出現 $(".cd-nav-trigger").show();} }else { //否則讓它隱藏 $(".cd-vertical-nav").hide(); if(window.innerWidth<768) { $(".cd-nav-trigger").hide(); } } $(window).scroll(function(){ //監聽滾動條的滾動事件 c = $(window).scrollTop(); //實時監聽滾動條位置 if(c>=80){ //頁面滾動時，判斷滾動條位置，控制側邊導航的隱顯 $(".cd-vertical-nav").show(); if(window.innerWidth<768){ $(".cd-nav-trigger").show();} }else { $(".cd-vertical-nav").hide(); $(".cd-nav-trigger").hide(); } //下面是判斷頁面所處位置，實時更新導航條，是導航欄選項跟頁面同步 for (i=0;i< a.length;i++){ var d =c-b[i]; //c是滾動條位置，b是元素到頁面頂部的距離，d表示當前瀏覽器頂部所處的位置。 var e = a[i].offsetHeight; //獲取元素的高度 var f = a[i].id; //獲取元素的id var g = $(".cd-vertical-nav a[href=‘#"+f+"‘]"); //拼接字符串，通過屬性選擇器找到當前所處頁面對應的超鏈接 if (d>=0&&d<e){ if(g.hasClass("active")){ //如果當前元素本就處於激活狀態直接break break; } //如果當前頁面沒有處於激活狀態，就將正在激活的移出激活的樣式表 $(".cd-vertical-nav .active").removeClass("active"); g.addClass("active"); //給當前需要激活的屬性添加激活樣式表 break; } } }); }) //下面為小屏時通過點擊按鈕開關導航欄， $(".cd-nav-trigger").on("click",function(){ //處於open狀態，就關閉 if($(".cd-vertical-nav").hasClass("open")) $(".cd-vertical-nav").removeClass("open"); //反之打開 else $(".cd-vertical-nav").addClass("open"); }) //選中導航某一項後，關閉導航欄 $(".cd-vertical-nav a").on("click",function(){ $(".cd-vertical-nav").removeClass("open"); }) </script> </html>
jQuery網站側邊隱藏展開導航插件二（轉）