现代CSS：纯 CSS 实现 3D 导航栏

着现代 CSS 技术的发展，CSS 新特性被越来越多的浏览器所支持，本文主要讲述使用纯 CSS 实现3D导航栏的步骤，并对其中用到的关键样式做一个解析。

1.整体效果

2.实现方案

实现方案将从一个基础的样式写起，然后逐渐添加响应的伪元素来实现不同的边，实现3D效果。与此同时，实现的过程中还给导航设置了动画，方便鼠标 hover 的时候有个更好地用户体验。

2.1.基础框架编写

小懒首先通过 html:5 快速创建 html5 页面基础框架，然后通过 schema div[class=container]>ul[class=navlist]>(li>a[href=#])*5 快速创建导航 html 框架。同时给基础框架增加了基础样式，样式中我们使用了现代 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="#">首页</a></li>
    <li><a href="#">用户管理</a></li>
    <li><a href="#">菜单管理</a></li>
    <li><a href="#">日志管理</a></li>
    <li><a href="#">权限管理</a></li>
  </ul>
</div>

效果如下：

2.2.3D效果实现

为了实现 3D 效果，需要旋转对各面做倾斜变化，正面需要Y轴倾斜 -15deg，侧面需要Y轴倾斜 45deg，顶面需要X倾斜 45deg。侧面和顶面我们使用 CSS 伪元素 ::before 和 ::after 来实现。在CSS 实现中背景颜色我们使用 color-mix 颜色混合函数来自动计算背景颜色。

// 正面
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效果已经实现，但是顶面和正面的层级还是有点问题，以至于效果看着比较别扭，我们再整体调试一节中将调试细节。请注意：color-mix 函数虽然得到大多数现代浏览器的支持，但是在生成环境中请谨慎使用。

2.3.整体调试

1）首先对导航的各项做了层级定义：

& 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;
    }
  }
}

对顶面的伪元素设置层级

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

给各面定义动画

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

4）整体实现代码

<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="#">首页</a></li>
    <li><a href="#">用户管理</a></li>
    <li><a href="#">菜单管理</a></li>
    <li><a href="#">日志管理</a></li>
    <li><a href="#">权限管理</a></li>
  </ul>
</div>

3.总结

现代 CSS 赋予了现代开发者更多的能力，之前需要使用 JavaScript 来解决的业务需求，现在可以通过纯 CSS 来实现了，这对开发者是一大利好。有句话能用CSS能实现的，尽量不要用 JavaScript 来实现。

动端侧边滑出导航栏是一种常见的UI设计，可以提升用户体验和导航的可用性。本文将详细介绍如何利用前端技术实现移动端侧边滑出导航栏，并给出相关的代码示例。

首先，我们需要一个触发导航栏滑出的按钮。通常情况下，这个按钮会放在页面的顶部或者底部，以便用户方便点击。我们可以使用HTML和CSS来创建这个按钮。

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;}```

以上代码创建了一个圆形的按钮，并设置了一些基本样式，可以根据实际需求进行调整。

接下来，我们需要实现导航栏滑出的效果。可以使用CSS来实现，具体代码如下：

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;}```

以上代码创建了一个导航栏，并设置了一些基本样式。使用左侧负值的left属性隐藏了导航栏，当给导航栏添加open类名后，left属性变为0，导航栏就可以滑出。

接下来，我们需要使用JavaScript来处理按钮的点击事件，实现导航栏的滑出和收起。可以使用以下代码：

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

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

以上代码添加了一个点击事件监听器，当按钮被点击时，toggle方法会切换导航栏元素的open类，从而实现导航栏的滑出和收起效果。

至此，我们已经完成了移动端侧边滑出导航栏的制作。当用户点击按钮时，导航栏将从左侧滑出，再次点击按钮时，导航栏将收起。这种交互方式可以为用户提供良好的导航体验。

总结一下，要实现移动端侧边滑出导航栏，我们需要使用HTML、CSS和JavaScript。通过添加一个按钮和一个导航栏元素，利用CSS的transition属性和JavaScript的事件监听器，可以轻松实现这一效果。希望本文的内容对你有所帮助。

果图：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML+CSS3横向导航栏</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自定义菜单设计demo
下一篇：推荐- 移动互联网常用的几个H5页面制作工具（请藏好）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商