Skip to content

Instantly share code, notes, and snippets.

@hyg

hyg/sidebar.css

Last active Aug 29, 2015
Embed
What would you like to do?
a simple sidebar template
.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;
position: absolute;
top: 0;
}
.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;
}
.nav .sidebar:hover,
.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;
list-style-type:none;
}
.sidebar ul li:not(.devider):hover {
background: #EEEEEE;
}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sidebar.css" />
</head>
<body>
<!--content begin-->
<!--content end-->
<div class="nav">
<div class="home">
<span><img src="favicon.ico"></img></span>
</div>
<div class="sidebar">
<ul>
<li>
<span>Home</span>
</li>
<li class="devider"></li>
<li>
<span>Profile</span>
</li>
<li>
<span>Circles</span>
</li>
<li>
<span>Photos</span>
</li>
<li class="devider"></li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.