HTML5+CSS3小实例：后台管理系统的侧边导航栏

html-css08

HTML5+CSS3小实例：后台管理系统的侧边导航栏,第1张

HTML5+CSS3做一个后台管理系统的侧边导航栏，点击三条杠，可以收起或展开侧边导航栏。收起时，图标变大，文本在图标下方，管理员头像右侧的欢迎语隐藏；展开时图标变小，文本在图标的右侧显示，管理员头像右侧的欢迎语显示。切换过程伴有过渡动画，右侧内容区可以放自己的内容。

效果：

源码：

设置3个导航nav，最右边的nav设置class=right，然后设置nav的css边距，宽，高，背景颜色（便于我们看见），再设置一个float为右就会靠右排列，注意：float时第一个会到右边，所以设置第一个为最右边的导航栏

代码

<!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>