<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎光临Coding Coffee</title>
<style type="text/css">
.a{ text-align:center}
.sideber{
background-color:#333;
position:fixed;
width:200px;
top:0;
right:-300px;
bottom:0;
padding:40px 0;
}
.sideber ul{
margin:0;
padding:0;
list-style:none;
}
.sideber ul a{
color:white;
text-decoration:none;
padding: 10px 30px;
display:inline-block;
width:100%;
}
.sideber ul a:hover{
background-color:#444
}
.mask{
display:none;
background-color: rgba(0,0,0,0.3);
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
.userpic{
width:50px;
height:50px;
border-radius:50px;
border: 2px solid #eee;
position:fixed;
top:10px;
right:5px;
}
</style>
</head>
<body>
<div class="a">
<h1>欢迎光临Coding Coffee</h1>
<img src="./img/3.png">
<p>
敬请关注我们定期的<a href="test.html">产品列表</a>
coding coffee是一家只对程序员开放的<em>互联网咖啡馆.</em>
</p>
<p>
请查看我们的<a href="D:\我的html\Untitled2.html">分店</a>
</p>
</div>
<div>
<img class="userpic" src="./img/5.jpg">
</div>
<div class="mask"></div>
<div class="sideber">
<ul>
<li><a href="#">关于我</a></li>
<li><a href="#">想约我吗?</a></li>
<li><a href="#">包养我。。</a></li>
<li><a href="#">与君共勉</a></li>
<li><a href="#">。。。</a></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
js代码
var sidebar = $('.sidebar');
var mask = $('.mask');
var sidebar_trigger = $('.userpic')
function showSideBar(){
mask.fadeIn();
sidebar.css('right',0);
}
function hideSideBar(){
mask.fadeOut();
sidebar.css('right',-sidebar.width());
}
sidebar_trigger.on('click',showSideBar);
mask.on('click',hideSideBar);