JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）
今天，我给大家分享一个原创的CSS菜单，整个菜单全由CSS写成，仅在切换布局时使用JS。合不合意，先看看效果图。
本例图片
接下来，我来详细给大家分享它的制作方法。
文件夹结构
因为涉及到了样式表切换，所以，你需要借鉴一下我的文件夹结构。
CSS文件夹：
- reset.css 用于清楚浏览器默认设置；
- style.css 用于写公共布局的样式表，本例主要是写头部和菜单的基本结构。
- menu-x.css 用于写菜单水平布局的样式表（即页面上下布局）
- menu-y.css 用于写菜单垂直布局的样式表（即页面左右布局）
我在这里的介绍顺序，也是它们在HTML中的引用顺序。
JS文件夹：jq库文件和jquery.cookie。
然后就是HTML页面：CSS-menu.html
接下来，我们看一下html页面的头部引用：
HTML头部引用
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 菜单（含二级菜单）</title><link href="css/reset.css" rel="stylesheet" type="text/css" /><link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/menu-y.css" rel="stylesheet" type="text/css" id="cssfile" /><!-- 引入jQuery --><script src="js/jquery-3.5.1.js" type="text/javascript"></script><!-- 引入jQuery.cookie库 --><script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>我们看到 在CSS引用时，我引用了3个css文件：reset.css ，style.css ，menu-y.css 并且，在引用 menu-y.css 时，还在这行代码的最后给它加了一个 id=cssfile 。为什么这样呢？因为我后面要通过js来改变这个ID的引用文件，达到用户前台切换样式表的目的。所以，这个id 一定不能忘了写。
接下来，我们来写：
页面头部
<header><logo>CSS可变换位置的菜单</logo><ul id="skin" class="change_menu"><li id="menu-x" class="menu-x ">横向</li><li id="menu-y" class&#相关文章：
JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）
今天，我给大家分享一个原创的CSS菜单，整个菜单全由CSS写成，仅在切换布局时使用JS。合不合意，先看看效果图。 本例图片 接下来，我来详细给大家分享它的制作方法。 文件夹结构 因为涉及到了样式表切换，所以，你需要借鉴一下我的文件夹结构。 CSS文件夹： reset.css 用于…...
【数据结构】线性表，顺序表
一. 线性表 1. 线性表(linear list)是n个具有相同特性的数据元素的有限序列。 2. 线性表是一种在实际中广泛使用的数据结构，常见的线性表：顺序表、链表、栈、队列、字符串... 3. 线性表在逻辑上是线性结构，也就说是连续的一条直线。但是在物理…...
Spring之最基础的创建与Bean的存储与获取（还有Maven加载jar包报错的解决方法）
目录 创建Spring项目 如何解决Maven加载jar包报错 存储Bean和取Bean 在Java中对象也称为Bean。所以后面我提到Bean，大家要知道我说的是什么。 创建Spring项目 我的idea是2022版本的，如果大家和我一样可以参考我的。 1.创建一个Maven项目。图片上忘了…...
RabbitMQ应用问题 - 消息顺序性保证、消息积压问题
文章目录 MQ 消息顺序性保证概述原因分析解决方案基于 spring-cloud-stream 实现分区消费 消息挤压问题概述原因分析解决方案 MQ 消息顺序性保证 概述 a）消息顺序性：消费者消费的消息的顺序 和 生产者发送消息的顺序是一致的. 例如 生产者 发送消息顺序…...
linux tcp通讯demo
linux tcp通讯demo代码。通过用chatgpt生成的代码。做一个代码记录。 一、基本的通讯demo server.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <sys/types.h> #include <sys/socket.h>…...
在 MongoDB 中，如何配置副本集以实现读写分离？
在 MongoDB 中，配置副本集以实现读写分离主要涉及以下几个步骤： 初始化副本集： 创建副本集时，需要在所有参与节点上运行 rs.initiate() 命令。这将初始化一个新的副本集。 添加成员到副本集： 使用 rs.add() 命令将所有…...
虚拟dom-Diff算法
虚拟dom-Diff算法 vue2 diff算法在vue2中就是patch，通过新旧虚拟dom对比，找到最小变化然后进行dom操作 在页面首次渲染的时候会调用一次patch并创建新的vnode，不会进行深层次的比较，然后再组件中数据发生变化的时候，…...
01创建型设计模式——单例模式
一、单例模式简介 单例模式（Singleton Pattern）是一种创建型设计模式（GoF书中解释创建型设计模式：一种用来处理对象的创建过程的模式），单例模式是其中的一种，它确保一个类只有一个实例ÿ…...
图像分割（一）
一、概述 语义分割：是把每个像素都打上标签（这个像素点是人、树、背景等） 实例分割：不光要区别类别，还要区分类别中的每一个个体 损失函数：逐像素的交叉熵；样本均衡问题 MIOU指标：…...
C++ 新经典：设计模式 目录（先留框架，慢慢来~）
C 新经典：设计模式 C 新经典：设计模式 C 新经典：设计模式第1章 设计模式与软件开发思想、编程环境介绍第2章 模板方法模式第3章 工厂模式、原型模式、建造者模式第4章 策略模式第5章 观察者模式第6章 装饰模式第7章 单件模式第8章 外观模式第…...
go之命令行工具urfave-cli
一、urfave/cli urfave/cli 是一个声明性的、简单、快速且有趣的包，用于用 Go 构建命令行工具。 二、快速使用 2.1 引入依赖 go get github.com/urfave/cli/v2 2.2 demo package mainimport ("fmt""log""os""github.com/ur…...
四种应用层协议——MQTT、CoAP、WebSockets和HTTP——在工业物联网监控系统中的性能比较
目录 摘要(Abstract) 实验设置 实验结果 节选自《A Comparative Analysis of Application Layer Protocols within an Industrial Internet of Things Monitoring System》，作者是 Jurgen Aquilina、Peter Albert Xuereb、Emmanuel Francalanza、Jasmine Mallia …...
MySQL的脏读、不可重复读、幻读与隔离级别
脏读/不可重复读/幻读 脏读 脏读(Dirty Read)发生在一个事务读取了另一个事务尚未提交的数据。如果第二个事务失败并回滚，第一个事务读到的数据就是错误的。这意味着数据从一开始就是不稳定或者“脏”的。 举例 事务A读取了某条记录的值为X。事务B修改该记录的值…...
程序员前端开发者的AI绘画副业之路：在裁员危机中寻找新机遇
正文： 在这个充满变数的时代，作为一名前端开发者，我经历了行业的起伏，见证了裁员危机和中年失业危机的残酷。在这样的背景下，我开始了利用AI绘画作为副业的探索，不仅为了寻求经济上的稳定，更是为…...
Burp Suite的使用和文件上传漏洞靶场试验
第一步：分析如何利用漏洞，通过对代码的查阅发现，代码的逻辑是先上传后删除，意味着，我可以利用webshell.php文件在上传到删除之间的间隙，执行webshell.php的代码，给上级目录创建一个shell.php木马…...
如何在Ubuntu中安装deepin wine版的企业微信
如何在Ubuntu中安装deepin wine版的企业微信 运行如下一条命令将移植仓库添加到系统中 wget -O- https://deepin-wine.i-m.dev/setup.sh | sh自此以后，你可以像对待普通的软件包一样，使用apt-get系列命令进行各种应用安装、更新和卸载清理了。 安装企业…...
案例：Nginx + Tomcat集群（负载均衡 动静分离）
目录 案例 案例环境 案例步骤 部署Tomcat服务器 部署Nginx服务器 实现负载均衡和读写分离 日志控制 案例 案例环境 操作系统 IP 地址 角色 CentOS 192.168.10.101 Nginx服务器（调度器） CentOS 192.168.10.102 Tomcat服务器① CentOS 1…...
【密码学】密码协议的分类：②认证协议
密码协议的分类有很多种方式，这里我采取的是基于协议实现的目的来分类。可以将密码协议分成三类：认证协议、密钥建立协议、认证密钥建立协议。 一、认证协议是什么？ 认证协议都在认证些什么东西呢？认证一般要认证三个东西&#x…...
异步编程（Promise详解）
目录 异步编程 回调函数 回调地狱 Promise 基本概念 Promise的特点 1.Promise是一种构造函数 2.Promise接收函数创建实例 3.Promise对象有三种状态 4.Promise状态转变不可逆 5.Promise 实例创建即执行 6.Promise可注册处理函数 7.Promise支持链式调用 Promise的静…...
DjangoORM注入分享
DjangoORM注入 简介 这篇文章中，分享一些关于django orm相关的技术积累和如果orm注入相关的安全问题讨论。 攻击效果同数据库注入 从Django-Orm开始 开发角度 Django ORM（Object-Relational Mapping）是Django框架中用于处理数…...
别再乱用npm install了！手把手教你用npx only-allow为项目指定包管理器（支持pnpm/yarn/npm）
用only-allow统一团队包管理器：从配置到CI的全流程指南 你是否曾经在拉取一个新项目后，面对npm install、yarn还是pnpm i的抉择感到困惑？或者更糟的是，团队成员混用不同包管理器导致node_modules结构不一致，引发各种诡…...
ESP32多任务水位监测：从Arduino到ESP-IDF的FreeRTOS实战
1. 项目概述：从Arduino到ESP-IDF的跃迁去年我在做毕业设计时，为了搭建一个ESP32的传感器节点演示程序，第一次深入使用了FreeRTOS。那段时间，我几乎天天和任务调度、队列、信号量打交道，从最初的一头雾水到后来能流畅地…...
别再只测accuracy！DeepSeek集成测试必须监控的5个隐性指标（P99首token延迟、context bleed率、tool-call schema漂移）
更多请点击： https://intelliparadigm.com 第一章：DeepSeek集成测试的核心范式演进 DeepSeek大模型的工程化落地对集成测试提出了全新挑战：传统基于接口响应码与字段校验的测试范式已难以覆盖语义一致性、推理链鲁棒性、上下文敏感度等高阶质…...
半导体元件（二极管/三极管/MOS管/IC）损坏诊断全解
半导体元件（二极管、三极管、MOS 管、集成电路）是 PCB 的核心功能单元，对过压、过流、ESD、高温极度敏感，损坏后直接导致电路功能失效、短路烧板。很多工程师维修时盲目更换芯片，不仅成本高，还易误判。一…...
使用TaotokenCLI工具一键配置开发环境中的API密钥
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 使用Taotoken CLI工具一键配置开发环境中的API密钥 在团队协作或个人开发中，为每个项目或成员手动配置大模型API密钥和…...
Spring Security OAuth2 /oauth/token 401原因与Content-Type规范
1. 问题现场还原：一个看似简单却让开发停摆两小时的/oauth/token请求刚接手一个老项目做安全加固，第一件事就是验证OAuth2密码模式的token获取流程。我照着文档写了一条curl命令：curl -X POST http://localhost:8080/oauth/token回车执行&…...
DeepSeek模型微调全链路解析：从数据准备、LoRA配置到推理部署的7大关键步骤
更多请点击： https://intelliparadigm.com 第一章：DeepSeek模型微调全链路概览 DeepSeek系列大语言模型（如DeepSeek-V2、DeepSeek-Coder）凭借其开源特性、高性能推理能力与丰富的领域适配性，已成为工业界与学术界微调…...
WarcraftHelper：让魔兽争霸3在现代电脑上完美运行的关键插件
WarcraftHelper：让魔兽争霸3在现代电脑上完美运行的关键插件 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 你是否还在为《魔兽争霸3》这…...
避坑指南：Unity中AABB碰撞检测失效的5种常见原因及解决方法
Unity中AABB碰撞检测失效的深度排查与解决方案在Unity开发中，AABB（轴对齐包围盒）碰撞检测是基础但容易出问题的环节。许多开发者都遇到过这样的情况：明明逻辑正确，测试时却出现物体穿透、碰撞时有时无等诡异现象。本文…...
taotoken用量看板如何帮助团队精细化管理api调用成本
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 taotoken用量看板如何帮助团队精细化管理api调用成本 对于团队管理者而言，将大模型能力集成到产品开发或业务流程中&am…...