当前位置： 首页 > news >正文

JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）

news 2026/4/1 11:42:30

今天，我给大家分享一个原创的CSS菜单，整个菜单全由CSS写成，仅在切换布局时使用JS。合不合意，先看看效果图。

本例图片

接下来，我来详细给大家分享它的制作方法。

文件夹结构

因为涉及到了样式表切换，所以，你需要借鉴一下我的文件夹结构。

CSS文件夹：

  1. reset.css 用于清楚浏览器默认设置；
  2. style.css 用于写公共布局的样式表，本例主要是写头部和菜单的基本结构。
  3. menu-x.css 用于写菜单水平布局的样式表（即页面上下布局）
  4. 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 用于…...

编程日记 2024/8/11 18:18:53

【数据结构】线性表，顺序表

一. 线性表 1. 线性表(linear list)是n个具有相同特性的数据元素的有限序列。 2. 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串... 3. 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线。但是在物理…...

编程日记 2024/8/11 18:17:52

Spring之最基础的创建与Bean的存储与获取（还有Maven加载jar包报错的解决方法）

目录 创建Spring项目 如何解决Maven加载jar包报错 存储Bean和取Bean 在Java中对象也称为Bean。所以后面我提到Bean&#xff0c;大家要知道我说的是什么。 创建Spring项目 我的idea是2022版本的&#xff0c;如果大家和我一样可以参考我的。 1.创建一个Maven项目。图片上忘了…...

编程日记 2024/8/11 18:15:50

RabbitMQ应用问题 - 消息顺序性保证、消息积压问题

文章目录 MQ 消息顺序性保证概述原因分析解决方案基于 spring-cloud-stream 实现分区消费 消息挤压问题概述原因分析解决方案 MQ 消息顺序性保证 概述 a&#xff09;消息顺序性&#xff1a;消费者消费的消息的顺序 和 生产者发送消息的顺序是一致的. 例如 生产者 发送消息顺序…...

编程日记 2024/8/11 18:14:49

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>…...

编程日记 2024/8/11 18:11:46

在 MongoDB 中，如何配置副本集以实现读写分离？

在 MongoDB 中&#xff0c;配置副本集以实现读写分离主要涉及以下几个步骤&#xff1a; 初始化副本集&#xff1a; 创建副本集时&#xff0c;需要在所有参与节点上运行 rs.initiate() 命令。这将初始化一个新的副本集。 添加成员到副本集&#xff1a; 使用 rs.add() 命令将所有…...

编程日记 2024/8/11 18:10:45

虚拟dom-Diff算法

虚拟dom-Diff算法 vue2 diff算法在vue2中就是patch&#xff0c;通过新旧虚拟dom对比&#xff0c;找到最小变化然后进行dom操作 在页面首次渲染的时候会调用一次patch并创建新的vnode&#xff0c;不会进行深层次的比较&#xff0c;然后再组件中数据发生变化的时候&#xff0c;…...

编程日记 2024/8/11 18:07:42

01创建型设计模式——单例模式

一、单例模式简介 单例模式&#xff08;Singleton Pattern&#xff09;是一种创建型设计模式&#xff08;GoF书中解释创建型设计模式&#xff1a;一种用来处理对象的创建过程的模式&#xff09;&#xff0c;单例模式是其中的一种&#xff0c;它确保一个类只有一个实例&#xff…...

编程日记 2024/8/11 18:06:41

图像分割（一）

一、概述 语义分割&#xff1a;是把每个像素都打上标签&#xff08;这个像素点是人、树、背景等&#xff09; 实例分割&#xff1a;不光要区别类别&#xff0c;还要区分类别中的每一个个体 损失函数&#xff1a;逐像素的交叉熵&#xff1b;样本均衡问题 MIOU指标&#xff1a…...

编程日记 2024/8/11 18:05:40

C++ 新经典：设计模式 目录（先留框架，慢慢来~）

C 新经典&#xff1a;设计模式 C 新经典&#xff1a;设计模式 C 新经典&#xff1a;设计模式第1章 设计模式与软件开发思想、编程环境介绍第2章 模板方法模式第3章 工厂模式、原型模式、建造者模式第4章 策略模式第5章 观察者模式第6章 装饰模式第7章 单件模式第8章 外观模式第…...

编程日记 2024/8/11 18:04:38

go之命令行工具urfave-cli

一、urfave/cli urfave/cli 是一个声明性的、简单、快速且有趣的包&#xff0c;用于用 Go 构建命令行工具。 二、快速使用 2.1 引入依赖 go get github.com/urfave/cli/v2 2.2 demo package mainimport ("fmt""log""os""github.com/ur…...

编程日记 2024/8/11 18:02:36

四种应用层协议——MQTT、CoAP、WebSockets和HTTP——在工业物联网监控系统中的性能比较

目录 摘要(Abstract) 实验设置 实验结果 节选自《A Comparative Analysis of Application Layer Protocols within an Industrial Internet of Things Monitoring System》&#xff0c;作者是 Jurgen Aquilina、Peter Albert Xuereb、Emmanuel Francalanza、Jasmine Mallia …...

编程日记 2024/8/11 18:00:34

MySQL的脏读、不可重复读、幻读与隔离级别

脏读/不可重复读/幻读 脏读 脏读(Dirty Read)发生在一个事务读取了另一个事务尚未提交的数据。如果第二个事务失败并回滚&#xff0c;第一个事务读到的数据就是错误的。这意味着数据从一开始就是不稳定或者“脏”的。 举例 事务A读取了某条记录的值为X。事务B修改该记录的值…...

编程日记 2024/8/11 17:59:33

程序员前端开发者的AI绘画副业之路：在裁员危机中寻找新机遇

正文&#xff1a; 在这个充满变数的时代&#xff0c;作为一名前端开发者&#xff0c;我经历了行业的起伏&#xff0c;见证了裁员危机和中年失业危机的残酷。在这样的背景下&#xff0c;我开始了利用AI绘画作为副业的探索&#xff0c;不仅为了寻求经济上的稳定&#xff0c;更是为…...

编程日记 2024/8/11 17:53:26

Burp Suite的使用和文件上传漏洞靶场试验

第一步&#xff1a;分析如何利用漏洞&#xff0c;通过对代码的查阅发现&#xff0c;代码的逻辑是先上传后删除&#xff0c;意味着&#xff0c;我可以利用webshell.php文件在上传到删除之间的间隙&#xff0c;执行webshell.php的代码&#xff0c;给上级目录创建一个shell.php木马…...

编程日记 2024/8/11 17:50:22

如何在Ubuntu中安装deepin wine版的企业微信

如何在Ubuntu中安装deepin wine版的企业微信 运行如下一条命令将移植仓库添加到系统中 wget -O- https://deepin-wine.i-m.dev/setup.sh | sh自此以后&#xff0c;你可以像对待普通的软件包一样&#xff0c;使用apt-get系列命令进行各种应用安装、更新和卸载清理了。 安装企业…...

编程日记 2024/8/11 17:48:20

案例：Nginx + Tomcat集群（负载均衡 动静分离）

目录 案例 案例环境 案例步骤 部署Tomcat服务器 部署Nginx服务器 实现负载均衡和读写分离 日志控制 案例 案例环境 操作系统 IP 地址 角色 CentOS 192.168.10.101 Nginx服务器&#xff08;调度器&#xff09; CentOS 192.168.10.102 Tomcat服务器① CentOS 1…...

编程日记 2024/8/11 17:47:18

【密码学】密码协议的分类：②认证协议

密码协议的分类有很多种方式&#xff0c;这里我采取的是基于协议实现的目的来分类。可以将密码协议分成三类&#xff1a;认证协议、密钥建立协议、认证密钥建立协议。 一、认证协议是什么&#xff1f; 认证协议都在认证些什么东西呢&#xff1f;认证一般要认证三个东西&#x…...

编程日记 2024/8/11 17:46:17

异步编程（Promise详解）

目录 异步编程 回调函数 回调地狱 Promise 基本概念 Promise的特点 1.Promise是一种构造函数 2.Promise接收函数创建实例 3.Promise对象有三种状态 4.Promise状态转变不可逆 5.Promise 实例创建即执行 6.Promise可注册处理函数 7.Promise支持链式调用 Promise的静…...

编程日记 2024/8/11 17:45:16

DjangoORM注入分享

DjangoORM注入 简介 ​ 这篇文章中&#xff0c;分享一些关于django orm相关的技术积累和如果orm注入相关的安全问题讨论。 ​ 攻击效果同数据库注入 从Django-Orm开始 开发角度 ​ Django ORM&#xff08;Object-Relational Mapping&#xff09;是Django框架中用于处理数…...

编程日记 2024/8/11 17:44:14

宝可梦随机化终极指南：Universal Pokemon Randomizer ZX 完全使用教程

宝可梦随机化终极指南&#xff1a;Universal Pokemon Randomizer ZX 完全使用教程 【免费下载链接】universal-pokemon-randomizer-zx Public repository of source code for the Universal Pokemon Randomizer ZX 项目地址: https://gitcode.com/gh_mirrors/un/universal-po…...

编程新知 2026/4/1 11:35:41

告别setData！用mobx-miniprogram+miniprogram-computed重构你的小程序状态管理（保姆级避坑指南）

重构小程序状态管理&#xff1a;mobx-miniprogram与miniprogram-computed实战指南 如果你正在开发一个功能逐渐复杂的中大型微信小程序&#xff0c;大概率已经遇到了这样的困境&#xff1a;页面间状态共享越来越混乱&#xff0c;setData调用遍布各个角落&#xff0c;视图更新性…...

编程新知 2026/4/1 10:06:34

Flutter文件操作实战：File_selector跨平台文件处理从入门到精通

1. 为什么Flutter开发者都需要掌握File_selector&#xff1f; 在移动应用和桌面应用开发中&#xff0c;文件操作就像我们日常生活中的"文件柜"——你需要存放、查找、整理各种文档。而Flutter作为跨平台框架&#xff0c;最大的挑战就是如何在不同操作系统上实现统一的…...

编程新知 2026/4/1 9:32:02

Qwen3-14B部署避坑指南：从环境配置到服务上线的完整流程

Qwen3-14B部署避坑指南&#xff1a;从环境配置到服务上线的完整流程 1. 环境准备与系统要求 在开始部署Qwen3-14B之前&#xff0c;确保你的硬件和软件环境满足以下要求&#xff1a; 1.1 硬件配置建议 组件最低配置推荐配置GPUNVIDIA T4 (16GB)NVIDIA A10G (24GB)或A100 (40…...

编程新知 2026/4/1 8:20:16

Qwen-Image-2512图片生成服务：支持多种宽高比，满足不同场景需求

Qwen-Image-2512图片生成服务&#xff1a;支持多种宽高比&#xff0c;满足不同场景需求 1. 引言&#xff1a;为什么宽高比如此重要&#xff1f; 在数字内容创作领域&#xff0c;图片的宽高比往往决定了它的最终用途。一张构图精美的图片&#xff0c;如果比例与展示平台不匹配…...

编程新知 2026/4/1 8:04:04

Python 3.14 JIT为何在ARM64上降频17%？源码级定位_pyltopt_arch.c中2个未对齐的寄存器分配bug（已提交CPython PR#12894）

第一章&#xff1a;Python 3.14 JIT编译器性能降频现象概览Python 3.14 引入的实验性 JIT 编译器&#xff08;基于 Pyjion 与新式 AST 优化管道&#xff09;在部分工作负载下表现出非预期的性能降频现象——即启用 JIT 后&#xff0c;某些计算密集型循环或 I/O 绑定协程的执行耗…...

编程新知 2026/4/1 7:58:02

Phi-4-mini-reasoning步骤详解：supervisorctl管理服务全命令解析

Phi-4-mini-reasoning步骤详解&#xff1a;supervisorctl管理服务全命令解析 1. 项目介绍 Phi-4-mini-reasoning是一款由微软开发的3.8B参数轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。该模型主打"小参数、强推理、长上下文、低延迟…...

编程新知 2026/4/1 7:43:29

Qwen3-ASR-1.7B效果展示：实测多语言语音识别，准确率超高

Qwen3-ASR-1.7B效果展示&#xff1a;实测多语言语音识别&#xff0c;准确率超高 1. 开篇&#xff1a;一款让人惊艳的语音识别模型 最近测试了Qwen3-ASR-1.7B这款语音识别模型&#xff0c;结果让我大吃一惊。作为一款中等规模的模型&#xff0c;它在多语言识别上的表现完全不输…...

编程新知 2026/4/1 7:33:23

Wan2.2-I2V-A14B企业级部署案例：单卡24GB显存实现高并发视频API服务

Wan2.2-I2V-A14B企业级部署案例&#xff1a;单卡24GB显存实现高并发视频API服务 1. 企业级视频生成解决方案概述 在数字内容创作领域&#xff0c;视频生成技术正经历革命性变革。Wan2.2-I2V-A14B作为新一代文生视频模型&#xff0c;通过私有化部署方案&#xff0c;为企业提供…...

编程新知 2026/4/1 7:18:53

千问3.5-2B在办公提效场景：会议白板照片文字提取+要点总结实战

千问3.5-2B在办公提效场景&#xff1a;会议白板照片文字提取要点总结实战 1. 办公场景的痛点与解决方案 1.1 会议记录的传统困境 每次开完会&#xff0c;最让人头疼的就是整理会议记录了。特别是那些在白板上写满讨论要点的会议&#xff0c;你需要&#xff1a; 对着白板照片…...

编程新知 2026/4/1 5:49:08