html中鼠标左键自定义多级菜单,CSS多级菜单的实现代码
这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单。实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧。
先来一个非常简单的一级菜单与悬停效果。
菜单一
菜单二
菜单三
菜单四
结构很熟悉吧,就是把原来放图片的地方换成文字而已。我还特意标出来了。接着下来的表现层代码非常简单。
* {
margin:0;
padding:0;
}
.menu {
font-size:12px;
}
.menu li {/*水平菜单*/
float:left;
list-style:none;
}
.menu a {
display:block;
position:relative;
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
}
.menu a:hover {
background:#369;
color:#fff;
}
.menu li span {
display:none;
position:absolute;
left:0;
top:32px;
width:200px;
height:150px;
background:#B9D6FF;
}
.menu a:hover span {
display:block;
}
这里有两个值得注意的地方。我们先说第一个。子菜单(span元素)的top应该能使其顶部停留在a元素的范围内,如果包含块是li元素,同理。当span的top值大于32px,如40px,我们就无法把鼠标移到span元素上。因为离开了a:hover的作用范围,span元素又重新隐藏。
.menu li span {
display:none;
position:absolute;
left:0;
top:40px;/*★★修改这里★★*/
width:200px;
height:150px;
background:#B9D6FF;
}
第二个问题是IE6特有的,就是子菜单在对应的包含块mouseout后仍不消失的问题。hover伪类相当于moverover与moverout。我们在可以在mouseover给它的子孙元素认定一种样式,mouseout时认定另一种。换言之,display现在在IE6无法切换(img元素除外)。解决方法用visibility 代替display。
好了,现在我们真正做二级菜单,把有关span的CSS全删掉,并在结构层原span的位置改为如下代码:
- 二级菜单_11
- 二级菜单_12
我们在各游览器看一下,感觉非常乏力。IE6与Opera10的二级菜单项是垂直的,但我们并没有清除浮动啊?firefox3.5与chrome与safari4的二级菜单项是水平分布了,但上面好像多出一个菜单项……IE8同学这次反而是表现得最好的。我没有装IE7,所以一向忽略它。
我们重新设置一下样式,如把包含块改设在li元素上,让二级菜单项呈垂直显示。
* {
margin:0;
padding:0;
}
.menu {
font-size:12px;
}
.menu li {/*水平菜单*/
float:left;
list-style:none;
position:relative;/*把包含块移动li元素*/
}
.menu a {
display:block;
/*position:relative;发现放在a元素中,
在标准游览器中惨不忍睹,
和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
}
.menu a:hover {
background:#369;
color:#fff;
}
/*新增的二级菜单部分*/
.menu ul ul {
visibility:hidden;/*开始时是隐藏的*/
position:absolute;
left:0px;
top:32px;
}
.menu ul a:hover ul{
visibility:visible;
}
.menu ul ul li {
clear:both;/*垂直显示*/
text-align:left;
}
发现二级菜单在firefox与safari与chrome中没有反应,弹不出来(这三个浏览器的CSS部分互相抄袭严重啊)。opera10表现得最好,IE8其次。不过,标准浏览器的所有元素都支持hover伪类,不像IE6,非带href的a元素不可。我们改写部分CSS代码:
.menu ul li:hover ul,/*非IE6*/
.menu ul a:hover ul{/*IE6*/
visibility:visible;
}
二级菜单能弹出来了,但那个神秘的li元素也现形了。我用双重浮动的收缩包围(shrink-wrapping)现象都无法消除这个神秘的li元素。参考外国的代码,方法是,把整个子菜单放到a元素的外面,然后用li:hover控制样式的切换。于是结构层改写如下:
菜单一
- 二级菜单_11
- 二级菜单_12
菜单二
- 二级菜单_21
- 二级菜单_22
//***************略************
//***************略************
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html中鼠标左键自定义多级菜单,CSS多级菜单的实现代码相关推荐
- zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法
转载自:http://blog.csdn.net/wide288/article/details/21622183 zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法: z ...
- 超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法)。以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行。
超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法).以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行. 参考文章: (1)超链接a标签的伪类选择器 ...
- vscode 单击跳转_vscode中ctrl+鼠标左键不能跳转_编程开发工具
mac电脑怎么样安装vscode_编程开发工具 mac电脑安装vscode的方法是:1.打开浏览器搜索vscode,进入官网:2.点击[download for mac]进行下载:3.双击下载的压缩包 ...
- vscode 单击跳转_vscode中ctrl+鼠标左键不能跳转
vscode中ctrl+鼠标左键不能跳转,就会,文件,教程,工作,跳转 vscode中ctrl+鼠标左键不能跳转 易采站长站,站长之家为您整理了vscode中ctrl+鼠标左键不能跳转的相关内容. 问 ...
- 在VMware中,双击鼠标左键,ctrl键粘滞问题
在虚拟机下开发程序时,发现键盘输入异常.后发现是双击鼠标左键时,ctrl键粘滞所致. 网上搜索解决方案是: 在VMvare中 选择"虚拟机" -> "设置" ...
- java如何判断鼠标双击_Swing中如何比较好的判断鼠标左键双击
importjava.awt.Toolkit;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;importja ...
- 第一次OpenCV小作业-使用鼠标左键画圆画矩形
2020年9月28日 OpenCV中GUI的特性作业: 在白色(255, 255, 255)的背景中,利用滑动条选择颜色(RGB!),用鼠标左键画圆,右键画矩形. 分析: 要在白色背景中,利用滑动条选 ...
- C语言获取左键鼠标点击的次数,c语言在控制台判定鼠标左键的小例子
c语言在控制台判定鼠标左键的小例子 复制代码 代码如下: // temp1.cpp : Defines the entry point for the console application. // ...
- 鼠标左键按钮不起作用? 这是解决方法
Third of november/Shutterstock.com11月3日/Shutterstock.com Even something as simple as a mouse button ...
最新文章
- 查找数组里相同元素的个数
- Android平台开源项目
- Angular rxjs源代码分析:range(0, 10)的实现
- 环形均分纸牌问题(中位数)
- 群晖 百度网盘_海康威视联合百度网盘推出NAS私有存储 贡献带宽获积分兑网盘会员...
- 案例解析丨Spark Hive自定义函数应用
- python八角图形绘制_(Python)从零开始,简单快速学机器仿人视觉Opencv—第四节:OpenCV处理鼠标事件...
- mysql 正则截取字符串_mysql字符串查找截取与正则表达式的联合应用 | 学步园
- mysql 在线日期_mysql,由 时间点求时间段的问题,在线时间率
- html dom怎么写,HTML DOM 属性
- mysql——启动服务问题Found option without preceding group in config file
- 5.28 周末笔记(三)
- 闹钟流程_国际航班流程全攻略(中转+不同航空公司+中转换机场+航班变动)
- 诺基亚5320XM 上的最好的手机浏览器,UCWEB 6
- EMDLP:用于RNA甲基化位点预测的集成多尺度深度学习模型 论文解读
- Lowest Common Ancestor of a Binary Tree
- 经济基础知识(中级)【6】
- MATLAB2018a解压文件损坏,教大家解压压缩包提示已损坏的解决方法
- 逆水寒服务器什么时候能维护好,逆水寒更新了什么内容 8月23日官方维护内容及时间一览...
- Rayleigh瑞利多径信道matlab模拟和仿真
热门文章
- IBM Holosofx 进行业务流程管理
- 详解loadrunner的think time
- HTML参考系列(5)-表格标签
- 如何简单快速的了解区块链技术(结尾有惊喜)
- CSS Transform让百分比宽高布局元素水平垂直居中
- 小tip: base64:URL背景图片与web页面性能优化(转载)
- java正则表达式面试_【Java面试宝典】正则表达式
- mybatis入门基础(二)----原始dao的开发和mapper代理开发
- 透过一个编译报错,总结两个Go程序编译的重要知识
- ​同样更新分支,git merge 和 rebase 有什么区别?