折叠菜单栏

最新推荐文章于 2023-02-15 13:54:07 发布
最新推荐文章于 2023-02-15 13:54:07 发布
阅读量520 收藏 1
点赞数
文章标签： 菜单栏 可折叠
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38372917/article/details/97642931
版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<link rel="stylesheet" href="./iconfont.css">

<style>

/* 侧边栏基本样式 */

body {

margin: 0px;

padding: 0px;

}

a { text-decoration:none;}

ul,li{ padding:0;margin:0;list-style:none}

.aside {

position: fixed;

width: 215px;

height: 100%;

background-color: #262930;

transition:all 0.3s ease;

}

.main {

margin-left: 215px;

}

.aside > .aside_top {

height: 60px;

line-height: 60px;

text-align: center;

background-color: #00bfa5; color: #fff; font-size: 18px

}

.aside_top > h4 {

margin: 0px;

}

.aside_middle {

text-align: center;

}

.imgbox {

max-height: 80px; max-width: 80px;

background: #3d4147; -webkit-border-radius: 50%;

margin: 10px auto;

}

.imgbox > img {

border-radius: 50%;

width: 100%;

height: 100%;

}

.iconfont {

margin-right: 10px;

}

.aside_middle > b{

display: block;

margin-top: 20px;

color: #f3f3f4; font-size: 13px;

}

.aside_middle > p{ margin-top: 4px;color: #acb0b8; font-size: 12px;}

.aside_bottom li a {

display: block; padding: 10px;

font-size: 14px; border-left: 2px solid transparent;

transition: .3s linear;

color:#9d9d9d;

}

.aside_bottom ul > li > .hover,

.aside_bottom ul > li > .barlist:hover{

border-left: 2px solid #21b496; background: #20242c; text-decoration: none;

}

.iright{font-family:"宋体"; font-style: normal;margin-left: 5px}

.sidebar-dropdown{

display: none;

font-size: 14px; background: #20242c; border-left: 2px solid #21b496;

}

.sidebar-dropdown > li > a{display: block; padding: 10px 0 10px 36px;}

/* 侧边栏折叠切换 */

.sidebar-collapse .main {

margin-left: 60px;

}

.sidebar-collapse .aside {

width: 60px;

}

/* .sidebar-collapse .aside_middle .imgbox {

display: none;

} */

.sidebar-collapse .sidespan {

display: none;

}

.sidebar-collapse .iright {

display: none;

}

.sidebar-collapse .sidenav > li{position: relative; z-index: 9999; text-align: center;}

.sidebar-collapse .sidenav > li:hover .sidebar-dropdown{display: block!important;}

.sidebar-collapse .sidebar-dropdown{

position: absolute; top: 0; left: 60px; z-index: 9999;

display: none!important;

width: 150px; border-left: none; list-style: none;

}

.sidebar-collapse .sidebar-dropdown > li > a{padding-left: 0; }

.sidebar-collapse .sidebar-dropdown > li > a:hover{background: #191e26; text-decoration: none; color: #fff;}

/* .sidebar-collapse > .aside_bottom_ul li:hover .twobar {

display: block !important;

}

.sidebar-collapse .twobar {

position: absolute;

left: 60px;

width: 150px;

color: #fff;

} */

</style>

</head>

<body>

<div class="aside">

<div class="aside_top">

<h4>后台管理系统(爱拉比)</h4>

</div>

<div class="aside_middle">

<div class="imgbox"><img src="./2019_1.jpeg" alt=""></div>

<b>Hi~</b>

<p>admin</p>

</div>

<div class="aside_bottom">

<ul class="sidenav animated fadeInUp">

<li><a class="hover barlist" href="javascript:;"><span class="iconfont icon-all-fill"></span><span class="sidespan">首页</span></a></li>

<li>

<a class="barlist" href="javascript:;"><span class="iconfont icon-edit"></span><span class="sidespan">个人办公</span><i class="iright pull-right">&gt;</i></a>

<ul class="sidebar-dropdown">

<li><a href="">待办事项</a></li>

<li><a href="">审批管理</a></li>

</ul>

</li>

<li><a class="barlist" href="javascript:;"><span class="iconfont icon-bell"></span><span class="sidespan">日历行程</span></a></li>

<li><a class="barlist" href="javascript:;"><span class="iconfont icon-cog-fill"></span><span class="sidespan">系统设置</span></a></li>

</ul>

</div>

</div>

<div class="main">

<button class="btn">按钮</button>

</div>

<script>

// 二级菜单的展开和收缩

$('.barlist').click(function() {

$(this).addClass("hover");

$(this).next().slideToggle();

$(this).parent().siblings().children("a").removeClass("hover").next().slideUp();

})

$('.btn').click(function() {

$("body").toggleClass("sidebar-collapse");

if($("body").hasClass("sidebar-collapse")) {

$(".aside_top > h4").html("admin");

} else {

$(".aside_top > h4").html("后台管理系统(爱拉比)");

}

return false;

})

</script>

</body>

</html>

爱拉比
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
菜单栏
ルーキーの殇
04-30 2227
菜单通常用来显示程序是各项功能，以方便用户选择执行。通过对菜单栏的访问，用户可以快速进入需要的界面，因此，在开发Windows应用程序时，菜单仍然是组织大量选项最常用的方法。 一、菜单栏的用途 菜单栏是可视化编程的重要组成部分，可以方便地给命令分组并访问这些命令。制作菜单栏所使用的控件为ContextMenuStrip和MenuStrip控件。菜单栏通常分为下拉式菜单和弹出式菜单两种。 1、
层叠菜单
一篇关于代码的文章
10-26 489
js脚本实现层叠菜单效果（源码） &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html &amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&am
docsify-sidebar-collapse:一个docsify插件，支持侧边栏目录的扩展和折叠
05-11
docsify-sidebar-collapse 支持docsify侧边栏目录扩展和折叠 预习 用法 首先，确保已启用配置，并且根目录中提供了Markdown文件_sidebar.md 。 然后将脚本插入文档中，就像的用法一样 < script > window . $docsify = { loadSidebar : true , alias : { '/.*/_sidebar.md' : '/_sidebar.md' , } , subMaxLevel : 3 , ... sidebarDisplayLevel : 1 , // set sidebar display level } </ script > < script src =" //cdn.jsdelivr.net/npm/docsify/lib/doc
jquery隐藏侧边栏和折叠侧边栏方法
xu15936789020的博客
06-25 1万+
两种效果如下所示：隐藏侧边栏： 折叠侧边栏： 下面，分享隐藏侧边栏实现方法：实现思路：给body切换class，通过class控制侧边栏和主体部分left 来实现效果html部分：12&lt;div class="sidebar"&gt;侧边栏&lt;/div&gt;&lt;div class="main"&gt;主体部分&lt;/div&gt; css部分：1234.sidebar{backgr...
ASP.NET MVC结合AdminLte模板设置左侧菜单栏动态高亮显示
ALaDingPro的博客
10-17 3531
前言 AdminLte模板将左侧菜单栏高亮显示的效果写死了，如图所示： 在ASP.NET MVC框架中，我将左侧菜单栏作为分部页分离出来。这就意味着，它是个公共文件，不能直接添加active.。 解决方案 我的想法是：在分部页中获取当前控制器和方法，然后判断是否要添加active。 我在左侧菜单栏分部页的开头添加了以下代码： @{ //得到当前访问的controlle...
解决adminLTE 左侧菜单点击后自动收起来的一个简单方法
心如海的博客
06-24 5573
最近用到adminLTE模版框架，这是一个好东东，只是在使用中发现点击左侧菜单后，会自动收起，因本人侧重后端django的编写，对前端的js不是很在行，所以就想到<li class='active'>可以让一个菜单保持点击状态 ，所以就在后端的视图函数渲染模板时传递一下个参数，在li中进行比较， 比如在视图函数中这样写，return render(request, 'xxx.html...
vue3+typescrip通过组件传值实现菜单栏的收缩功能
yasuo56的博客
02-15 318
vue3+typescrip通过组件传值实现菜单栏的收缩功能
WPF自定义左侧折叠菜单
11-27
- 使用`Grid`：可以创建两列，第一列固定宽度作为菜单栏，第二列占据剩余空间显示主要内容。 2. **菜单项的创建** - 使用`TreeView`控件：`TreeView`可以方便地展示层级结构的数据，每个`TreeViewItem`代表一个...
jQuery动画手风琴折叠菜单栏代码
04-07
本文将深入探讨如何使用jQuery实现一个粉红色风格的手风琴折叠菜单栏。 首先，我们要明白手风琴菜单是一种交互式用户界面元素，它允许在一个有限的空间内展示多个层次的内容。当用户点击某个项目时，该项目的子菜单...
手风琴折叠菜单栏网页特效
11-18
手风琴折叠菜单栏是一种常见的网页交互效果，它在网页设计中被广泛应用，尤其是在导航菜单、侧边栏或内容展示区域。这种效果以其独特的收缩和展开特性，为用户提供了简洁而有效的界面体验，使得大量的信息可以以有...
WPF折叠菜单
11-08
在Windows Presentation Foundation（WPF）中，折叠菜单是一种常见的用户界面元素，用于高效地展示层次化的数据或选项。这种菜单可以节省屏幕空间，因为它只显示当前选定或展开的子菜单，而其他子菜单则保持折叠状态...
jQuery动画手风琴折叠菜单栏代码.zip
07-03
在本文中，我们将深入探讨如何使用jQuery实现一个粉红色风格的手风琴折叠菜单栏，以及相关的JavaScript特效。手风琴菜单是一种常见的用户界面元素，它允许用户在一个有限的空间内展示和隐藏大量的分类内容，通常通过...
菜单伸缩改变导航栏思路
xiaosongwahaha的博客
12-21 535
1、 #collapse-sidebar 为菜单伸缩的按钮，当点击这个按钮时html中body的css会进行切换，如： $('#collapse-sidebar').click(function () {             $('#page-sidebar, #page-content-wrapper, #header-logo').removeClass('rm-
HTML常用图表（柱状图，折线图，饼图，关联图，表格）的绘制
热门推荐
数据挖掘+大数据研发+算法学习
05-07 1万+
一：柱状图/折线图的绘制 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width:80%;height:400px;margin: 0 a
Java 图形设计 -- 布局策略
weixin_45975659的博客
09-29 944
一、背景 在界面设计中，一个容器要放置许多组件，为了美观，为组件安排在容器中的位置，这就是布局设计。 java.awt 中定义了多种布局类，每种布局类对应一种布局策略。 常用布局类有五种： 流布局管理器 FlowLayout: 依次放置组件。 边界布局管理器 BorderLayout: 将组件放置在边界上。 箱式布局管理器 BoxLayout: 管理一组水平或垂直排列的组件。 卡片布局管理器 CardLayout: 将组件像扑克牌一样叠放，而每次只能显示其中一个组件。 网格布局管理器 GridLayout
Docsify 侧边栏 : 自动生成sidebar与子目录sidebar
未将对象引用设置到对象的实例
12-10 4929
Docsify 侧边栏 : 自动生成sidebar与子目录sidebar https://github.com/xxxxue/Docsify-Build-Sidebar
记录：前端框架Bootstrap学习使用之组件——Collapse（折叠）
lky_for_lucky的博客
11-24 3792
Collapse作用： 折叠，如左侧各级菜单栏折叠。 Collapse工作原理： 将元素的高度变为0（感兴趣的可以去看源码） Collapse使用： class="collapse" 将要折叠的内容声明为collapse类 通过按钮控制折叠（非按钮如链接a可以声明role="button"） Collapse选项：（处于按钮中） data-bs-toggle="collapse" （绑定collapse事件） data-bs-target="#target" （折叠的目标，可用
b051银行客户管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
最新发布
07-23
系统根据B/S，即所谓的电脑浏览器/网络服务器方式，运用Java技术性，挑选MySQL作为后台系统。系统主要包含对客服聊天管理、字典表管理、公告信息管理、金融工具管理、金融工具收藏管理、金融工具银行卡管理、借款管理、理财产品管理、理财产品收藏管理、理财产品银行卡管理、理财银行卡信息管理、银行卡管理、存款管理、银行卡记录管理、取款管理、转账管理、用户管理、员工管理等功能模块。 文中重点介绍了银行管理的专业技术发展背景和发展状况，随后遵照软件传统式研发流程，最先挑选适用思维和语言软件开发平台，依据需求分析报告模块和设计数据库结构，再根据系统功能模块的设计制作系统功能模块图、流程表和E-R图。随后设计架构以及编写代码，并实现系统能模块。最终基本完成系统检测和功能测试。结果显示，该系统能够实现所需要的作用，工作状态没有明显缺陷。 系统登录功能是程序必不可少的功能，在登录页面必填的数据有两项，一项就是账号，另一项数据就是密码，当管理员正确填写并提交这二者数据之后，管理员就可以进入系统后台功能操作区。进入银行卡列表，管理员可以进行查看列表、模糊搜索以及相关维护等操作。用户进入系统可以查看公告和模糊搜索公告信息、也可以进行公告维护操作。理财产品管理页面，管理员可以进行查看列表、模糊搜索以及相关维护等操作。产品类型管理页面，此页面提供给管理员的功能有：新增产品类型,修改产品类型,删除产品类型。
tkinter 左侧折叠菜单栏
06-01
要实现一个左侧折叠菜单栏，可以使用Tkinter中的`PanedWindow`控件。`PanedWindow`可以将窗口分成多个可调节大小的区域，我们可以将左侧的折叠菜单栏和右侧的主窗口分别放在`PanedWindow`的两个区域中。 具体实现步骤如下： 1.创建一个主窗口。 2.创建一个`PanedWindow`控件，并将其方向设置为`tkinter.HORIZONTAL`。 3.创建左侧的折叠菜单栏，可以使用`Label`和`Button`等控件来实现，将它们放在`PanedWindow`的左侧区域。 4.创建右侧的主窗口，将其放在`PanedWindow`的右侧区域。 5.使用`pack()`方法或`grid()`方法将`PanedWindow`放在主窗口中。 下面是一个简单的示例代码： ```python import tkinter as tk root = tk.Tk() # 创建一个 PanedWindow paned_window = tk.PanedWindow(root, orient=tk.HORIZONTAL) paned_window.pack(fill=tk.BOTH, expand=1) # 创建左侧的折叠菜单栏 left_frame = tk.Frame(paned_window, width=100, bg='white') label1 = tk.Label(left_frame, text='菜单1') button1 = tk.Button(left_frame, text='选项1') label2 = tk.Label(left_frame, text='菜单2') button2 = tk.Button(left_frame, text='选项2') label1.pack(side=tk.TOP) button1.pack(side=tk.TOP) label2.pack(side=tk.TOP) button2.pack(side=tk.TOP) # 创建右侧的主窗口 right_frame = tk.Frame(paned_window, bg='gray') label3 = tk.Label(right_frame, text='主窗口') label3.pack() # 将左侧和右侧的窗口放到 PanedWindow 中 paned_window.add(left_frame) paned_window.add(right_frame) root.mainloop() ``` 运行上面的代码，可以看到一个简单的左侧折叠菜单栏。你可以根据自己的需要修改菜单栏的样式和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值