二级菜单HTML原理,CSS多级菜单的实例代码讲解
这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单。实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧。
先来一个非常简单的一级菜单与悬停效果。
菜单一
菜单二
菜单三
菜单四
结构很熟悉吧,就是把原来放图片的地方换成文字而已。我还特意标出来了。接着下来的表现层代码非常简单。
*{
margin:0;
padding:0;
}
.menu{
font-size:12px;
}
.menuli{/*水平菜单*/
float:left;
list-style:none;
}
.menua{
display:block;
position:relative;
height:32px;
width:100px;
line-height:32px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
}
.menua:hover{
background:#369;
color:#fff;
}
.menulispan{
display:none;
position:absolute;
left:0;
top:32px;
width:200px;
height:150px;
background:#B9D6FF;
}
.menua:hoverspan{
display:block;
}
这里有两个值得注意的地方。我们先说第一个。子菜单(span元素)的top应该能使其顶部停留在a元素的范围内,如果包含块是li元素,同理。当span的top值大于32px,如40px,我们就无法把鼠标移到span元素上。因为离开了a:hover的作用范围,span元素又重新隐藏。
.menulispan{
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;
}
.menuli{/*水平菜单*/
float:left;
list-style:none;
position:relative;/*把包含块移动li元素*/
}
.menua{
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;
}
.menua:hover{
background:#369;
color:#fff;
}
/*新增的二级菜单部分*/
.menuulul{
visibility:hidden;/*开始时是隐藏的*/
position:absolute;
left:0px;
top:32px;
}
.menuula:hoverul{
visibility:visible;
}
.menuululli{
clear:both;/*垂直显示*/
text-align:left;
}
发现二级菜单在firefox与safari与chrome中没有反应,弹不出来(这三个浏览器的CSS部分互相抄袭严重啊)。opera10表现得最好,IE8其次。不过,标准浏览器的所有元素都支持hover伪类,不像IE6,非带href的a元素不可。我们改写部分CSS代码:
.menuulli:hoverul,/*非IE6*/
.menuula:hoverul{/*IE6*/
visibility:visible;
}
二级菜单能弹出来了,但那个神秘的li元素也现形了。我用双重浮动的收缩包围(shrink-wrapping)现象都无法消除这个神秘的li元素。参考外国的代码,方法是,把整个子菜单放到a元素的外面,然后用li:hover控制样式的切换。于是结构层改写如下:
菜单一
- 二级菜单_11
- 二级菜单_12
菜单二
- 二级菜单_21
- 二级菜单_22
//***************略************
//***************略************
二级菜单HTML原理,CSS多级菜单的实例代码讲解相关推荐
- html中鼠标左键自定义多级菜单,CSS多级菜单的实现代码
这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单.实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧. 先来一个非常简单的一级菜单与悬停效果. 菜单一 菜单 ...
- python编写电子菜单_Python简单实现多级菜单
1 #-*- coding: utf-8 -*- 2 #@Time : 2018-06-01 13:40 3 #@Author : 超人 4 #@Email : huxiaojiu111@gmail. ...
- 如何快速编写纯CSS菜单?制作CSS精美菜单优化精简代码详细教程
第一步:编写html菜单文字部分: 这里我们就用ul无序列表的方式写一个简单的菜单格式,并给ul标签加一个自定义的类"daohang"(这个可以修改,只要css调用和这里的一致即可 ...
- html如何把纵向垂直菜单变成横向,css横向菜单
第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是: 首页 产品介绍 服务介绍 技术支持 立刻购买 联系我们 第二步:隐藏li的默认样式 因为看起来不是很好看,菜单通常都不需要 ...
- python叮当猫代码_详细介绍一个利用html+css实现叮当猫的实例代码
用html画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一 ...
- 纯 CSS 的多级菜单
无脚本,纯 CSS 实现,在非 IE 内核浏览器和 IE8+ 表现完美. <!DOCTYPE HTML> <html> <head><meta http-eq ...
- 基于STM32的OLED多级菜单GUI实现(简化版智能手表)
前言:本文的OLED多级菜单UI为一个综合性的STM32小项目,使用多传感器与OLED显示屏实现智能终端的效果.项目中的多级菜单UI使用了较为常见的结构体索引法去实现功能与功能之间的来回切换,搭配DH ...
- html京东下拉菜单设置,div css下拉导航菜单(图+演示)
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
- 【荐】自己做一款不错的JS+CSS多级导航菜单
代码简介: 自己做一款不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 代码内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
最新文章
- anaconda pycharm 动手学深度学习环境配置
- Direct2D教程(二)来看D2D世界中的Hello,World
- 自动化机器学习(AutoML)之自动贝叶斯调参
- 【Transformer】DPT: Vision Transformer for Dense Prediction
- USB共享网络:android手机通过USB与Ubuntu进行socket网络通信
- c++ 显示三维散点图_【无机纳米材料科研制图——OriginLab 0209】Origin散点图线性拟合与非线性拟合...
- 串口发送图片VGA显示
- Coding之路——重新学习C++(6):一个String类
- 有关异或符号'^'在c++编程中的应用
- Java实现下载url视频资源
- 转《腾讯大讲堂11 拍拍ce工作经验分享》
- springboot学习笔记1——springboot初始化
- 玩转EXCEL系列-选择性粘贴几个实用技巧
- 启动计算机时听到嘀嘀声,笔记本电脑开机嘀嘀滴声音如何解决
- 切蛋糕问题【小学二年级奥数】
- Python绘制表白爱心源码【女神看了绝对不会拒绝的你的表白嘿嘿】
- 小程序 banner 的使用
- 【科创人独家】EasyStack王瑞琳:All In超级领先,知易行难
- java 支付宝退款、提现(单笔转账到支付宝账户接口)
- MS90C386B:1Port LVDS转LVTTL
热门文章
- glTF格式初步了解
- 青岛智能院助力智慧城市 打造智能产业“黄埔军校”
- 总结界面框架_UI_Adapter
- 方程式漏洞之复现window2008/win7 远程命令执行漏洞
- 版本1.8.1Go安装以及语法高亮配置
- win10大文件无法移动到U盘
- RichTextBox 右键显示 ContextMenuTrip
- [工具] 解决sublime text运行javascript console无输出问题
- Web服务器故障的奇怪原因
- 打开mobilenet——ssd的demo.py显示这样的错误解决方法:Intel MKL FATAL ERROR: Cannot load libmkl_avx.so or libmkl_def.s