<body>
<div id="div1">
<ul>
<li></li>
</ul>
</div>
<script>
var oDiv = document.getElementById('div1')
var oUl = oDiv.getElementsByTagName('ul')[0]
var Off = true
oDiv.onclick = function(){
if(Off){
oUl.style.display = "block"
Off = false
}else{
oUl.style.display = "none"
Off = true
}
}
</script>
HTML5+CSS3做一个后台管理系统的侧边导航栏,点击三条杠,可以收起或展开侧边导航栏。收起时,图标变大,文本在图标下方,管理员头像右侧的欢迎语隐藏;展开时图标变小,文本在图标的右侧显示,管理员头像右侧的欢迎语显示。切换过程伴有过渡动画,右侧内容区可以放自己的内容。
效果:
源码:
移动端开发过程中,前端在请求后台的数据时,为了用户体验更加完善,通常需要分页请求,在点击展开时以往我常常喜欢直接将数据全部加载,给用户的体验以及页面效果非常不好,点击收起时也是如此,为了提升用户体验以及页面美观,我们可以采用css3中的transition在交互中使用渐进动画。demo如下:
演示实例如下图所示:
在具体的项目运用过程中只需要给id为more的div一个高度,具体高度根据页面情况而定,当然有很多不同的方式来达到交互效果,对css动画不是很了解,采用了一种最简单的方式,欢迎各位大神指教。