導(dǎo)航欄可能是讓用戶輕松瀏覽您的網(wǎng)站而不會迷路的最佳方式。

人們通常將導(dǎo)航欄放在頁面的最頂部，但如果它與您的設(shè)計相得益彰，您也可以在網(wǎng)頁的任一側(cè)放置導(dǎo)航欄。導(dǎo)航欄可以是導(dǎo)航項目的水平列表，也可以是小屏幕上網(wǎng)頁左上角或右上角的漢堡樣式。

為了更好地訪問導(dǎo)航欄，您可以使用幾行 CSS 和 JavaScript 將它們粘貼在頂部。隨著導(dǎo)航欄復(fù)雜性的增加，可能會堆積更多的 JavaScript 代碼。

在這篇文章中，我們將看到如何創(chuàng)建一個自定義的粘性導(dǎo)航欄，它可以響應(yīng)所有屏幕尺寸并具有強(qiáng)大的功能，只使用 CSS 來創(chuàng)建它。CAD看圖王手機(jī)會員版App，支持看圖、改圖、批注、測量CAD圖等功能！我們還將學(xué)習(xí)如何使用 SCSS 的語法糖更快、更簡潔地編寫我們的 CSS 代碼。

那么，讓我們開始吧。

目錄

• 使用 HTML 和 SCSS

• 帶有 CSS 的漢堡導(dǎo)航欄

• 使用 CSS 設(shè)置導(dǎo)航欄的樣式

• 媒體查詢

• 漢堡包的造型

使用 HTML 和 SCSS

我們將從一些簡單的東西開始，隨著本文的進(jìn)展逐漸深入到更復(fù)雜的東西。我們可以做的第一件事是創(chuàng)建導(dǎo)航欄，編寫一些 HTML。因此，首先將此 HTML 代碼復(fù)制到您最喜歡的代碼編輯器或 Codepen 中。 ? ? ? ? ? ?

上面給出的 HTML 代碼非常簡單，其中沒有任何復(fù)雜的內(nèi)容。我希望您注意我用于為每個元素編寫類名的約定。這種為 HTML 元素編寫類名的小約定稱為BEM，它代表 Block、Element-、Modifier。

我們?yōu)?HTML 代碼中的每個包裝器元素指定一個塊名稱。Mikutools在線工具箱(tools.miku.ac)，內(nèi)置超多實用工具，還支持圖片無損放大！在這種情況下，包裝器是我們的. 您也可以將其描述為父元素。<header class="header">

包裝器或父級中的每個子元素都有其父級的類名，后跟兩個帶有唯一標(biāo)識符的下劃線。您可能已經(jīng)注意到，在我們的例子中，它是：

<導(dǎo)航類= “header__nav” ID = “導(dǎo)航欄” > ?

現(xiàn)在，我們可以像這樣為包裝器中的每個子元素指定一個類名。這里要注意的另一件事是header，即使它們是標(biāo)題的子子項，我也以單詞開頭它們的類名。這樣做是為了保持一致性，在編寫 SCSS 代碼時，它最終會對我們有很大幫助。我們稍后會看到這一點。

要繼續(xù)，您可以在 SCSS 文件中復(fù)制以下給定的 SCSS 代碼：

$color -藍(lán)色: #00315c; $color -紫色：#6f479f; $顏色-黑色：#202020； $color -灰色：#edebeb; $顏色-白色：#fcfcfc； ? ? ? html {字體-大小：62.5 %; 滾動行為：平滑；_ } ? ? html , 正文{寬度: 100 %; 邊距：0px ；填充：0px ；溢出-x ：隱藏；_ } ? ? ? body { font - family : "Montserrat" , sans - serif ; } ? ? .header {height: 20vh;background-color: $color-gray;padding: 1.5rem;position: relative; ?&__nav {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);padding: 4rem 5rem;justify-content: space-around;align-items: center;z-index: 100;width: 100%;transition: 0.6s;} ?&__list {list-style: none;display: flex;} ?&__item {&:not(:last-child) {margin-right: 5rem;}} ?&__link {font-size: 1.6rem;color: $color-blue;font-weight: 400;text-decoration: none; ?&:hover {font-weight: 600;transition: all 0.3s;}} }

注意，如果您在 Codepen 中跟隨我，您可以在 CSS 窗口的設(shè)置菜單中選擇SCSS選項。如果你在 VS Code 這樣的編輯器中，你可以下載 SCSS 擴(kuò)展；它會將您的 SCSS 代碼編譯成 CSS 代碼，您可以將其包含在 HTML 文件中。

如果您熟悉 SCSS 并了解上述代碼中發(fā)生的情況，請隨意跳過接下來的幾段。

前幾行代碼是顏色的變量，我們將在本教程中使用最多。NtPlayer電視盒子App，IOS版直播神器提供上千個全球頻道，高清畫質(zhì)秒播放！您可以將這些變量設(shè)置為您喜歡的任何顏色，然后不必每次要使用顏色時都編寫哈希值或 RGBA 值，而是編寫變量名稱。

我希望您注意的語法從第 24 行開始。我已經(jīng)編寫了用于啟動標(biāo)題元素的樣式。但是，在同一個括號內(nèi)，我還寫了 ，它啟動了我們的導(dǎo)航元素的樣式。.header``&__nav

---

超過 20 萬開發(fā)人員使用 LogRocket 來創(chuàng)造更好的數(shù)字體驗了解更多 →

---

在 SCSS 中，您可以將嵌套元素的樣式寫在相同的括號中。此外，該&符號包含您的父標(biāo)識符的值。在這種情況下，如果我們使用 ID 而不是類名，則意味著.header&#header

您還可以在第 61 行看到我是如何使用的，因為我想在我的鏈接元素上應(yīng)用偽懸停類。因此，這使我們可以輕松編寫嵌套樣式并刪除冗余代碼。硬件狗狗純凈硬件檢測工具，支持win11系統(tǒng)無廣告無捆綁，專業(yè)電腦檢測軟件！如果您愿意，可以 閱讀有關(guān) SCSS及其語法的更多信息。&:hover

您可能已經(jīng)注意到，我們并沒有花太多精力為大屏幕創(chuàng)建導(dǎo)航欄，因為根據(jù)良好的用戶體驗，它應(yīng)該始終是屏幕頂部的水平列表。我們可以在大屏幕上添加漢堡菜單，但為了防止用戶額外點擊，漢堡菜單總是出現(xiàn)在小屏幕上，我們現(xiàn)在將這樣做。

帶有 CSS 的漢堡導(dǎo)航欄

現(xiàn)在，我們可以將注意力轉(zhuǎn)移到僅使用 CSS 在小屏幕上創(chuàng)建自定義漢堡導(dǎo)航欄上。

讓您了解我們正在構(gòu)建的內(nèi)容；在較小的屏幕上顯示水平導(dǎo)航項目是不可行的。相反，我們將創(chuàng)建一個漢堡菜單，它將通過覆蓋整個屏幕的背景來顯示項目。

讓我們從編寫一些代碼開始。在現(xiàn)有 HTML 代碼中的第 10 行之后復(fù)制以下 HTML 代碼。

<div class = "navigation" > <input type = "checkbox" class = "navigation__checkbox" id = "navi-toggle" /> <label for = "navi-toggle" class = "navigation__button" > <span class = "navigation__icon " ></span> </label> <div class = "navigation__background" ></div> <nav class = "navigation__nav"> <ul類= “導(dǎo)航__列表” ><li class="navigation__item"><a href="index.html" class="navigation__link">Home</a></li><li class="navigation__item"><a href="about.html" class="navigation__link">About</a></li><li class="navigation__item"><a href="services.html" class="navigation__link">Services</a></li><li class="navigation__item"><a href="contact.html" class="navigation__link">Contact Us</a></li></ul></nav></div>

After copying the code, your HTML file should look something like this:

It is the only HTML code we need to make a hamburger menu that looks good on smaller screens. So, let me explain to you some key points in this newly added code:

• 我們添加了一個新<div>元素，并給它<div>一個類名navigation. 在 div 中，我們添加了一個復(fù)選框。此復(fù)選框?qū)椭覀兇_定何時顯示導(dǎo)航項以及何時隱藏它們

• 在復(fù)選框之后，我們有一個標(biāo)簽，連同其中的一個元素，將充當(dāng)?shù)湫偷臐h堡包圖標(biāo)

• 第三個元素是另一個<div>具有類名的元素navigation__background。此 div 將為我們的導(dǎo)航項目提供背景覆蓋，以便在屏幕上清晰顯示

• 最后一件事是列表中的導(dǎo)航項目。我們必須再次添加它們，因為之前的導(dǎo)航項是針對大屏幕的，而這些導(dǎo)航項是針對小屏幕的

注意，我使用相同的 BEM 命名約定為每個元素編寫類名。

使用 CSS 設(shè)置導(dǎo)航欄的樣式

現(xiàn)在，剩下的就是設(shè)計我們的導(dǎo)航欄了。因此，我們將編寫大量 CSS 代碼。我將嘗試逐一解釋我們編寫的每個 CSS 塊，以免引起任何混淆。

首先，我們將編寫一些媒體查詢，因為我們需要以一定的寬度顯示漢堡菜單。對于媒體查詢，我們將在 SCSS 中使用 mixins，它們本質(zhì)上是函數(shù)。

---

來自 LogRocket 的更多精彩文章：

• 不要錯過來自 LogRocket 的精選時事通訊The Replay

• 了解LogRocket 的 Galileo 如何消除噪音以主動解決應(yīng)用程序中的問題

• 使用 React 的 useEffect優(yōu)化應(yīng)用程序的性能

• 在多個 Node 版本之間切換

• 了解如何使用 AnimXYZ 為您的 React 應(yīng)用程序制作動畫

• 探索 Tauri，一個用于構(gòu)建二進(jìn)制文件的新框架

• 比較NestJS 與 Express.js

---

對于參數(shù)，您將傳遞要查看更改的斷點。為方便起見，您可以給每個斷點起一個自己的名稱；例如，400px 可以命名為“phone”，因為這是手機(jī)的平均屏幕寬度。

調(diào)用后，您可以在大括號內(nèi)編寫 CSS 樣式，這些樣式將應(yīng)用于該斷點。讓我們看看如何通過編寫這些媒體查詢來實現(xiàn)這一點。

媒體查詢

復(fù)制 SCSS 文件頂部的以下代碼，我們就可以使用這些媒體查詢了。

@mixin響應(yīng)( $breakpoint ) { @if $breakpoint == phone { @media only screen and ( max - width : 37.5em ) { @content ; } //600px } @if $breakpoint == s -百{ @media only screen and ( max - width : 43.75em ) { @content ; } //700像素} @if $breakpoint == tab - port { @media only screen and ( max - width : 56.25em ) { @content ; } //900px } @if $ breakpoint == tab -land { @media only screen and ( max - width : 75em ) { @content ; } //1200px } @if $breakpoint == big-桌面{ @media only screen and ( min - width : 112.5em ) { @content ; } //1800 } }

你得到這些媒體查詢的語法了嗎？我們創(chuàng)建了一個名為 的 mixin respond，它接受 anybreakpoint作為參數(shù)，并在該媒體查詢中應(yīng)用這些樣式。

漢堡包的造型

現(xiàn)在，我們可以根據(jù)這些媒體查詢開始設(shè)置導(dǎo)航欄的樣式。所以，讓我們從復(fù)制這段代碼開始：

. 導(dǎo)航{顯示：無；@include響應(yīng)（s - 100 ）{顯示：塊；} z-索引：2000 ；_ & __checkbox {顯示：無；} }

在上面的代碼中，我們將漢堡導(dǎo)航的顯示設(shè)置為，none因為我們只想在較小的屏幕上可見。因此，我們使用我們的respondmixin 來實現(xiàn)該功能。

z-index 設(shè)置為是2000因為我們希望導(dǎo)航欄覆蓋所有其他內(nèi)容。我們將在本文后面看到它。

由于我們以 700px 顯示我們的漢堡導(dǎo)航，因此我們可以刪除以相同寬度顯示的水平列表。為此，請在您的header__list樣式中添加這個突出顯示的小媒體查詢：

＆__列表 {列表樣式：無；顯示：彎曲；@include 響應(yīng)（s-hundred）{顯示：無；} }

添加這些代碼塊后，您的 SCSS 文件應(yīng)如下所示：

屏幕尺寸超過 700 像素：

屏幕尺寸小于 700 像素的比較：

從現(xiàn)在開始，我們必須在樣式塊中添加所有代碼塊，因為一切都是嵌套的。.navigation

下一段代碼塊非常簡單。這段代碼將我們的導(dǎo)航按鈕設(shè)置為透明和圓形。我們讓它透明，因為它里面的導(dǎo)航圖標(biāo)元素將作為這個按鈕的漢堡圖標(biāo)。

& __button {背景顏色：透明；_ 高度：7rem ；寬度：7rem ；頂部：6rem ；對：6rem ；邊界-半徑：50 %；z -指數(shù)：2000 ；盒子-陰影：0 1rem 3rem rgba （$color - black ，0.1 ? ? ? ? ); 文本對齊：居中；_ 光標(biāo)：指針；}

現(xiàn)在，我們將為我們的漢堡圖標(biāo)設(shè)置樣式。我們將使用before和after偽類。最后，我們將使用偽類在我們的圖標(biāo)上添加一點懸停效果。position: absolute``hover

& __icon {位置：相對；邊距-左：2rem ；&, &:: before , &:: after { width : 4rem ; 高度：3px ；背景-顏色：$顏色-黑色；顯示：內(nèi)聯(lián)塊；} &::之前，&::之后{ 內(nèi)容：'' ；位置：絕對；左：0 ；過渡：全部0.2s ；} &::前{頂部: - 0.65rem ; } &::在{頂部: 0.65rem ; } } & __button :懸停& __icon :: before { top : - 1rem ; } & __button :懸停& __icon :: after { top : 1rem ; }

此時，我們的漢堡菜單圖標(biāo)應(yīng)該出現(xiàn)在屏幕上，如下圖所示：

現(xiàn)在，在按鈕按下（或檢查）時，我們希望我們的漢堡圖標(biāo)轉(zhuǎn)換為 X關(guān)閉圖標(biāo)，以指示我們的導(dǎo)航欄現(xiàn)在可見，并且進(jìn)一步按下它將關(guān)閉我們的導(dǎo)航欄。

為此，請復(fù)制下面給定的代碼，我們會很好地使用我們的圖標(biāo)。

& __checkbox :勾選+ & __button & __icon {背景色:透明; _ } & __checkbox :選中+ & __button & __icon :: before { top : 0 ; 變換：旋轉(zhuǎn)（135度）；背景-顏色：$顏色-白色；} & __復(fù)選框 :勾選+ & __button & __icon ::在{ top : 0 ; 變換：旋轉(zhuǎn)（- 135deg ）；背景-顏色：$顏色-白色；}

• 在上面的代碼塊中，我們使用了元素checked上的偽類checkbox

• 我們也在使用+CSS 選擇器。CSS選擇器+幫助我們選擇緊跟在指定元素之后的元素

• 最后，我們旋轉(zhuǎn)圖標(biāo)的before和after偽元素，使其看起來像X

我們將通過添加我們的背景覆蓋繼續(xù)前進(jìn)。我們的背景背后的邏輯很簡單；我們將在按鈕上添加背景顏色，最初它是不可見的，因為它的 z-index 將位于復(fù)選框按鈕的后面。

一旦我們點擊復(fù)選框，我們將縮放背景以覆蓋整個屏幕，并且我們的導(dǎo)航項變得可見。

復(fù)制下面的代碼來實現(xiàn)這一點。

& __background {背景:徑向-漸變( rgba ( $color - blue , 1 ), rgba ( $color - Purple , 1 ) ); 高度：6rem ；寬度：6rem ；位置：固定；頂部：- 1rem ；對：0rem ；z -索引： - 1000 ；顯示：無；邊界-半徑：50rem ；} & __checkbox :選中~ & __background { @include響應(yīng)( s -百) {顯示:塊; 變換：比例（80 ）；} }

應(yīng)用背景覆蓋后，導(dǎo)航欄應(yīng)如下所示：

剩下的最后一件事是設(shè)置導(dǎo)航項的樣式。對于上下文，導(dǎo)航項應(yīng)該只在我們單擊漢堡圖標(biāo)時出現(xiàn)。它將覆蓋整個屏幕，以在較小的屏幕上提供積極的用戶體驗。

最后，一旦我們再次單擊該圖標(biāo)，它就會消失。一些基本的樣式邏輯已進(jìn)入此代碼塊，這與我們在本教程的其余部分中所做的非常相似。

& __nav {位置：固定；邊距-頂部：1rem ；填充：1.2rem ；字體大小：1.5rem ；_ 字體-粗細(xì)：400 ；z -指數(shù)：1500 ；@include響應(yīng)（電話）{填充：0 ；} } & __list {列表樣式：無；_ 不透明度：0 ；可見性：隱藏；保證金-最高：50 %；} & __item { &: not (: last - child ) { margin - bottom : 1.5rem ; } }&__link {text-decoration: none;color: $color-white;&:hover {color: $color-blue;}}&__checkbox:checked ~ &__nav &__list {opacity: 1;visibility: visible;transition: all 0.5s;}&__checkbox:checked ~ &__nav {@include respond(s-hundred) {font-size: 4rem;position: absolute;top: 32rem;left: 50%;transform: translate(-50%, -50%);}}& __checkbox :選中~ & __nav & __link { @include響應(yīng)( s -百) { color : $color - white ; } }

最后，我們的自定義粘性導(dǎo)航欄在較小的屏幕上應(yīng)該是這樣的：

您可以根據(jù)需要設(shè)置導(dǎo)航欄或其項目的樣式。我在中間有X關(guān)閉符號，但它通常位于右上角。你可以自由地做你認(rèn)為合適的其余造型。

最后，如果你想在滾動的導(dǎo)航欄上添加一些小動畫，你可以在你的樣式塊中添加這個小塊的 CSS 代碼header：

& __sticky {填充: 5rem 10rem ; 背景-顏色：$顏色-灰色；框-陰影：0px 3px 5px rgba （$color - blue ，0.5 ）；} ? ? ?

另外，不要忘記添加以下 JavaScript 代碼：

常量導(dǎo)航欄=文檔。getElementById ( '導(dǎo)航欄' ); 窗口。addEventListener ( 'scroll' , () => { navBar . classList . toggle ( ' header__sticky ' , window .scrollY > 0 ); }); ? ?

CSS 現(xiàn)在為我們提供的工具和技術(shù)足以在不使用 JavaScript 的情況下構(gòu)建超酷的東西，比如我們的導(dǎo)航欄。此演示的完整代碼可在 Codepen 中找到。

結(jié)論

你可以只用 CSS 做很多事情。如果您看到有關(guān)自定義導(dǎo)航欄的教程或任何其他花哨的東西，您必須下載一些庫或編寫一些 JavaScript 代碼，然后首先考慮其他替代方案，因為 JavaScript 不是唯一的方法！

嘗試?yán)斫?CSS 的各種概念，也許您將能夠僅使用 CSS 來完成所有這些工作。

總結(jié)

以上是生活随笔為你收集整理的使用 CSS 构建自定义粘性导航栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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