网页侧边栏的实现

字数统计: 1.4k   |   阅读时长≈ 6 分钟

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

下文将介绍两种侧边栏：

右侧边栏

示例 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♪(･ω･)ﾉ 都是微信

支付宝
微信