當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

使用 CSS 构建自定义粘性导航栏

發布時間：2024/3/24 CSS 45 豆豆

生活随笔收集整理的這篇文章主要介紹了使用 CSS 构建自定义粘性导航栏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

導航欄可能是讓用戶輕松瀏覽您的網站而不會迷路的最佳方式。

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

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

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

那么，讓我們開始吧。

使用 HTML 和 SCSS

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

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

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

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

<導航類= “header__nav” ID = “導航欄” > ?

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

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

$color -藍色: #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 窗口的設置菜單中選擇SCSS選項。如果你在 VS Code 這樣的編輯器中，你可以下載 SCSS 擴展；它會將您的 SCSS 代碼編譯成 CSS 代碼，您可以將其包含在 HTML 文件中。

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

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

我希望您注意的語法從第 24 行開始。我已經編寫了用于啟動標題元素的樣式。但是，在同一個括號內，我還寫了，它啟動了我們的導航元素的樣式。.header``&__nav

超過 20 萬開發人員使用 LogRocket 來創造更好的數字體驗了解更多 →

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

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

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

帶有 CSS 的漢堡導航欄

現在，我們可以將注意力轉移到僅使用 CSS 在小屏幕上創建自定義漢堡導航欄上。

讓您了解我們正在構建的內容；在較小的屏幕上顯示水平導航項目是不可行的。相反，我們將創建一個漢堡菜單，它將通過覆蓋整個屏幕的背景來顯示項目。

讓我們從編寫一些代碼開始。在現有 HTML 代碼中的第 10 行之后復制以下 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類= “導航__列表” ><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 中，我們添加了一個復選框。此復選框將幫助我們確定何時顯示導航項以及何時隱藏它們
在復選框之后，我們有一個標簽，連同其中的一個元素，將充當典型的漢堡包圖標
第三個元素是另一個<div>具有類名的元素navigation__background。此 div 將為我們的導航項目提供背景覆蓋，以便在屏幕上清晰顯示
最后一件事是列表中的導航項目。我們必須再次添加它們，因為之前的導航項是針對大屏幕的，而這些導航項是針對小屏幕的

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

使用 CSS 設置導航欄的樣式

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

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

來自 LogRocket 的更多精彩文章：

不要錯過來自 LogRocket 的精選時事通訊The Replay
了解LogRocket 的 Galileo 如何消除噪音以主動解決應用程序中的問題
使用 React 的 useEffect優化應用程序的性能
在多個 Node 版本之間切換
了解如何使用 AnimXYZ 為您的 React 應用程序制作動畫
探索 Tauri，一個用于構建二進制文件的新框架
比較NestJS 與 Express.js

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

調用后，您可以在大括號內編寫 CSS 樣式，這些樣式將應用于該斷點。讓我們看看如何通過編寫這些媒體查詢來實現這一點。

媒體查詢

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

@mixin響應( $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 } }

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

漢堡包的造型

現在，我們可以根據這些媒體查詢開始設置導航欄的樣式。所以，讓我們從復制這段代碼開始：

. 導航{顯示：無；@include響應（s - 100 ）{顯示：塊；} z-索引：2000 ；_ & __checkbox {顯示：無；} }

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

z-index 設置為是2000因為我們希望導航欄覆蓋所有其他內容。我們將在本文后面看到它。

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

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

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

屏幕尺寸超過 700 像素：

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

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

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

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

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

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

此時，我們的漢堡菜單圖標應該出現在屏幕上，如下圖所示：

現在，在按鈕按下（或檢查）時，我們希望我們的漢堡圖標轉換為 X關閉圖標，以指示我們的導航欄現在可見，并且進一步按下它將關閉我們的導航欄。

為此，請復制下面給定的代碼，我們會很好地使用我們的圖標。

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

在上面的代碼塊中，我們使用了元素checked上的偽類checkbox
我們也在使用+CSS 選擇器。CSS選擇器+幫助我們選擇緊跟在指定元素之后的元素
最后，我們旋轉圖標的before和after偽元素，使其看起來像X

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

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

復制下面的代碼來實現這一點。

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

應用背景覆蓋后，導航欄應如下所示：

剩下的最后一件事是設置導航項的樣式。對于上下文，導航項應該只在我們單擊漢堡圖標時出現。它將覆蓋整個屏幕，以在較小的屏幕上提供積極的用戶體驗。

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

& __nav {位置：固定；邊距-頂部：1rem ；填充：1.2rem ；字體大小：1.5rem ；_ 字體-粗細：400 ；z -指數：1500 ；@include響應（電話）{填充：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響應( s -百) { color : $color - white ; } }

最后，我們的自定義粘性導航欄在較小的屏幕上應該是這樣的：

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

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

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

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

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

CSS 現在為我們提供的工具和技術足以在不使用 JavaScript 的情況下構建超酷的東西，比如我們的導航欄。此演示的完整代碼可在 Codepen 中找到。

結論

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

嘗試理解 CSS 的各種概念，也許您將能夠僅使用 CSS 來完成所有這些工作。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： appium验证码输入笔记
下一篇：移动端底部导航栏中的公共样式CSS代码