纯CSS实现的类似google+的自动隐藏的侧边栏
先看结果：
将鼠标放在HOME按钮上，出现侧边栏。
之前我们 Ember JS 论坛的QQ群上有人问起这个问题，现在我将自己的一个解决方案记下来。
我觉得之前更多的处理方法是采用javascript的方式来处理鼠标悬浮事件，而貌似比较少采用纯CSS的方式来处理，因此我觉得有记下来的一点意义。
首先先整理一下思路：
以某种方式隐藏侧边栏（sidebar）;
处理按钮的hover样式，以某种方式使sidebar出现;
处理sidebar的hover样式，以免当鼠标移出按钮区域，但还在sidebar上时，sidebar隐藏了;
适当加入一点点渐近效果。
开始实践：
1
2
3
4
| .google-plus-example {
position: relative;
overflow: hidden;
}
|
将他的position设置为relative，这样内部的元素就以它为基准了（?）。
并且，设置它的overflow为hidden，这样我们下一步的sidebar躲起来的时候就不会露出来了。
1
2
3
4
5
6
| .sidebar {
position: absolute;
top: 0;
left: -200px;
bottom: 0;
}
|
把它的left设置为-200px，让它躲在我们看不见的地方。具体这里为什么是left而不是直接隐藏起来，我们后面讲。
1
2
3
| .home:hover + .sidebar {
left: 0;
}
|
这个CSS的作用是，当.home有鼠标悬浮（:hover）时，设置.sidebar的样式。
这里的.home指的就是HOME按钮。
把sidebar的left设回0，这样sidebar就出现了。
- 接下来是设置sidebar的hover样式，使得当鼠标不在按钮上面，但在它自身上面时，不隐藏
1
2
3
| .sidebar:hover {
left: 0;
}
|
与上面是一样的。
给sidebar加transition样式，指定为left变化时有效果：
1
2
3
4
5
6
| .sidebar {
-webkit-transition: left .1s .1s linear;
-moz-transition: left .1s .1s linear;
-o-transition: left .1s .1s linear;
transition: left .1s .1s linear;
}
|
给sidebar出现时添加一个阴影效果：
1
2
3
4
5
6
7
| .sidebar:hover,
.home:hover + .sidebar {
-webkit-box-shadow: 0 0 40px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 40px rgba(0,0,0,.4);
-o-box-shadow: 0 0 40px rgba(0,0,0,.4);
box-shadow: 0 0 40px rgba(0,0,0,.4);
}
|
整体思路就是这样。
历史遗留问题
最后再来说说上面遗留的问题，为什么使用left属性而不是使用display属性。
其实，使用display属性是没有问题，初始情况下，设置sidebar的display属性为none;，当hover的时候将其的display属性设置为block;，问题是使用这个好像transition对其没有效果，所以我的选择是：使用left。希望知道其中奥妙的童鞋给我一个答案吧。
P.S.
贴上面示例的代码：
(google-plus-example.html) download
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
| <div class="example google-plus-example">
<div class="nav">
<div class="home">
<span class="icon icon-home"></span>
<span>Home</span>
<span>></span>
</div>
<div class="sidebar">
<ul>
<li>
<span class="icon icon-home"></span>
<span>Home</span>
</li>
<li class="devider"></li>
<li>
<span class="icon icon-profile"></span>
<span>Profile</span>
</li>
<li>
<span class="icon icon-circles"></span>
<span>Circles</span>
</li>
<li>
<span class="icon icon-photos"></span>
<span>Photos</span>
</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
|
(google-plus-example.css) download
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
| .example {
border: 1px solid gray;
position: relative;
overflow: hidden;
}
.example.google-plus-example {
height: 250px;
}
.icon {
height: 18px;
width: 20px;
display: inline-block;
}
.icon-home {
background: url("/images/google_plus.png") -21px -66px no-repeat;
}
.icon-profile {
background: url("/images/google_plus.png") -59px -85px no-repeat;
}
.icon-circles {
background: url("/images/google_plus.png") -21px -85px no-repeat;
}
.icon-photos {
background: url("/images/google_plus.png") 0 -66px no-repeat;
}
.google-plus-example .nav .home {
padding: 12px;
color: #737373;
display: inline-block;
font-size: 14px;
margin-bottom: 2px;
margin-right: 4px;
max-width: 162px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
cursor: pointer;
}
.google-plus-example .sidebar {
width: 200px;
position: absolute;
top: 0;
left: -200px;
bottom: 0;
background: white;
-webkit-transition: left .1s .1s linear;
-moz-transition: left .1s .1s linear;
-o-transition: left .1s .1s linear;
transition: left .1s .1s linear;
}
.google-plus-example .nav .sidebar:hover,
.google-plus-example .nav .home:hover + .sidebar {
left: 0;
-webkit-box-shadow: 0 0 40px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 40px rgba(0,0,0,.4);
-o-box-shadow: 0 0 40px rgba(0,0,0,.4);
box-shadow: 0 0 40px rgba(0,0,0,.4);
}
.sidebar ul li {
padding: 10px 20px;
}
.sidebar ul li:not(.devider):hover {
background: #EEEEEE;
}
.sidebar ul li.devider {
padding: 0;
}
|