web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
纯CSS3抽屉式滑动侧边栏菜单设计
分类:
导航菜单
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
注意这个侧边栏效果的CSS样式中没有使用各个浏览器厂商的前缀,所以为了能够兼容各大浏览器,要在页面中引入prefixfree.min.js文件。 ```html ``` ##### HTML结构 该侧边栏菜单使用无序列表来制作,图表使用的是font-awesome字体图标。 ```html
Home
About
Contact
``` ##### 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; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告