程序博客网 > 中网数据传奇

CSS3扁平化组件侧栏

来源：互联网发布：中网数据传奇编辑：程序博客网时间：2024/06/16 12:32

<body>

<div>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">连接2</a></li>
<li><a href="#">连接3</a></li>
<li id="sidebar_trigger"><a href="#">侧栏菜单</a></li>
</ul>
</nav>
<div class="mask"></div>
<div id="sidebar">
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>
</div>
</header>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>

</body>

css样式

.mask{
display:none;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
background:rgba(0,0,0,0.3);
}
#sidebar{
position:fixed;
top:0px;
bottom:0px;
right:-300px;
width:300px;
background:#333;
padding:20px 0px;
transition:right 0.5s;
}
#sidebar ul{
list-style:none;
margin:0px;
padding:0px;
}
#sidebar ul a{
text-decoration:none;
padding:10px 30px;
color:#fff;
display:inline-block;
width:100%;
}
#sidebar ul a:hover{
background:#444;
}

js

;$(function()
{
'use strict';
var sidebar = $('#sidebar'),
mask = $('.mask'),
sidebar_trigger = $('#sidebar_trigger');

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)

})

0 0

中网数据传奇

中网数据传奇

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子纤小猕猴桃多吃猕猴桃有什么好处婴儿能吃猕猴桃吗猕猴桃管理硬的猕猴桃可以吃吗怎样做猕猴桃干怎样种植猕猴桃树黄心猕猴桃的营养价值空腹猕猴桃猕猴桃过敏吗猕猴桃的英文猕猴桃汁的做法野生猕猴桃可以泡酒吗摘猕猴桃的地方红心猕猴桃如何保存怀孕可以吃猕猴桃猕猴桃酒代理石榴猕猴桃猕猴桃苗出售猕猴桃如何存放红心猕猴桃团购徐乡猕猴桃山猕猴桃红瓤猕猴桃做猕猴桃酒的方法猕猴桃包装设计如何做猕猴桃干猕猴桃是寒性的吗红心猕猴桃苗种植弥赛亚弥赛拉梅里奥达斯弥陀寺弥陀经全文读诵弥陀经弥陀经读诵弥陀经全文念诵弥陀经全文注音版弥陀经念诵弥陀经唱诵mp3 读诵弥陀经