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

html-css022

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

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

效果：

源码：

这样的导航一般是切两张图片下来

一张是正常状态时候的图片

一张是鼠标移上去时的图片

把切下来的两张图片合在一起，变成一张（这样是为了减少对服务器的请求次数，减小服务器的压力，一般大的网站都是这样做的）

然后设置css，a：hover时，更改背景，注意把背景的位置调整正确

就可以达到效果了

不懂的话百度hi我

给你做类似的例子

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul>和 <li>元素非常有意义：

<ul>

<li><a href="#home">主页</a></li>

<li><a href="#news">新闻</a></li>

<li><a href="#contact">联系</a></li>

<li><a href="#about">关于</a></li></ul>

从列表中删除边距和填充：

ul {

list-style-type: none margin: 0 padding: 0}