首页 前端知识 HTML5 CSS3小实例:后台管理系统的侧边导航栏

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

2024-03-06 09:03:13 前端知识 前端哥 319 729 我要收藏

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

效果:

 源码:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>侧边展开导航栏</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3325.html
标签
vscode
评论
发布的文章

JQuery简介与解析

2024-03-01 12:03:31

在Vue 3项目中使用 echarts

2024-03-29 15:03:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!