前台管理导航固定左侧并滚动显示

最新推荐文章于 2023-11-30 11:01:36 发布

-Always-

最新推荐文章于 2023-11-30 11:01:36 发布

阅读量704

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：左侧固定导航左侧导航固定导航滚动隐藏导航隐藏滚动

本文链接：https://blog.youkuaiyun.com/u012836656/article/details/85127168

前端专栏收录该内容

14 篇文章

订阅专栏

题外话（小故事）：
不停地踩坑中。。。
今天同事拿笔记本去演示，突然发现平时电脑上好好的左侧导航无法点到下一个，顿时急得满头大汗。对同事的遭遇深感愧疚，毕竟我是一个不合格的前端，踩坑没踩好。
同时发现，前端之路上我才起步。

正文开始：（本文借鉴layuiAdmin左侧导航）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>隐藏滚动条</title>
	<style>
		*{ margin: 0; padding: 0; }
		ul,li{ list-style: none; }
		a{ text-decoration: none; }
		img{ border: none; vertical-align: middle; }
		body{ font-size: 16px; }
		/*左侧导航主要代码*/
		.side-menu{
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			z-index: 999;
			width: 240px;
			overflow-x: hidden;
			background: #0c1719;
		}
		.side-scroll{
			position: relative;
			width: 260px;
			height: 100%;
			overflow-x: hidden;
		}
		.side-logo{
			position: fixed;
			left: 0;
			top: 0;
			height: 80px;
			background-color: #fff;
			z-index: 999;
		}
		.menu-total{
			position: relative;
			width: 240px;
			margin-top: 80px;
			box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    -webkit-box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="side-menu">
		<div class="side-scroll">
			<div class="side-logo">
				<div class="logo-img"><img src="logo.png" alt=""></div>
			</div>
			<ul class="menu-total">
				<li><a class="link icon1" href="javascript:;">首页</a></li>
				<li><a class="link icon2">分类一<i class="nav-more"></i></a>
					<ul class="menu-child">
						<li><a href="javascript:;">分类1</a></li>
						<li><a href="javascript:;">分类2</a></li>
						<li><a href="javascript:;">分类3</a></li>
						<li><a href="javascript:;">分类4</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script>
		$(function(){
			//鼠标在左侧滚动时body不滚动
			var scrollTop = -1; 
			$('.side-menu').hover(function(){
				scrollTop = $(window).scrollTop();
			}, function(){
				scrollTop = -1;
			});
			$(window).scroll(function(){
				scrollTop!==-1 && $(this).scrollTop(scrollTop);
			})

			//左侧导航点击效果
			$(".menu-total li .link").on('click',function(){
				var $this = $(this);
				var menuChild = $this.next(".menu-child");
				var thisLi = $this.parent("li");
				var otherLink = thisLi.siblings().find(".link");
				var otherChild = thisLi.siblings().find(".menu-child");

				otherLink.removeClass("active");
				otherChild.slideUp();
				menuChild.slideToggle();
				$this.toggleClass("active");
				thisLi.addClass("bg");
				thisLi.siblings().removeClass("bg");
			})
			//链接
			$(".menu-child li a").on('click',function(){
				$this = $(this);
				$(".menu-child li a").removeClass("on");
				$this.addClass("on");
			})
		})
	</script>
</body>
</html>