基于css3的侧滑导航

最新推荐文章于 2024-05-10 09:47:54 发布

原创

最新推荐文章于 2024-05-10 09:47:54 发布 · 913 阅读

4 ·

CC 4.0 BY-SA版权

本文分享了一种使用CSS3制作的侧滑导航效果，实现过程简单。通过少量JavaScript代码（以Vue为例）实现导航的显示和隐藏，适用于不同框架。

没事的时候做的基于css的侧滑导航效果，实现非常的简单

ps:效果如下有一点js代码就是需要判断侧滑导航的显示和隐藏（这个我是用vue实现的用其他框架也是差不多这么个思路）

ps:效果如下

ps:代码

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />  //这个可以不需要
	</head>
	<style type="text/css">
		[v-cloak]{
		    display: none;
		}
		.div1{
			display: flex;
			position: relative;
			align-items: center;
			padding: 15px 5%;
		}
		.div2{
			position: fixed;
			width: 0%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 99;
			background: #333333;
			transition: 1s;
		}
		.div3{
			background: #333333;