代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
nav{
margin: 5px
width: 100pxheight: 200px
background-color: red
float: right
}
</style>
</head>
<body>
<nav class="right">右</nav>
<nav>中</nav>
<nav>左</nav>
</body>
</html>
HTML5+CSS3做一个后台管理系统的侧边导航栏,点击三条杠,可以收起或展开侧边导航栏。收起时,图标变大,文本在图标下方,管理员头像右侧的欢迎语隐藏;展开时图标变小,文本在图标的右侧显示,管理员头像右侧的欢迎语显示。切换过程伴有过渡动画,右侧内容区可以放自己的内容。
效果:
源码: