当前位置：首页 > 网页特效 > 导航菜单

纯CSS3抽屉式滑动侧边栏菜单设计

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

纯CSS3抽屉式滑动侧边栏菜单设计

简介

注意这个侧边栏效果的CSS样式中没有使用各个浏览器厂商的前缀，所以为了能够兼容各大浏览器，要在页面中引入prefixfree.min.js文件。
```html
<script src="js/prefixfree.min.js"></script> 
``` 
##### HTML结构
该侧边栏菜单使用无序列表来制作，图表使用的是font-awesome字体图标。

```html
<ul class="drawer">
 <li> <a href="#"> Home </a>
 <ul>
 <li> <a href="#"> About </a> </li>
 <li> <a href="#"> Contact </a> </li>
 </ul>
 </li>
</ul> 
``` 
##### CSS样式
首先整个侧边栏设置为绝对定位，top和left都为0，固定在左上角位置。高度为100%屏幕高度，宽度用padding来控制。font-size: 0;用于移除列表项之间的间隙。

```html
.drawer {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100%;
  padding: .4em 0;
  background: #7D294E;
  color: white;
  text-align: center;
  font-size: 0;
}         
```       
侧边栏主列表的样式如下：

```html
.drawer li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  line-height: 100%;
  transform: translateZ(0);
 
}
.drawer a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: .4em;
  padding: .4em;
  line-height: 100%;
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
}
.drawer a:active, .drawer a:focus {
  background: #B44659;
}
.drawer i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.drawer span {
  font-size: .625em;
  font-family: Raleway;
  text-transform: uppercase;
}    
```            
抽屉式子菜单列表使用transform: translateX(-100%);将它们隐藏，并设置平滑过渡效果。

```html
.drawer > li ul {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 100%;
  height: 100%;
  width: auto;
  white-space: nowrap;
  transform: translateX(-100%);
  background: #B44659;
  transition: 0.5s transform;
}           
```     
在鼠标滑过相应的菜单项时，使用transform: translateX(0);将子菜单移动回屏幕中。

```html
.drawer li:hover ul {
  transform: translateX(0);
  background: #B44659;
}             
```

web299.com

纯CSS3抽屉式滑动侧边栏菜单设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果