网页侧边栏的实现

既然是侧边栏,那么肯定分“左”和“右”了。

下文将介绍两种侧边栏:


右侧边栏

示例 https://thdbd.github.io/222

首先分析一下动作和组成——

按下按钮,右侧边栏弹出(原始状态为隐藏,所以 width=0),出现标签,关闭按钮;

即弹出右侧边栏的点击事件能够改变右侧边栏 width 的值;

而弹出过程中需要加入延迟时间,否则就会直接显示;

全过程中引入了:

&times ; 交叉符;

&#9776 ; 三横线符;

cursor:pointer; 光标触碰效果。

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--侧栏界面设计-->

<div id="1" class="sidenav">

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<a href="#">阿巴阿巴</a>

<a href="#">阿巴阿巴</a>

<a href="#">阿巴阿巴</a>

<a href="#">阿巴阿巴</a>

</div>

Java Script部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/ecmascript">

/*改变原始宽度(0)*/

function openNav() {

document.getElementById("1").style.width = "250px";

}

/*恢复原始宽度0*/

function closeNav() {

document.getElementById("1").style.width = "0";

}

</script>

CSS/CSS3部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<style type="text/css">

@charset "utf-8";

/* CSS Document */

body {

font-family: "Lato", sans-serif;

}

/*侧边栏描绘*/

.sidenav {

height: 100%;

width: 0; /*原始宽度为0*/

position: fixed;

z-index: 1;

top: 0;

right: 0;

background-color: #111;

overflow-x: hidden;

transition: 0.5s;

padding-top: 60px;

}

/*侧边栏选项描绘*/

.sidenav a {

padding: 8px 8px 8px 32px;

text-decoration: none;

font-size: 25px;

color: #818181;

display: block;

transition: 0.3s;

}

/*侧边栏标签和关闭按钮光标的效果*/

.sidenav a:hover, .offcanvas a:focus{

color: #f1f1f1;

}

/*侧边栏和关闭按钮的位置*/

.sidenav .closebtn {

position: absolute;

top: 0;

right: 25px;

font-size: 36px;

margin-left: 50px;
}


/*当文档高度小于450px时,改变侧栏的padding属性和字体大小*/

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}

</style>

transition: 0.5s; 延迟0.5秒弹出右侧边栏;

使用 @media 查询,可以针对不同的媒体类型定义不同的样式;

@media可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的;

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。


左侧边栏

示例 https://thdbd.github.io/111

分析动作和组成——

按下按钮,右侧边栏弹出(原始状态为隐藏,所以width=0),主体向右移动,背景颜色透明度改变,出现标签,关闭按钮,主体向左移动;

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--侧栏界面设计-->

<div id="1" class="sidenav">

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<a href="#">阿巴阿巴</a>

<a href="#">阿巴阿巴</a>

<a href="#">阿巴阿巴</a>

<a href="#">阿巴阿巴</a>

</div>

Java Script部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">

/*打开侧栏,修改侧栏宽度,主体左跨度、背景透明度*/

function openNav() {

document.getElementById("1").style.width = "250px";

document.getElementById("2").style.marginLeft = "250px";

document.body.style.backgroundColor = "rgba(0,0,0,0.4)";

}
/*关闭侧栏,恢复原始侧栏宽度,主体左跨度、背景透明度*/

function closeNav() {

document.getElementById("1").style.width = "0";

document.getElementById("2").style.marginLeft= "0";

document.body.style.backgroundColor = "white";

}

</script>

通过JS改变左侧边栏 width 值、主体 marginLeft 的值、背景的透明度backgroundColor,来控制左侧边栏宽度,主体左跨度、背景透明度和右边侧栏显示和隐藏效果。

CSS/CSS3部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<style type="text/css">

@charset "utf-8";

/* CSS Document */

body {

font-family: "Lato", sans-serif;

transition: background-color .5s;

}

/*侧边栏选择器*/

.sidenav {

height: 100%;

width: 0; /*原始宽度*/

position: fixed;

/*z-index、top、left共同控制侧栏的悬浮(上方1,下方-1)*/

z-index: 1;

top: 0;

left: 0;

background-color: #111;

overflow-x: hidden;

transition: 0.5s; /*侧栏延迟0.5s显示*/

padding-top: 60px;

}

/*侧边栏标签选择器*/

.sidenav a {

padding: 8px 8px 8px 32px;

text-decoration: none;

font-size: 25px;

color: #818181;

display: block;

transition: 0.3s; /*标签延迟0.3s显示*/

}

/*侧栏标签和关闭按钮光标的效果*/

.sidenav a:hover, .offcanvas a:focus{

color: #f1f1f1;

}

/*侧栏和关闭按钮的位置选择器*/

.sidenav .closebtn {

position: absolute;

top: 0;

right: 25px;

font-size: 36px;

margin-left: 50px;

}

/*主体内容*/

#main {

transition: margin-left .5s;/*主体内容延迟0.5s整体y右移动*/

padding: 16px;

}

/*当文档高度小于450px时,改变侧栏的padding属性和字体大小*/

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}

</style>

左侧边栏选择器中 position、z-index、top、left共同控制侧栏的悬浮(上方1,下方-1);

transition: background-color .5s; 背景透明度变化的延迟效果 ;

transition: 0.5s; 左侧边栏延迟显示效果 ;

transition: 0.3s; 标签延迟显示效果 ;

transition: margin-left .5s; 主体内容延迟整体右移动;

使用 @media 查询,可以针对不同的媒体类型定义不同的样式;

@media可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的;

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

打赏
  • Copyrights © 2005-2021 听话的便当
  • 访问人数: | 浏览次数:

Thanks♪(・ω・)ノ 都是微信

支付宝
微信