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

html-css012

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

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

效果：

源码：

<h1><p>折叠1</p></h1>

<h1><p>折叠2</p></h1>

<h1><p>折叠3</p></h1>

<h1><p>折叠4</p></h1>

需要js来，最好用jquery来实现

只需要给h1绑定事件，单件它的时候，设置它的p属性，display:none。

HTML5+CSS3实现全屏导航栏菜单，悬停在右上角的小图标，点击以圆形扩散的方式绽开全屏导航栏，这种方式的导航栏很吸睛，运用也越来越广，赶紧学起来呀！

效果：

源码：