CSS3怎么實現單頁面垂直固定導航

本篇內容主要講解“CSS3怎么實現單頁面垂直固定導航”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS3怎么實現單頁面垂直固定導航”吧!

越來越多的開發者喜歡將單頁面尤其像產品介紹頁面設計成用一個簡單的導航條關聯的頁面各個重要部分（節點）。本例中，一個頁面由多個重要節點組成，在頁面一側會垂直展示多個簡單的導航遠點，滑上圓點會展示對應節點部分的名稱，點擊頁面會滾動到對應的節點部分，而導航條位置固定不變。

當屏幕足夠小時（如手機移動設備），會在屏幕右下角展示一個圖標，觸控圖標，則會展開導航菜單，點擊菜單頁面會滾動到對應的節點，效果非常酷。

HTML

我們的導航條是一個無序列表ul，包含在nav.cd-vertical-nav內，通過連接a#section1關聯到對應的節點。元素button.cd-nav-trigger是用來作為小屏幕設備上的用來觸發菜單的按鈕。section.cd-section就是用來對應導航節點的內容。

<nav class="cd-vertical-nav"> <ul> <li><a href="#section1" class="active"><span class="label">Intro</span></a></li> <li><a href="#section2"><span class="label">Events</span></a></li> <!-- additional navigation items here --> </ul> </nav> <button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button> <section id="section1" class="cd-section"> <p class="content-wrapper"> <h2>垂直固定導航</h2> <a href="#section2" class="cd-scroll-down cd-image-replace">scroll down</a> </p> </section> <section id="section2" class="cd-section"> <p class="content-wrapper"> <!-- section content here --> </p> </section>

CSS

HTML結構部署好后，我們要為頁面添加必要的CSS樣式。在非常小的屏幕下（視圖寬度小于800px），我們將.cd-nav-trigger和<nav>的位置固定position: fixed在頁面右下角。當點擊或者觸摸.cd-nav-trigger時，我們使用CSS3來做一個平滑的過渡動畫使之有一個展開導航菜單的動畫。

.cd-nav-trigger {  display: block;  position: fixed;  z-index: 2;  bottom: 30px;  right: 5%; } .cd-vertical-nav {  position: fixed;  z-index: 1;  right: 5%;  bottom: 30px;  transform: scale(0);  transform-origin: right bottom;  transition: transform 0.2s; } .cd-vertical-nav.open {  transform: scale(1); }

那么在大的屏幕設備上，我們首先是要 Modernizr 來檢測當前使用的設備是否支持觸屏，在非觸控屏上會有鼠標滑上的效果。我們將右側的垂直導航條設置為固定的高度和寬度，并將其固定在頁面右側。默認右側導航之顯示幾個圓點，當鼠標滑上圓點時，導航條會打開，可以選擇導航菜單。

@media only screen and (min-width: 800px) {  .cd-vertical-nav {    right: 0;    top: 0;    height: 100vh;    width: 90px;  }  .cd-vertical-nav::before {    /* this is the navigation background */    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;  }  .no-touch .cd-vertical-nav:hover::before,  .touch .cd-vertical-nav::before {    transform: translateX(0);  }  .cd-vertical-nav .label {    display: block;    transform: translateX(100%);    transition: transform 0.4s;  }  .no-touch .cd-vertical-nav:hover .label,  .touch .cd-vertical-nav .label {    transform: translateX(0);  } }

為了創建圓點和圖標，可以使用::after和::before來為a元素添加偽類。

@media only screen and (min-width: 800px) {  .cd-vertical-nav a {    position: relative;    padding: 3em 0 0;    margin: 1.4em auto;  }  .cd-vertical-nav a::before,  .cd-vertical-nav a::after {    /* used to create the filled circle and the background icon */    content: '';    position: absolute;    left: 50%;    transition: transform 0.4s 0s;  }  .cd-vertical-nav a::before {    /* filled circle */    top: 0;    height: 32px;    width: 32px;    border-radius: 50%;    background: #eaf2e3;    transform: translateX(-50%) scale(0.25);  }  .cd-vertical-nav a::after {    /* icon */    top: 8px;    height: 16px;    width: 16px;    background: url(../img/cd-nav-icons.svg) no-repeat;    transform: translateX(-50%) scale(0);  }  .no-touch .cd-vertical-nav:hover a::before,  .no-touch .cd-vertical-nav:hover a::after,  .touch .cd-vertical-nav li:nth-of-type(n) a::before,  .touch .cd-vertical-nav li:nth-of-type(n) a::after {    transform: translateX(-50%) scale(1);  } }

當然到這里效果已經實現了，但是要實現點擊導航菜單時頁面做平滑滾動效果則需要借助jQuery來實現滾動動畫。

到此，相信大家對“CSS3怎么實現單頁面垂直固定導航”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！