最近做項(xiàng)目的時(shí)候，突然想用一個(gè)側(cè)邊導(dǎo)航欄，網(wǎng)上找了幾個(gè)插件，有的太丑而且不太符合我的預(yù)期。與其修改別人的代碼，不如自己來寫一個(gè)了。廢話不多說先上圖，感興趣的請繼續(xù)看下去。
1效果圖
當(dāng)有頂部導(dǎo)航欄的時(shí)候側(cè)邊導(dǎo)航欄會(huì)消失。
響應(yīng)式方面，同樣的頂部導(dǎo)航欄消失后右下角的圖標(biāo)才出現(xiàn)。點(diǎn)擊出現(xiàn)導(dǎo)航，選中后消失；
這里是個(gè)demo ，沒有做平滑滾動(dòng)，需要的可以自己加上。
大體就介紹這么多吧，下面上代碼。
2css代碼
這里是css代碼，詳情請看注釋
1 <style> 2 3 /*重置一些樣式*/ 4 *, *::after, *::before { 5 box-sizing: border-box; 6 /*padding: 0;*/ 7 margin: 0; 8 font-size: 14px; 9 } 10 .cd-vertical-nav ul{ 11 list-style: none; 12 } 13 a { 14 color: #c0a672; 15 text-decoration: none; 16 } 17 18 .nav{ 19 height: 80px; 20 } 21 22 .cd-image-replace { 23 /* 小屏顯示的圖標(biāo) */ 24 display: inline-block; 25 overflow: hidden; 26 text-indent: 100%; 27 white-space: nowrap; 28 color: transparent; 29 } 30 31 /* -------------------------------- 32 33 小屏?xí)r的圖標(biāo)樣式，和小圖標(biāo)響應(yīng)式的顯示與隱藏 34 35 -------------------------------- */ 36 .cd-nav-trigger { 37 display: block; 38 position: fixed; 39 z-index: 2; 40 bottom: 30px; 41 right: 5%; 42 height: 44px; 43 width: 44px; 44 border-radius: 0.25em; 45 background: rgba(9, 150,90, 0.9); 46 /* reset button style */ 47 cursor: pointer; 48 -webkit-appearance: none; 49 -moz-appearance: none; 50 -ms-appearance: none; 51 -o-appearance: none; 52 appearance: none; 53 border: none; 54 outline: none; 55 } 56 .cd-nav-trigger span { 57 position: absolute; 58 height: 4px; 59 width: 4px; 60 background-color: #3a2c41; 61 border-radius: 50%; 62 left: 50%; 63 top: 50%; 64 bottom: auto; 65 right: auto; 66 transform: translateX(-50%) translateY(-50%); 67 } 68 .cd-nav-trigger span::before, .cd-nav-trigger span::after { 69 content: ''; 70 position: absolute; 71 left: 0; 72 height: 100%; 73 width: 100%; 74 background-color: #3a2c41; 75 border-radius: inherit; 76 } 77 .cd-nav-trigger span::before { 78 top: -9px; 79 } 80 .cd-nav-trigger span::after { 81 bottom: -9px; 82 } 83 84 @media only screen and (min-width: 768px) { 85 .cd-nav-trigger { 86 display: none; 87 } 88 } 89 90 /* -------------------------------- 91 92 導(dǎo)航條的背景等屬性 93 94 -------------------------------- */ 95 /*移動(dòng)優(yōu)先原則 這里是小屏?xí)r的導(dǎo)航*/ 96 .cd-vertical-nav { 97 position: fixed; 98 z-index: 1; 99 right: 5%;100 bottom: 30px;101 width: 90%;102 max-width: 400px;103 max-height: 90%;104 overflow-y: auto;105 transform: scale(0);106 transform-origin: right bottom;107 transition: transform 0.2s;108 border-radius: 0.25em;109 background-color: rgba(9, 9, 9, 0.9);110 }111 .cd-vertical-nav li{112 height:auto;113 }114 .cd-vertical-nav a {115 display: block;116 padding: 1em;117 color: #3a2c41;118 font-weight: bold;119 border-bottom: 1px solid rgba(58, 44, 65, 0.1);120 }121 .cd-vertical-nav a.active {122 color: #c0a672;123 }124 .cd-vertical-nav.open {125 transform: scale(1);126 z-index: 10;127 -webkit-overflow-scrolling: touch;128 }129 .cd-vertical-nav.open + .cd-nav-trigger {130 background-color: transparent;131 }132 .cd-vertical-nav.open + .cd-nav-trigger span {133 background-color: rgba(58, 44, 65, 0);134 }135 .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {136 /* 給點(diǎn)擊后的按鈕做叉號（×）樣式 */137 height: 3px;138 width: 20px;139 border-radius: 0;140 left: -8px;141 }142 .cd-vertical-nav.open + .cd-nav-trigger span::before {143 -webkit-transform: rotate(45deg);144 -moz-transform: rotate(45deg);145 -ms-transform: rotate(45deg);146 -o-transform: rotate(45deg);147 transform: rotate(45deg);148 top: 1px;149 }150 .cd-vertical-nav.open + .cd-nav-trigger span::after {151 -webkit-transform: rotate(135deg);152 -moz-transform: rotate(135deg);153 -ms-transform: rotate(135deg);154 -o-transform: rotate(135deg);155 transform: rotate(135deg);156 bottom: 0;157 }158 @media only screen and (min-width: 768px) {159 .cd-vertical-nav {160 /* pc端展示的效果，首先重置一下樣式 */161 right: 0;162 top: 0;163 bottom: auto;164 text-align: center;165 166 /*這里的vh是相對可視屏幕的高度，100vh表示高度始終等于瀏覽器可是高度*/167 height: 100vh;168 width: 90px;169 max-width: none;170 max-height: none;171 transform: scale(1);172 background-color: transparent;173 overflow: hidden;174 /* 下面通過flex彈性盒子，讓內(nèi)容的主軸線編程垂直的。175 然后通過修改主軸的元素排列方式讓他們居中*/176 display: flex;177 flex-direction: column;178 justify-content: center;179 }180 181 /*下面通過調(diào)節(jié)內(nèi)容的縮放比和padding，margin等屬性來調(diào)節(jié)個(gè)選項(xiàng)間的距離，實(shí)現(xiàn)動(dòng)畫效果*/182 .cd-vertical-nav::before {183 /* 背景色 */184 content: '';185 position: absolute;186 top: 0;187 left: 0;188 width: 100%;189 height: 100%;190 background: rgba(0, 0, 0, 0.8);191 transform: translateX(100%);192 transition: transform 0.4s;193 }194 195 .cd-vertical-nav:hover::before {196 -webkit-transform: translateX(0);197 -moz-transform: translateX(0);198 -ms-transform: translateX(0);199 -o-transform: translateX(0);200 transform: translateX(0);201 }202 203 .cd-vertical-nav ul {204 vertical-align: middle;205 text-align: center;206 padding-left: 15px;207 }208 209 .cd-vertical-nav a {210 position: relative;211 padding: 0.5em 0 0;212 margin:0 auto;213 border-bottom: none;214 font-size: 1.2rem;215 color: #eaf2e3;216 transition: all .5s;217 }218 219 .cd-vertical-nav a.active i{220 background-color: #00a58c;221 color: #ffffff;222 }223 .cd-vertical-nav a.active span{224 color: #00a58c;225 }226 .cd-vertical-nav a.active::before, .cd-vertical-nav a:hover::before {227 background-color: #c0a672;228 }229 .cd-vertical-nav .label {230 display: block;231 opacity: 0;232 transform: translateX(150%);233 height: 0;234 transition: all 0.5s;235 }236 237 .cd-vertical-nav:hover .label {238 height:auto;239 opacity: 1;240 transform: translateX(0);241 padding-top: 5px;242 }243 .cd-vertical-nav:hover a {244 padding: 1em 0 0;245 margin-top: 0.8em;246 margin-right: 15px;247 }248 .cd-vertical-nav i{249 display: inline-block;250 width: 32px;251 height: 32px;252 font-size: 18px;253 line-height: 30px;254 -webkit-border-radius: 50%;255 -moz-border-radius: 50%;256 border-radius: 50%;257 color: #0a9dc7;258 background-color: #fff;259 transform: scale(0.3);260 transition: all 0.3s;261 }262 .cd-vertical-nav:hover i{263 transform: scale(1);264 }265 266 }267 /*配合頁面css*/268 section{269 height: 100vh;270 }271 section:nth-of-type(2n){272 background-color: #ff0000;273 }274 section:nth-of-type(2n+1){275 background-color: #ffff00;276 }277 </style>
http://www.cnblogs.com/zheshiyigemanong/p/6986767.html
延伸閱讀
- 沉舟側(cè)畔千帆過，病樹前頭萬木春 】 2022-07-13
- 沉舟側(cè)畔千帆過，病樹前頭萬木春 2022-02-07
- 突破迷茫，實(shí)現(xiàn)自我 ——王*鑫 2020-06-11
- 用心工作，分享收獲 2019-03-13
- 在萬碼學(xué)堂實(shí)現(xiàn)了我的人生夢想 2017-11-29
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- Android高仿qq及微信底部菜單的幾種實(shí)現(xiàn)方式 2017-07-26
- [Android FrameWork 6.0源碼學(xué)習(xí)] View的重繪過程之Measure 2017-07-26
- 【Jquery系列】之Jquery 選擇器 2017-07-26
- 擴(kuò)展entity framework core 實(shí)現(xiàn)默認(rèn)字符串長度,decimal精度,entity自動(dòng)注冊和配置 2017-07-26
沉舟側(cè)畔千帆過，病樹前頭萬木春 】