带收缩的菜单栏

最新推荐文章于 2024-08-17 18:05:21 发布

肥喵蒙太奇

最新推荐文章于 2024-08-17 18:05:21 发布

阅读量875

点赞数

分类专栏：练手

本文链接：https://blog.csdn.net/YYYYYun/article/details/89555379

版权

练手专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

在这里插入图片描述

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
		<style type="text/css">
			.icon {width: 1.5em; height: 1.8em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
			.icon svg{width: 100%;height: 100%;}
			html,body{margin:0;padding:0;font-size:12px;}
			*{margin:0;padding:0;}
			ul,ol,li{list-style: none}
			@media (min-width: 768px){
				.nav-bar{position: fixed;top:0;left:0;width:250px;height: 100%;background:#44BBA3;color:#eee;overflow: hidden;transition: width .5s}
				.nav-bar .head-icon{position:relative;width:210px;height: 50px;line-height:50px;background: #fba;padding:20px;transition: all .5s}
				.nav-bar-hidden .head-icon h2{transition: opacity .5s}
				.nav-bar .head-icon .icon{position:absolute;top:20px;right:20px;width:50px;height: 50px;cursor: pointer;transition: all .5s}
				.nav-bar .menu ul{width:250px;padding-top: 20px}
				.nav-bar .menu ul li{position:relative;width:210px;height: 30px;padding:10px 20px;line-height: 30px;font-size: 16px;cursor: pointer;overflow: hidden;}
				.nav-bar .menu ul li:hover .menu-title{font-size: 18px}
				.nav-bar .menu-title{float: left;width: 160px;height: 30px;padding-left: 10px;white-space: normal;overflow: hidden;text-overflow: ellipsis;}
				.nav-bar .menu-icon{float: left;width: 30px;height: 30px;transition: all .5s}
				.nav-bar-show{width:250px;}
				.nav-bar-hidden{width: 50px;}
				.nav-bar-show .head-icon .icon{right:20px;}
				.nav-bar-hidden .head-icon h2{opacity: 0}
				.nav-bar-hidden .head-icon .icon{right:200px;}
				.nav-bar-hidden .menu-icon{margin-left: -10px}
			}
			@media (max-width: 767px){
				.nav-bar{width:100%;background:#44BBA3;color:#eee;overflow: hidden;transition: width .5s}
				.nav-bar .head-icon{position:fixed;width:90%;height: 40px;line-height:40px;font-size:20px;background: #fba;padding:20px 5%;z-index:999;transition: all .5s}
				.nav-bar .head-icon .icon{position:absolute;top:10%;right:0;width:60px;height: 60px;}
				.nav-bar .menu ul{width:100%;overflow: hidden;padding-top: 80px;transition: height .5s;}
				.nav-bar .menu ul li{display:flex;width:100%;padding:5%;font-size: 20px;overflow: hidden;border-bottom: 1px solid #ccc}
				.nav-bar .menu ul .menu-title{display:flex;align-items: center;padding-left: 5%}
				.nav-bar-show ul{height: 100%;}
				.nav-bar-hidden ul{height: 0;}
				
			}
			
		</style>
		<script src="http://at.alicdn.com/t/font_1157887_p0r26uxhb1m.js" type="text/javascript"></script>
		<!--<script src="font_symble/iconfont.js" type="text/javascript"></script>-->
	</head>
	<body>
		<div class="nav-bar nav-bar-hidden">
			<div class="head-icon">
				<h2>某某管理系统</h2>
				<svg class="icon" aria-hidden="true" id="toggle">
    				<use xlink:href="#icon-ziyuan5"></use>
				</svg>
			</div>
			<div class="menu">
				<ul>
					<li>
						<div class="menu-icon">
							<svg class="icon" aria-hidden="true">
			    				<use xlink:href="#icon-xiangshui"></use>
							</svg>
						</div>
						<div class="menu-title">菜单项</div>
					</li>
					<li>
						<div class="menu-icon">
							<svg class="icon" aria-hidden="true">
			    				<use xlink:href="#icon-fangshaishuang"></use>
							</svg>
						</div>
						<div class="menu-title">菜单项</div>
					</li>
					<li>
						<div class="menu-icon">
							<svg class="icon" aria-hidden="true">
			    				<use xlink:href="#icon-jiemaogao"></use>
							</svg>
						</div>
						<div class="menu-title">菜单项</div>
					</li>
					<li>
						<div class="menu-icon">
							<svg class="icon" aria-hidden="true">
			    				<use xlink:href="#icon-kouhong"></use>
							</svg>
						</div>
						<div class="menu-title">菜单项</div>
					</li>
					<li>
						<div class="menu-icon">
							<svg class="icon" aria-hidden="true">
			    				<use xlink:href="#icon-huazhuangshua"></use>
							</svg>
						</div>
						<div class="menu-title">菜单项</div>
					</li>
					<li>
						<div class="menu-icon">
							<svg class="icon" aria-hidden="true">
			    				<use xlink:href="#icon-yanying"></use>
							</svg>
						</div>
						<div class="menu-title">菜单项</div>
					</li>
					<li>
						<div class="menu-icon">
							<svg class="icon" aria-hidden="true">
			    				<use xlink:href="#icon-penwu"></use>
							</svg>
						</div>
						<div class="menu-title">菜单项</div>
					</li>
				</ul>
				
			</div>
		</div>
		<script type="text/javascript">
			var toggle = document.getElementById('toggle');
			var leftBar = document.getElementsByClassName('nav-bar')[0]
			toggle.onclick = function(){
				let ToggleClass = leftBar.getAttribute('class')
				if(ToggleClass.search('nav-bar-hidden') != -1){
					leftBar.setAttribute('class','nav-bar nav-bar-show')
				}else if(ToggleClass.search('nav-bar-show') != -1){
					leftBar.setAttribute('class','nav-bar nav-bar-hidden')
				}

			}
			
		</script>
	</body>
</html>