【html】用html+css模拟Windows右击菜单

效果图:

在这个示例中,我为每个.second-list添加了一个.sub-menu<div>,它包含了子菜单项。当鼠标悬停在.second-list上时,.sub-menu会显示出来。你可以根据需要调整这个示例以适应你的具体需求。

记住,这只是一个基本的示例。在实际应用中,你可能还需要考虑更多的细节,比如动画效果、子菜单的定位、响应式设计等。

这里有一些可能的改进或考虑的点:

  1. 二级菜单的定位:你的代码中,二级菜单是位于其父元素(.second-list)的右侧,这是通过left: 100%;来实现的。这适用于从左到右的菜单布局。但如果你需要考虑从右到左的布局(例如,在某些语言环境中),你可能需要调整这个定位。
  2. 二级菜单的样式:你可能希望为二级菜单添加一些阴影或边框,以使其看起来更像是从主菜单中“弹出”的。这可以通过添加box-shadow或调整边框样式来实现。
  3. 响应式设计:如果你的菜单需要在不同大小的屏幕上显示,你可能需要考虑添加一些响应式设计的元素。例如,当屏幕宽度变小时,你可能希望将二级菜单改为下拉菜单,而不是横向展开。
  4. 子菜单的动画效果:你可以考虑添加一些CSS过渡或动画效果,以使二级菜单的显示和隐藏更加平滑。例如,你可以使用transition属性来添加淡入淡出效果。
  5. 可访问性:确保你的菜单对所有人都是可访问的,包括那些使用屏幕阅读器或键盘导航的用户。你可能需要添加一些额外的样式或JavaScript来处理这些情况。

以下是一个简单的示例,演示如何为二级菜单添加淡入淡出效果:

 
css.sub-menu {
/* ...其他样式... */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}.second-list:hover .sub-menu {
display: block;
opacity: 1;
visibility: visible;
}

在这个示例中,当鼠标悬停在.second-list上时,.sub-menu将从透明(opacity: 0)且不可见(visibility: hidden)的状态渐变为完全不透明(opacity: 1)且可见(visibility: visible)的状态。transition属性用于控制这个渐变过程的速度和方式。

完整代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>* {margin: 0;padding: 0;}.con {width: 300px;height: 27.75rem;background-color: rgba(230, 246, 251, 0.9);border-radius: 14px;}ul {display: flex;flex-direction: column;height: 100%;}li {flex: 1;display: flex;align-items: center;border: 1px solid #eee;box-sizing: border-box;padding-left: 40px;position: relative;}li:first-child {border: none;}li:hover {background-color: rgb(221, 234, 240);}.second-list::after {content: ">";color: rgb(133, 151, 157);font-weight: 800;position: absolute;right: 40px;}.sub-menu {display: none;/* 默认隐藏二级菜单 */position: absolute;top: 0;left: 100%;/* 放置在父元素的右侧 */width: 150px;/* 设置二级菜单的宽度 */background-color: rgba(230, 246, 251, 0.9);border-radius: 0 14px 14px 0;/* 圆角只显示在右侧 */opacity: 0.2;visibility: hidden;transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}.sub-menu ul li {height: 62px;line-height: 62px;}.second-list:hover .sub-menu {/* 鼠标悬停时显示二级菜单 */display: block;opacity: 1;visibility: visible;}</style></head><body><div class="con"><ul><li class="second-list">查看<div class="sub-menu"><ul><li>大图标</li><li>中图标</li><li>小图标</li></ul></div></li><li class="second-list">排序方式<div class="sub-menu"><ul><li>名称</li><li>大小</li><li>类型</li></ul></div></li><li>刷新</li><li class="second-list">新建<div class="sub-menu"><ul><li>文档</li><li>文件夹</li><li>工作表</li></ul></div></li><li>显示设置</li><li>个性化</li><li>属性</li></ul></div></body>
</html>

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

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

相关文章

[学习笔记]-MyBatis-Plus简介

简介 Mybatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window)的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 简言之就是对单表的增删改查有了很好的封装。基本不用再单独写sql语句了。目前此类…

其实,人工智能包含了科学技术和非科学技术两个方面

人工智能包含了科学技术和非科学技术两个方面。 科学技术是指人类在认识自然和利用自然的过程中积累起来的系统知识&#xff0c;它是一种客观存在的物质力量。人工智能是计算机科学的一个分支&#xff0c;它企图了解智能的实质&#xff0c;并生产出一种新的能以人类智能相似的方…

海外优青ppt美化_海优ppt录音视频制作

海外优青 优秀青年科学基金项目&#xff08;海外&#xff09;旨在吸引和鼓励在自然科学、工程技术等方面已取得较好成绩的海外优秀青年学者&#xff08;含非华裔外籍人才&#xff09;回国&#xff08;来华&#xff09;工作&#xff0c;自主选择研究方向开展创新性研究&#xf…

【C++】const和函数参数

一、const 在 C 中&#xff0c;const 关键字用于定义常量。将 const 关键字放在指针的不同位置&#xff0c;其含义也不同。 1、指向常量的指针 const int* ptr; ptr 是一个指向 const int 的指针&#xff0c;ptr 所指向的值不能通过 ptr 修改&#xff0c;但指针本身可以改变…

论文学习_Teams of LLM Agents can Exploit Zero-Day Vulnerabilities

论文名称发表时间发表期刊期刊等级研究单位Teams of LLM Agents can Exploit Zero-Day Vulnerabilities2024年arXiv-伊利诺伊大学0.摘要 研究背景LLM 代理变得越来越复杂,尤其是在网络安全领域。研究表明,当给出漏洞描述和具体问题时,LLM 代理可以有效利用已经存在的漏洞。然…

云商崆峒乐购618活动2024:企业联动创辉煌

2024年6月18日&#xff0c;云商崆峒乐购618活动在平凉盛大开幕。本次活动由崆峒区商务局、崆峒区电子商务协会与平凉新世纪柳湖春酒业公司联合举办&#xff0c;旨在借助“618”全民线上欢购的热潮&#xff0c;整合平凉本地名优特产&#xff0c;推动崆峒区电商产业及特色网货的发…

mouseinc-smartUp Gestures被禁用后的替代品

前言 smartUp Gestures恶意软件,既然谷歌这么判断,可能大概率没错了,我们换一个mouseInc吧下载地址 https://www.123pan.com/s/fDzUVv-hCtlA 设置下会更好用 设置 通过AHK设置下一些快捷操作~ 对应的查找 https://source.chromium.org/chromium/chromium/src//main:chrome/a…

【MySQL】数据库

数据库概述 【MySQL】数据库概述-CSDN博客 数据库基本操作 【MySQL】数据库基本操作-CSDN博客 数据表基本操作 【MySQL】数据表基本操作-CSDN博客 约束 【MySQL】约束-CSDN博客 基本增删改查 【MySQL】基本增删改查-CSDN博客 多表操作 【MySQL】多表操作-CSDN博客 视图 …

Elasticsearch安装(windows)

先给出网址 elasticsearch&#xff1a;Download Elasticsearch | Elastic elasticKibana&#xff1a;Download Kibana Free | Get Started Now | Elastic Logstash&#xff1a;Download Logstash Free | Get Started Now | Elastic ik分词&#xff1a;Releases infinilabs/…

adb卸载系统应用

1.进入shell adb shell2.查看所有包 pm list packages3.查找包 如查找vivo相关的包 pm list packages | grep vivo发现包太多了,根本不知道哪个是我们想卸载的应用 于是可以打开某应用,再查看当前运行应用的包名 如下: 4.查找当前前台运行的包名 打开某应用,在亮屏状态输入 …

NX GC工具箱 替换模板标注及中心线丢失

NX GC工具箱 替换模板标注及中心线丢失 前期已对制图模板做了修改优化&#xff0c;170图框层&#xff0c;171零件视图层&#xff0c;172中心线层&#xff0c;173标注层。 GC工具箱替换模板原理是删除原指定图层&#xff0c;再添加模板到里面。 1.打开GC工具箱配置文件&#x…

Netty中的粘包、拆包与丢包问题及其解决方案详解

Netty中的粘包、拆包与丢包问题及其解决方案详解 在网络通信中&#xff0c;粘包、拆包和丢包是常见的问题。Netty作为一个高性能的网络框架&#xff0c;提供了多种解决方案来处理这些问题。以下是详细的介绍&#xff1a; 1. 粘包与拆包问题 粘包与拆包的原因 粘包&#xff…

面试笔试--通用事件处理框架编写一个日志缓存插件

1.编程题(40分钟, 写磁盘文件、从磁盘加较数据等底层接口函数可以不用写实现细节, 重点是工程完整性) 请为一个通用事件处理框架编写一个日志缓存插件, 插件功能及要求如下 (1)插件编译成 loopfile. so, 通用插件框架的共享库为 modules_ std. so (2)在 loopfile插件中, 实现…

mysql 安装两则踩坑

mysql 安装两则踩坑 mysql 安装两则踩坑第一个坑第二个坑 mysql 安装两则踩坑 给我整吐了 第一个坑 Packet for query is too large (7632997 > 4194304). You can change this value on the server by setting the max_allowed_packet’ variable. 这里其实要看一下是不…

在哪可以查到全网的司法诉讼信息?

司法涉诉信息指的是再司法活动中形成的各种记录和资料&#xff0c;涵盖了诉讼案件的立案&#xff0c;审判&#xff0c;执行等各个环节的记录和文件。比如基本案件信息&#xff0c;开庭信息&#xff0c;审判信息&#xff0c;执行信息等。有时候还会涉及到被执行人&#xff0c;司…

【INTEL(ALTERA)】Nios® II EDS 是否在 Windows 10 上受支持?

目录 说明 解决方法 说明 在 readme.txt 中提到 Windows 10 不支持Nios II EDS 标准版。/content/dam/support/us/en/programmable/kdb/others/download/os-support/readme-qp171.txt 但是&#xff0c;在Nios II版本中&#xff0c;它得到了支持。https://www.altera.com/pro…

chain的不同调用方法

1、run方法 run方法是基本方法&#xff0c;返回为字符串格式。0.2.0后舍弃 context "袜子" chain LLMChain(promptprompt, llmmodel) # 下面三种方式等价 llm_output chain.run(context) llm_output chain.run({context: context}) llm_output chain.run(cont…

HJ39判断两个IP是否属于同一子网(下)

提示&#xff1a;文章 文章目录 前言一、背景二、 2.1 2.2 总结 前言 接上文&#xff1a;HJ39判断两个IP是否属于同一子网(中) 先全部获取完输入再处理数据 #include <stdio.h> #include <stdlib.h> #include <stdbool.h>bool isTargetSonNet(int array…

【postgresql初级使用】触发器的enable与disable,可以自动化精准管理触发器,避免重写触发器复杂逻辑

触发器的enable与disable ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录…

小白如何重装系统win10?电脑一键重装系统傻瓜式操作!超详细步骤!

随着电脑的广泛应用&#xff0c;给笔记本/台式电脑系统重装已成为一项基本技能。对于电脑新手而言&#xff0c;如何重装Win10系统&#xff0c;或者更高版本的Win11系统可能是一个巨大的挑战。如果对电脑重装系统刚好有需要了解的小伙伴&#xff0c;不妨看看下面的干货分享。本文…