html二级菜单点击淡入淡出,Web前端开发实战1:二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校站点。电商类站点。新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢?
学习了Web前端开发的知识后,我们是能够实现这种功能的。复杂的都是从基础效果上加入做出来的。原理和流程
还是一样的,今天開始做一些简单的二级下拉式菜单。
横向一级菜单我们见到的非常多。例如以下图所看到的是:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
二级下拉菜单图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
二级下拉菜单是在横向一级菜单的基础上加入下拉效果实现的。制作思路:
第一步:静态网页的制作
标签
- ...
项目列表
标签链接
float浮动
display:block属性
postion属性规定元素的定位
第二步:动态特效的实现
下拉菜单的显示与隐藏
今天我们使用CSS样式表实现,那么制作流程是:
1一级菜单设置:设置CSS样式,使一级菜单横向显示,位于一行中。
2二级菜单设置:给”课程大厅”菜单,加入二级菜单(JavScript/JQuery/Ajax三项),并带链接;同一时候给“学习中心”菜
单,加入二级菜单(视频学习/案例学习/交流平台三项)。也带链接。
3隐藏二级菜单: 设置CSS样式,让二级菜单隐藏。
4显示二级菜单:设置CSS样式,让二级菜单显示。
5浏览器兼容性问题解决以及代码优化,至少測试五个浏览器。我測试的是IE7,8,9。2345浏览器,谷歌浏览器以
及火狐浏览器。
HTML代码部分:
下拉菜单
- 站点首页
- 课程大厅
- JavaScript
- jQuery
- Ajax
- 学习中心
- 视频学习
- 案例学习
- 交流平台
- 经典案例
- 关于我们
CSS样式表style.css文件代码:
/*CSS全局设置*/
*{
margin:0;
padding:0;
}
.nav{
background-color:#EEEEEE;
height:40px;
width:450px;
margin:0 auto;
}
/*横向一级菜单样式设置*/
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
color:#000000;
display:block;/*将a行内元素转变成块级元素*/
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
/*二级下拉菜单样式设置*/
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul{
position:absolute;
top:40px;
left:0px;
display:none;/*默认状态下或鼠标离开时隐藏*/
width:90px;
}
/*为了兼容IE7写的CSS样式,可是必须写在a:hover前面*/
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
/*鼠标滑过一级菜单的元素时显示下拉菜单*/
ul li:hover ul{
display:block;
}
来看一下效果:
1初始化状态或鼠标离开显示为横向一级菜单:
2鼠标滑过有二级下拉菜单的元素时显示下拉菜单:
3显示的下拉菜单中的链接样式:
html二级菜单点击淡入淡出,Web前端开发实战1:二级下拉式菜单之CSS实现相关推荐
- java 新建菜单选项_请完成下列Java程序:创建一个下拉式菜单,菜单项包括3个CheckboxM..._考试资料网...
请完成下列Java程序:创建一个下拉式菜单,菜单项包括3个CheckboxMenultem(复选框),一条分割线和一个Exit项.要求打开或关闭复选框时,确定是哪个被切换,是开还是关,并输出它的状态: ...
- 开发一个出生年份的下拉选择框供用户选择_你的下拉式菜单设计对了吗?
追波范儿(dribbbledesign)------------------------------------------- 下拉菜单主要有两种类型:1. 用于导航的下拉菜单:2. 用于表单的下拉菜 ...
- 开发一个出生年份的下拉选择框供用户选择_关于下拉式菜单,这一篇足够了
下拉菜单主要有两种类型: 1.用于导航的下拉菜单: 2.用于表单的下拉菜单. 在本文中,我们将对以下内容进行介绍: 01 结构剖析 下拉菜单的解剖结构与文本输入字段的解剖结构非常相似. 02 下拉菜单 ...
- Java Swing中的下拉式菜单(menu)、弹出式菜单(JPopupMenu)、选项卡窗体(JTabbedPane),TextArea右键菜单 组件使用案例
文章目录 1.. Java弹出菜单,为JTextArea添加了右键弹出式菜单 2.:下拉式菜单的创建步骤: 3:弹出式菜单的创建步骤: 4:选项卡窗体: 菜单是GUI中最常用的组件,菜单不是Compo ...
- access字段属性设置下拉列表_关于下拉式菜单,这一篇足够了
下拉菜单主要有两种类型: 1.用于导航的下拉菜单: 2.用于表单的下拉菜单. 在本文中,我们将对以下内容进行介绍: 1. 结构剖析 下拉菜单的解剖结构与文本输入字段的解剖结构非常相似. 2.下拉菜单类 ...
- 下拉式菜单在GridView编辑时联动选择
父子下拉式菜单DropDownList在GridView编辑时联动选择. 本Demo从添加时的父子DropDownList联动选择,以及在GridView的编辑时联动功能实现. 文件格式:.wmv;大 ...
- 转发:11个web前端开发实战项目案例+源码!拿走就是了
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43793782/arti ...
- Web前端开发书籍推荐(下)
web前端-FE <HTTP权威指南>高清中文版 Ajax实战 AJax与PHP基础教程 Ajax中文手册 W3School全套教程.CHM web前端标准在各浏览器中的差异 Web前端开 ...
- WEB前端网页设计-Bootstrap 按钮下拉菜单
目录 Bootstrap 按钮下拉菜单 分割的按钮下拉菜单 按钮下拉菜单的大小 按钮上拉菜单 Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...
- html基础——下拉式菜单
一个网站能否让用户容易使用该网站往往是由菜单栏体现出来,因为它为网页的大多数页面提供功能入口.一个轻轻的点击以后,即可显示出菜单项,将网站的大部分页面和功能显示出来让用户清楚了解从而用户节约一定的时间 ...
最新文章
- 大厂线上案例复盘--代码漏洞
- Python计算两个numpy数组的交集(Intersection)实战:两个输入数组的交集并排序、获取交集元素及其索引、如果输入数组不是一维的,它们将被展平(flatten),然后计算交集
- HTML5性能优化需要注意的几个问题
- P1351-联合权值【树形结构】
- jzoj1013-GCD与LCM【数论】
- es6删除数组某一项_精学手撕系列——数组扁平化
- 面试题9:斐波那契数列
- 2.maven 安装配置
- 外部库依赖以及 编译
- Python画散点图之seaborn
- 虚拟化与瑞友天翼应用——“瑞友杯”虚拟化征文
- 手机铃声格式规范,midi格式规范(转)
- 如何看懂公司的财务报表(2)
- 手机内存文件夹html,手机内存不够用?这6个文件夹要定时清理,至少能省下2个G...
- scratch打棒球游戏 电子学会图形化编程scratch等级考试四级真题和答案解析2019-12
- 基于C#的“密码学”实验演示系统的设计与实现、.NET下的RSA编程、各种密码学算法的C# GUI编程实现
- 地图数据可视化库folium
- 基于Hashids的高效游戏礼包兑换码系统完整设计
- Numpy中 tile函数的用法
- 14年高考结束了,明日边缘看完了,明天周一了 (2014-06-08)
热门文章
- 卸载 mysql 2008_强力卸载SQL Server 2008图文详解
- iOS 组件化/模块化架构设计实践
- 2020 3月 月末总结(一个月的面试收获了什么)
- 知识追寻者网址神器私藏合集
- Spring Data JPA 的动态查询和一对多及多对多查询
- Specification使用
- mysql the cabinet_mysql 一个较特殊的问题:You can’t specify target table ‘wms_cabinet_form’ | 很文博客...
- 后台将图片以base64形式传给前台,前台展示
- 谷歌中国进入后李开复时代:向总部架构靠拢
- 多肽细胞穿膜肽TAT修饰牛血清白蛋白BSA/人血清白蛋白HSA/卵清白蛋白OVA纳米粒(实验要求)