js+css侧边导航菜单 可收缩

js+css侧边导航菜单 可收缩icon-default.png?t=N7T8https://www.bootstrapmb.com/item/14774

创建一个可收缩的侧边导航菜单需要使用JavaScript来处理交互,而CSS则用来设置样式和动画效果。以下是一个简单的示例,展示了如何创建一个可收缩的侧边导航菜单。

HTML 结构

 
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可收缩侧边导航菜单</title>
<link rel="stylesheet" href="styles.css">
</head>
<body><div id="sidebar" class="sidebar">
<ul>
<li><a href="#">链接 1</a></li>
<li><a href="#">链接 2</a></li>
<li><a href="#">链接 3</a></li>
<!-- ...更多链接 -->
</ul>
<span id="toggle-btn" class="toggle-btn">☰</span>
</div><div id="content" class="content">
<!-- 页面内容 -->
<p>点击左上角的菜单图标来显示/隐藏侧边栏。</p>
</div><script src="script.js"></script>
</body>
</html>

CSS 样式 (styles.css)

 
cssbody {
margin: 0;
padding: 0;
overflow-x: hidden; /* 防止内容在侧边栏展开时水平滚动 */
}.sidebar {
width: 200px; /* 侧边栏宽度 */
height: 100vh; /* 视口高度 */
background: #333;
color: #fff;
position: fixed;
top: 0;
left: -200px; /* 初始位置在屏幕左侧外部 */
transition: left 0.3s ease-in-out; /* 平滑过渡效果 */
z-index: 1000; /* 确保侧边栏在内容之上 */
}.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}.sidebar li a {
display: block;
padding: 15px;
text-decoration: none;
color: inherit;
}.sidebar li a:hover {
background: #444;
}.toggle-btn {
position: absolute;
top: 10px;
left: 10px;
font-size: 24px;
color: #fff;
cursor: pointer;
}.content {
padding: 20px;
margin-left: 200px; /* 与侧边栏宽度相同,确保内容不会重叠 */
transition: margin-left 0.3s ease-in-out; /* 平滑过渡效果 */
}.sidebar.active {
left: 0; /* 侧边栏展开时移动到屏幕左侧 */
}.content.active {
margin-left: 200px; /* 侧边栏展开时内容区域的左边距增加 */
}

JavaScript 交互 (script.js)

 
javascriptdocument.getElementById('toggle-btn').addEventListener('click', function() {
const sidebar = document.getElementById('sidebar');
const content = document.getElementById('content');sidebar.classList.toggle('active');
content.classList.toggle('active');
});

以上示例创建了一个简单的可收缩侧边导航菜单。侧边栏初始时位于屏幕左侧外部,并可通过点击左上角的菜单图标来展开和隐藏。页面内容也会根据侧边栏的展开或隐藏状态相应地调整其左边距。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49235.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

重修之路1

我也不知道我现在处于个什么状态&#xff0c;我在以前写代码时知道部分方法如何使用&#xff0c;但是也仅限于此我并不了其如何实现&#xff0c;让我感到迷茫我是越来越菜了随着AI的发展它写出的代码简洁高效甚至让我有些看不懂&#xff0c;以至于我开始怀疑自己的JS基本功因此…

开源模型应用落地-LangChain高阶-智能体探究-自定义agent(五)

一、前言 大模型具有非常强大的功能,可以解答疑问、撰写报告和文档、总结内容、进行翻译等各种日常工作任务。然而,大模型还可以应用于更多的场景,发挥出更强大的作用。 通过智能体,我们可以实现许多有价值的事情,比如:在日常生活中,我们能借助智能体实现智能家居的自动化…

Java中的异常处理与容错设计最佳实践

Java中的异常处理与容错设计最佳实践 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;异常处理是一个非常重要的环节。良好的异常处理和容错设计可以提升系统的健壮性和可维…

【接口测试】params传参与body传参区别

文章目录 一.params传参二.body传参三.两者区别说明 一.params传参 params传参一般用于get请求 params传参时,参数会附于URL后面以问号形式展示。 示例&#xff1a; http://ip地址:端口号/login?usernamexm&pwd111二.body传参 body传参一般用于post请求 body传参时需…

【java基础】spring springMVC springboot 的区别

Spring, Spring MVC, 和 Spring Boot 是三个紧密相关的技术&#xff0c;它们都是由 Pivotal 团队&#xff08;原SpringSource&#xff09;开发的&#xff0c;主要用于构建企业级的Java应用程序。尽管它们在功能上有所交集&#xff0c;但各自也有独特的定位和用途。 Spring Fra…

Linux定时执行程序和关闭程序

cron是一个基于时间的作业调度器&#xff0c;可以在指定的时间运行命令。 打开终端并编辑cron任务 crontab -e定时任务 # 每天20点30分执行程序 30 20 * * * /home/user/my_program # 每天15点30分关闭程序 30 15 * * * pkill my_programcrontab 用法 crontab 是 Unix 和类…

MacOS安装SDKMan管理Java版本

文章目录 1 简介2 安装与卸载2.1 安装2.2 卸载 3 使用3.1 查看其他工具&#xff1a;支持 Ant, Maven 等3.2 查看Java版本3.3 安装Java&#xff0c;加上相关的版本3.4 设置Java版本(全局)3.5 只在当前窗口生效3.6 卸载1 默认环境无法卸载 4 jdk安装的位置5 与IDEA集成参考 1 简介…

简单修改,让UE4/5着色器编译速度变快

简单修改&#xff0c;让UE4/5着色器编译速度变快 目录 简单修改&#xff0c;让UE4/5着色器编译速度变快 一、问题描述 二、解决方法 &#xff08;一&#xff09;硬件升级 &#xff08;二&#xff09;调整相关设置和提升优先级 1.调整相关设置 &#xff08;1&#xff09…

Pytorch 6

罗切斯特回归模型 加了激活函数 加了激活函数之后类 class LogisticRegressionModel(torch.nn.Module):def __init__(self):super(LogisticRegressionModel, self).__init__()self.linear torch.nn.Linear(1,1)def forward(self, x):# y_pred F.sigmoid(self.linear(x))y_p…

Java学习 - Spring Boot整合 Thymeleaf 实例

什么是 Thymeleaf Thymeleaf 是新一代的 Java 模板引擎&#xff0c;类似于 Velocity、FreeMarker 等传统引擎&#xff0c;其语言和 HTML 很接近&#xff0c;而且扩展性更高&#xff1b; Thymeleaf 的主要目的是将优雅的模板引入开发工作流程中&#xff0c;并将 HTML 在浏览器中…

Angular之store全局状态管理 浅学

在 Angular 应用中&#xff0c;我们可以使用 ngrx/store 进行状态管理可以有效地管理和跟踪应用程序的状态变化。ngrx/store 是基于 Redux 模式的状态管理库&#xff0c;它提供了一种集中式存储管理应用程序状态的方式。以下是关于 ngrx/store 的详细解释和使用方法&#xff1a…

MSPM0G3507学习笔记1:开发环境_引脚认识与点灯

今日速通一款Ti的单片机用于电赛&#xff1a;MSPM0G3507 这里默认已经安装好了Keil5_MDK 首先声明一下: 因为是速成&#xff0c;所以需要一定单片机学习基础&#xff0c;然后我写的也不会详细&#xff0c;这个专栏的笔记也就是自己能看懂就行的目标~~~ 文章提供测试代码解…

智能制造·数字化工厂建设规划方案(65P)

获取完整PPT见下图 更多有关华为研发管理/IPD、MBSE、PLM、ERP、MES、数据治理、数字样机等方面免费解决方案、资料获取&#xff0c;请见下图

Ecovadis评估的流程是什么

Ecovadis评估流程是一个全面、系统且注重细节的过程&#xff0c;旨在为企业提供关于其可持续性表现的深入洞察。这一评估不仅覆盖了企业在环境、社会和治理方面的多个方面&#xff0c;还强调了持续改进的重要性&#xff0c;确保企业能够不断提升其CSR&#xff08;企业社会责任&…

ES中聚合查询之date_histogram查询出现key_as_string 和 key含义

ES中聚合查询之date_histogram查询出现key_as_string 和 key含义 DSL语句 #实例 GET /capture_features_202407/_search {"query": {"bool": {"must": [{"terms": {"plateNo": ["汉A00001"]}},{"range&quo…

构建一个具有深色模式的简单React Web应用

在当今的Web开发世界里,创建一个既美观又功能丰富的用户界面是至关重要的。在本文中,我们将探讨如何使用React构建一个简单但功能强大的Web应用,它包含导航栏、内容展示区域和深色模式切换功能。 项目概述 我们的目标是创建一个具有以下特性的Web应用: 左侧导航栏,包含四个链…

Qt创建自定义组件并且promote to之后导致编译错误(CMake)

创建自定组件并且加入到全局(勾选"Global include"选项)后&#xff0c;重新编译&#xff0c;元对象编译器生成的ui_xxxx.h文件中会新加入自定义组件的头文件&#xff1a; 如图所示&#xff0c;编译器提示找不到自定义组件的头文件&#xff1a; Solution: 在CMakeL…

Java开发之LinkedList源码分析

#来自ゾフィー&#xff08;佐菲&#xff09; 1 简介 LinkedList 的底层数据结构是双向链表。可以当作链表、栈、队列、双端队列来使用。有以下特点&#xff1a; 在插入或删除数据时&#xff0c;性能好&#xff1b;允许有 null 值&#xff1b;查询效率不高&#xff1b;线程不安…

opencascade AIS_InteractiveContext源码学习9 obsolete methods

AIS_InteractiveContext 前言 交互上下文&#xff08;Interactive Context&#xff09;允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是&#xff0c;对于已经被交互上下文识别的交互对象&#xff0c;必须使用上下文方法进行…

Leetcode3216. 交换后字典序最小的字符串

Every day a Leetcode 题目来源&#xff1a;3216. 交换后字典序最小的字符串 解法1&#xff1a;模拟 找到第一个 s[i] > s[i 1]&#xff0c;且它们奇偶性相同&#xff0c;交换它们。 代码&#xff1a; /** lc appleetcode.cn id3216 langcpp** [3216] 交换后字典序最小…