侧边导航样式
做出如图所示效果的菜单,固定在页面左侧。
注意点:第一个右上角有斜角;红白背景间隔。需要用到的css知识点:选择器,fixed定位,linear-gradient() 函数
HTML:
<div class="menu">
<ul class="menu-wrap">
<li class="menu-item" data-nav="part2">菜单1</li>
<li class="menu-item" data-nav="part3">菜单2</li>
<li class="menu-item" data-nav="part4">菜单3</li>
<li class="menu-item" data-nav="part5">菜单4</li>
<li class="menu-item" data-nav="part6">菜单5</li>
<li class="menu-item" data-nav="part1">TOP<em></em></li>
</ul>
</div>
<div class="part1">
</div>
<div class="part2">
</div>
<div class="part3">
</div>
<div class="part4">
</div>
<div class="part5">
</div>
<div class="part6">
</div>
这里用的scss语法,高亮有些不对哦:
.menu {
position: fixed;
top: 23%;
left: 0;
width: 14.5%;
z-index: 1;
.menu-wrap {
font-size: 1em\0;
font-weight: bold;
text-align: center;
letter-spacing: 0.1rem;
.menu-item {
font-size: 1rem;
width: 100%;
height: 2.5em/0;
height: 2.5rem;
line-height: 2.5em/0;
line-height: 2.5rem;
cursor: pointer;
color: black;
&:nth-child(odd) {
background-color: #f5f5f7;
}
&:nth-child(even) {
background-color: #cb263d;
color: white;
}
&:first-child {
background: linear-gradient(-138deg, transparent 14px, #f5f5f7 0) right, linear-gradient(90deg, transparent 0px, #f5f5f7 0) left;
background-size: 51% 100%;
background-repeat: no-repeat;
letter-spacing: -0.05rem;
em {
display: inline-block;
width: 9%;
height: 2.9rem;
background: #f3e7c7;
position: absolute;
left: 0;
}
}
&:last-child {
background-color: #434444;
color: #d64833;
em {
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 10px solid #5ac3e2;
}
}
}
}
}
background: linear-gradient(-138deg, transparent 14px, #f5f5f7 0) right, linear-gradient(90deg, transparent 0px, #f5f5f7 0) left; 把right和left顺序交换也是一样的
拆解:
![](https://img2018.cnblogs.com/i-beta/1607217/201912/1607217-20191209110133092-1402703056.png)
js:
1 !(function ($) {
2 var Common = Common || {};
3
4 // 菜单导航跳转 参数:ul=>".menu-wrap"
5 Common.MenuNav = function (menuwrap, flag) {
6 if (!!!menuwrap) {
7 menuwrap = '.menu-wrap'
8 }
9 $(menuwrap).on('click', 'li', function () {
10 var visibleH = window.innerHeight || document.body.clientHeight;
11 var scrollH = $(window).scrollTop();
12 var _this = $("." + $(this).attr("data-nav"));
13 var targetTop = _this.offset().top;
14 $('html, body').animate({
15 scrollTop: targetTop - 40
16 }, 500);
17 })
18 }
19 $.Common = Common
20 })(jQuery)
21
22 $.Common.MenuNav()