現(xiàn)代CSS：純 CSS 實(shí)現(xiàn) 3D 導(dǎo)航欄

著現(xiàn)代 CSS 技術(shù)的發(fā)展，CSS 新特性被越來(lái)越多的瀏覽器所支持，本文主要講述使用純 CSS 實(shí)現(xiàn)3D導(dǎo)航欄的步驟，并對(duì)其中用到的關(guān)鍵樣式做一個(gè)解析。

1.整體效果

2.實(shí)現(xiàn)方案

實(shí)現(xiàn)方案將從一個(gè)基礎(chǔ)的樣式寫(xiě)起，然后逐漸添加響應(yīng)的偽元素來(lái)實(shí)現(xiàn)不同的邊，實(shí)現(xiàn)3D效果。與此同時(shí)，實(shí)現(xiàn)的過(guò)程中還給導(dǎo)航設(shè)置了動(dòng)畫(huà)，方便鼠標(biāo) hover 的時(shí)候有個(gè)更好地用戶體驗(yàn)。

2.1.基礎(chǔ)框架編寫(xiě)

小懶首先通過(guò) html:5 快速創(chuàng)建 html5 頁(yè)面基礎(chǔ)框架，然后通過(guò) schema div[class=container]>ul[class=navlist]>(li>a[href=#])*5 快速創(chuàng)建導(dǎo)航 html 框架。同時(shí)給基礎(chǔ)框架增加了基礎(chǔ)樣式，樣式中我們使用了現(xiàn)代 CSS 的一些特性，比如 CSS 元素嵌套（插入鏈接）、CSS 自定義屬性等新的特性。

<style>
  :root {
    --color: #4855B0;
  }
  body { margin: 0; padding: 0}
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    .navlist {
      list-style: none;
      padding: 0;
      & li {
        & a {
          display: block;
          padding: 15px 25px;
          background-color: var(--color);
          color: #fff;
          text-decoration: none;
          &:hover {
            --color: #f00;
            left: -20px;
          }
        }
      }
    }
  }
</style>
<!--div[class=container]>ul[class=navlist]>(li>a[href=#])*5-->
<div class="container">
  <ul class="navlist">
    <li><a href="#">首頁(yè)</a></li>
    <li><a href="#">用戶管理</a></li>
    <li><a href="#">菜單管理</a></li>
    <li><a href="#">日志管理</a></li>
    <li><a href="#">權(quán)限管理</a></li>
  </ul>
</div>

效果如下：

2.2.3D效果實(shí)現(xiàn)

為了實(shí)現(xiàn) 3D 效果，需要旋轉(zhuǎn)對(duì)各面做傾斜變化，正面需要Y軸傾斜 -15deg，側(cè)面需要Y軸傾斜 45deg，頂面需要X傾斜 45deg。側(cè)面和頂面我們使用 CSS 偽元素 ::before 和 ::after 來(lái)實(shí)現(xiàn)。在CSS 實(shí)現(xiàn)中背景顏色我們使用 color-mix 顏色混合函數(shù)來(lái)自動(dòng)計(jì)算背景顏色。

// 正面
a {
  transform: skewY(-15deg);
}
a {
  &::before {
    position: absolute;
    left: -20px;
    bottom: 10px;
    width: 20px;
    height: 100%;
    content: "";
    background-color: color-mix(in srgb, var(--color), black 20%);
    transform: skewY(45deg);
    transition: background-color 200ms;
  }
  &::after {
    position: absolute;
    left: -10px;
    top: -20px;
    width: 100%;
    height: 20px;
    content: "";
    background-color: color-mix(in srgb, var(--color), black 20%);
    transform: skewX(45deg);
  }
}

效果圖如下：

從上面效果圖可以看到，3D效果已經(jīng)實(shí)現(xiàn)，但是頂面和正面的層級(jí)還是有點(diǎn)問(wèn)題，以至于效果看著比較別扭，我們?cè)僬w調(diào)試一節(jié)中將調(diào)試細(xì)節(jié)。請(qǐng)注意：color-mix 函數(shù)雖然得到大多數(shù)現(xiàn)代瀏覽器的支持，但是在生成環(huán)境中請(qǐng)謹(jǐn)慎使用。

2.3.整體調(diào)試

1）首先對(duì)導(dǎo)航的各項(xiàng)做了層級(jí)定義：

& li {
  &:nth-child(1) {
    & a {
      z-index: 5;
    }
  }
  &:nth-child(2) {
    & a {
      z-index: 4;
    }
  }
  &:nth-child(3) {
    & a {
      z-index: 3;
    }
  }
  &:nth-child(4) {
    & a {
      z-index: 2;
    }
  }
  &:nth-child(5) {
    & a {
      z-index: 1;
    }
  }
}

對(duì)頂面的偽元素設(shè)置層級(jí)

&::after {
  z-index: -1;
}

給各面定義動(dòng)畫(huà)

& a {
  transition: left 200ms, background-color 200ms;
  
  &::before {
    transition: background-color 200ms;
  }
  &::after {
    transition: background-color 200ms;
  }
}

4）整體實(shí)現(xiàn)代碼

<style>
  :root {
    --color: #4855B0;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 150px;
    .navlist {
      list-style: none;
      padding: 0;
      transform: skewY(-15deg);
      & li {
        &:nth-child(1) {
          & a {
            z-index: 5;
          }
        }
        &:nth-child(2) {
          & a {
            z-index: 4;
          }
        }
        &:nth-child(3) {
          & a {
            z-index: 3;
          }
        }
        &:nth-child(4) {
          & a {
            z-index: 2;
          }
        }
        &:nth-child(5) {
          & a {
            z-index: 1;
          }
        }
        & a {
          position: relative;
          left: 0;
          display: block;
          padding: 15px 25px;
          background-color: var(--color);
          color: #fff;
          text-decoration: none;
          transition: left 200ms, background-color 200ms;
          
          &::before {
            position: absolute;
            left: -20px;
            bottom: 10px;
            width: 20px;
            height: 100%;
            content: "";
            background-color: color-mix(in srgb, var(--color), black 20%);
            transform: skewY(45deg);
            transition: background-color 200ms;
          }
          &::after {
            position: absolute;
            left: -10px;
            top: -20px;
            width: 100%;
            height: 20px;
            content: "";
            background-color: color-mix(in srgb, var(--color), black 20%);
            transform: skewX(45deg);
            transition: background-color 200ms;
            z-index: -1;
          }
          &:hover {
            --color: #f00;
            left: -20px;
          }
        }
      }
    }
  }
</style>
<div class="container">
  <ul class="navlist">
    <li><a href="#">首頁(yè)</a></li>
    <li><a href="#">用戶管理</a></li>
    <li><a href="#">菜單管理</a></li>
    <li><a href="#">日志管理</a></li>
    <li><a href="#">權(quán)限管理</a></li>
  </ul>
</div>

3.總結(jié)

現(xiàn)代 CSS 賦予了現(xiàn)代開(kāi)發(fā)者更多的能力，之前需要使用 JavaScript 來(lái)解決的業(yè)務(wù)需求，現(xiàn)在可以通過(guò)純 CSS 來(lái)實(shí)現(xiàn)了，這對(duì)開(kāi)發(fā)者是一大利好。有句話能用CSS能實(shí)現(xiàn)的，盡量不要用 JavaScript 來(lái)實(shí)現(xiàn)。

動(dòng)端側(cè)邊滑出導(dǎo)航欄是一種常見(jiàn)的UI設(shè)計(jì)，可以提升用戶體驗(yàn)和導(dǎo)航的可用性。本文將詳細(xì)介紹如何利用前端技術(shù)實(shí)現(xiàn)移動(dòng)端側(cè)邊滑出導(dǎo)航欄，并給出相關(guān)的代碼示例。

首先，我們需要一個(gè)觸發(fā)導(dǎo)航欄滑出的按鈕。通常情況下，這個(gè)按鈕會(huì)放在頁(yè)面的頂部或者底部，以便用戶方便點(diǎn)擊。我們可以使用HTML和CSS來(lái)創(chuàng)建這個(gè)按鈕。

HTML代碼如下所示：

```html菜單```

CSS代碼如下所示：

```css.nav-button { position: fixed; top: 20px; left: 20px; width: 60px; height: 60px; background-color: #000; color: #fff; border: 0; border-radius: 50%; font-size: 16px;}```

以上代碼創(chuàng)建了一個(gè)圓形的按鈕，并設(shè)置了一些基本樣式，可以根據(jù)實(shí)際需求進(jìn)行調(diào)整。

接下來(lái)，我們需要實(shí)現(xiàn)導(dǎo)航欄滑出的效果。可以使用CSS來(lái)實(shí)現(xiàn)，具體代碼如下：

HTML代碼如下所示：

```html```

CSS代碼如下所示：

```css.nav-menu { position: fixed; top: 0; left: -80%; width: 80%; height: ; background-color: #fff; transition: all 0.3s ease;}

.nav-menu.open { left: 0;}

.nav-menu ul { list-style: none; padding: 0; margin: 0;}

.nav-menu ul li { padding: 10px 20px; border-bottom: 1px solid #ccc; cursor: pointer;}

.nav-menu ul li:last-child { border-bottom: none;}```

以上代碼創(chuàng)建了一個(gè)導(dǎo)航欄，并設(shè)置了一些基本樣式。使用左側(cè)負(fù)值的left屬性隱藏了導(dǎo)航欄，當(dāng)給導(dǎo)航欄添加open類(lèi)名后，left屬性變?yōu)?，導(dǎo)航欄就可以滑出。

接下來(lái)，我們需要使用JavaScript來(lái)處理按鈕的點(diǎn)擊事件，實(shí)現(xiàn)導(dǎo)航欄的滑出和收起。可以使用以下代碼：

```javascriptconst navButton = document.querySelector('.nav-button');const navMenu = document.querySelector('.nav-menu');

navButton.addEventListener('click', () => { navMenu.classList.toggle('open');});```

以上代碼添加了一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器，當(dāng)按鈕被點(diǎn)擊時(shí)，toggle方法會(huì)切換導(dǎo)航欄元素的open類(lèi)，從而實(shí)現(xiàn)導(dǎo)航欄的滑出和收起效果。

至此，我們已經(jīng)完成了移動(dòng)端側(cè)邊滑出導(dǎo)航欄的制作。當(dāng)用戶點(diǎn)擊按鈕時(shí)，導(dǎo)航欄將從左側(cè)滑出，再次點(diǎn)擊按鈕時(shí)，導(dǎo)航欄將收起。這種交互方式可以為用戶提供良好的導(dǎo)航體驗(yàn)。

總結(jié)一下，要實(shí)現(xiàn)移動(dòng)端側(cè)邊滑出導(dǎo)航欄，我們需要使用HTML、CSS和JavaScript。通過(guò)添加一個(gè)按鈕和一個(gè)導(dǎo)航欄元素，利用CSS的transition屬性和JavaScript的事件監(jiān)聽(tīng)器，可以輕松實(shí)現(xiàn)這一效果。希望本文的內(nèi)容對(duì)你有所幫助。

果圖：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML+CSS3橫向?qū)Ш綑?lt;/title>
<link rel="stylesheet" href="index.css" media="screen" type="text/css" />
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>This is Panel One</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>this is panel two</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>this is panel three</p>
</div>
<div class="panel">
<h2>This is Panel four</h2>
<p>this is panel four</p>
</div>
</div>
</article>
</body>
</html>

index.css

在線咨詢

上一篇：06，html自定義菜單設(shè)計(jì)demo
下一篇：推薦- 移動(dòng)互聯(lián)網(wǎng)常用的幾個(gè)H5頁(yè)面制作工具（請(qǐng)藏好）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商