代码:
<!DOCTYPE html> | |
<html> | |
<head> | |
<title></title> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
body{font-size: 12px;} | |
body,menu,ul,li,span{ | |
margin:0px;padding: 0px; | |
} | |
menu{ | |
width: 5px; | |
height: 100%; | |
background: #7A6E6E; | |
position: fixed; | |
right: 0px; | |
} | |
.l-nav{ | |
width: 36px; | |
height: 240px; | |
position:fixed; | |
top: 35%; | |
right: 3px; | |
} | |
.l-nav ul li{ | |
position: relative; | |
background:#7A6E6E; | |
width: 36px; | |
height: 35px; | |
color: #ffffff; | |
list-style: none; | |
background-image: url(pic/toolbars.png); | |
border-radius: 5px 0px 0px 5px; | |
margin-top: 1px; | |
} | |
.l-nav ul li:last-child{border-bottom: none;} | |
.l-nav ul li span{ | |
height: 35px; | |
width: 0px; | |
transition:all 0.2s 0.2s; | |
text-align: center; | |
line-height: 35px; | |
overflow: hidden; | |
border-radius: 3px 0px 0px 3px; | |
display: block; | |
background: #c81623; | |
position: absolute; | |
right: 33px; | |
color: #ffffff; | |
} | |
.l-nav ul li:hover{background-color: red;} | |
.l-nav ul li:hover span{ | |
width: 60px; | |
} | |
.l-nav ul li:hover{ | |
background-color: #c81623; | |
} | |
.l-nav ul li:nth-child(1){ | |
background-position: -85px -175px; | |
} | |
.l-nav ul li:nth-child(2){ | |
background-position: -47px 1px; | |
} | |
.l-nav ul li:nth-child(3){ | |
background-position: -47px -49px; | |
} | |
.l-nav ul li:nth-child(4){ | |
background-position: -47px -100px; | |
} | |
.l-nav ul li:nth-child(5){ | |
background-position: -187px -150px; | |
} | |
.l-nav ul li:nth-child(6){ | |
background-position: -47px -149px; | |
} | |
</style> | |
</head> | |
<body> | |
<menu></menu> | |
<div class="l-nav"> | |
<ul> | |
<li><span>京东会员</span></li> | |
<li><span>购物车</span></li> | |
<li><span>我的关注</span></li> | |
<li><span>我的足迹</span></li> | |
<li><span>我的消息</span></li> | |
<li><span>咨询JIMI</span></li> | |
</ul> | |
</div> | |
</body> | |
</html> |