题外话(小故事):
不停地踩坑中。。。
今天同事拿笔记本去演示,突然发现平时电脑上好好的左侧导航无法点到下一个,顿时急得满头大汗。对同事的遭遇深感愧疚,毕竟我是一个不合格的前端,踩坑没踩好。
同时发现,前端之路上我才起步。
正文开始:(本文借鉴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>