下拉菜单demo---参考阿里云首页顶部下拉菜单
前言：
最近开始学习html+css，准备仿照各大网站写一些demo。
正文：
分析阶段：
如下图：
链接来自于：
实现过程：
（一）用css3的transition属性来实现导航菜单的渐变效果。
.head:hover {
background-color: #00a2ca;
transition: background-color 0.5s;
}
在0.5秒内背景颜色转化成#00a2ca。
引用w3c上的例子：
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
} div:hover
{
width:300px;
}
鼠标移动到div上时，div宽度从100px变为300px。如果改成：
div
{
width:100px;
height:100px;
background:blue; } div:hover
{
width:300px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
也能实现同样的效果，所以可知transition要配合鼠标单击、获得焦点、被点击或对元素任何改变事件来使用，实现圆滑地以动画效果改变CSS的属性值。
（二）在下拉框隐藏这块的实现是采用绝对定位+堆叠顺序（z-index）来实现
/*采用绝对定位的堆叠顺序*/
.menu-drop {
position: absolute;
left:;
top: 80px;
width: 1000px;
z-index:;
height:;
}
当要显示下拉框的时候再将z-index属性值设为20（背景z-index设为10）,也可以使用display:none;和display:block;来实现下拉框。
下拉框js代码：
$(document).ready(function () {
//显示菜单下拉框
$(".head-drop, .menu-drop").mouseover(function () {
if ($(".menu-drop").css("height") == "0px") {
$(".menu-drop").css("position", "absolute").css("background-color", "#FFF").css("z-index", "20");
$(".menu-drop").animate({height: "319px"}, 100);
}
})
//隐藏菜单下拉框
$(".head-drop").mouseleave(function () {
$(".menu-drop").css("position", "absolute").css("height", "0").css("z-index", "1");
})
//下拉框链接
$(".pro-menu li").mouseover(function () {
var index = $(".pro-menu li").index(this);
$(this).find("a").css("color","#00a2ca");
$(this).siblings().find("a").css("color","#fff");
$(".content div:eq(" + index + ")").show();
$(".content div:eq(" + index + ")").siblings().hide();
})
})
最后的实现效果：
最后附上具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
<title>阿里云head-drop</title>
<script>
$(document).ready(function () {
//显示菜单下拉框
$(".head-drop, .menu-drop").mouseover(function () {
if ($(".menu-drop").css("height") == "0px") {
$(".menu-drop").css("position", "absolute").css("background-color", "#FFF").css("z-index", "20");
$(".menu-drop").animate({height: "319px"}, 100);
}
})
//隐藏菜单下拉框
$(".head-drop").mouseleave(function () {
$(".menu-drop").css("position", "absolute").css("height", "0").css("z-index", "1");
})
//下拉框链接
$(".pro-menu li").mouseover(function () {
var index = $(".pro-menu li").index(this);
$(this).find("a").css("color","#00a2ca");
$(this).siblings().find("a").css("color","#fff");
$(".content div:eq(" + index + ")").show();
$(".content div:eq(" + index + ")").siblings().hide();
})
})
</script>
<style>
body {
margin:;
} ul {
list-style: none;
margin:;
padding:;
} a {
text-decoration: none;
} .nav > li > a {
display: block;
color: #000000;
padding: 0 20px;
} .nav > li {
position: relative;
float: left;
text-align: center;
} .warp {
padding:;
margin:;
font-size: 20px;
} .head {
height: 80px;
line-height: 80px;
cursor: pointer;
} .head:hover {
background-color: #00a2ca;
transition: background-color 0.5s;
} .head:hover a {
color: #fff;
cursor: default;
} .container {
position: relative;
height: 100%;
max-width: 1200px;
min-width: 1000px;
margin: 0 auto;
} /*采用绝对定位的堆叠顺序*/
.menu-drop {
position: absolute;
left:;
top: 80px;
width: 1000px;
z-index:;
height:;
}
.pro-menu {
height: 100%;
width: 200px;
line-height: 40px;
font-size: 14px;
float: left;
background-color: #dddddd;
} .pro-menu a {
position: relative;
display: block;
} .pro-menu a:before {
content: ".";
display: block;
height:;
overflow: hidden;
} .pro-menu a:after {
content: ".";
display: block;
height:;
overflow: hidden;
clear: both;
} .pro-menu a span {
position: absolute;
right:;
top: 5%;
} .pro-menu ul {
height: 100%;
}
.menu-drop-content {
padding: 10px 0 0 10px;
overflow: hidden;
height: 97%;
}
.content {
background-color: #6ce26c;
height: 100%;
}
</style>
</head>
<body>
<div class="warp">
<div class="head">
<div class="container">
<ul class="nav">
<li class="head-drop"><a href="#">产品</a>
<div class="menu-drop">
<div class="pro-menu">
<ul>
<li><a href="">弹性计算<span>></span></a></li>
<li><a href="">数据库<span>></span></a></li>
<li><a href="">存储与CDN<span>></span></a></li>
<li><a href="">网络<span>></span></a></li>
<li><a href="">云盾<span>></span></a></li>
<li><a href="">大规模计算<span>></span></a></li>
<li><a href="">管理与监控<span>></span></a></li>
<li><a href="">移动服务<span>></span></a></li>
</ul>
</div>
<div class="menu-drop-content">
<div class="content">
<div style="display: block;">弹性计算</div>
<div style="display: none">数据库</div>
<div style="display: none;">存储与CDN</div>
<div style="display: none">网络</div>
<div style="display: none">云盾</div>
<div style="display: none">大规模计算</div>
<div style="display: none">管理与监控</div>
<div style="display: none">移动服务</div>
</div>
</div>
</div>
</li>
<li><a href="#">解决方案</a></li>
<li><a href="#">软件市场</a></li>
<li><a href="#">开发者社区</a></li>
<li><a href="#">服务培训</a></li>
<li><a href="#">合作与生态</a></li>
<li><a href="#">大数据</a></li>
</ul>
</div>
</div>
<div style="width:100%;height: 500px;position: absolute;z-index: 10;background-color: #FFFFFF"></div>
</div>
</body>
</html>
下拉菜单demo---参考阿里云首页顶部下拉菜单的更多相关文章
- 阿里云ubuntu12.04下安装使用mongodb
阿里云ubuntu12.04下安装mongodb apt-get install mongodb 阿里云ubuntu12.04下卸载mongodb,同时删除配置文件 apt-get pur ...
- 阿里云经典网络下一键安装RouterOS-ROS系统
1.阿里云环境centos6.9 x64: 内网网卡为eth0 外网网卡为eth1 阿里云的linux下硬盘名称为/dev/vda 注意阿里云的安全组建议开放任意协议和端口,任意IP允许访问 今天测试 ...
- 阿里云服务器win2003下iis整合tomcat共享80端口
阿里云服务器win2003下iis整合tomcat共享80端口 很多机器都用tomcat跟IIS部署不同网站.最近买了阿里云的服务器.于是也想玩一下.网上百度了很多方法.但是都有缺陷说的不是很清楚.通 ...
- 阿里云服务器centos下安装配置svn服务器
阿里云服务器centos下安装配置svn服务器 1.安装svn服务器端yum install subversion 从镜像下载安装svn服务器端中间会提示是否ok,输入y,确认安装成功提 ...
- 数据库分库分表容量划分建议参考阿里云DRDS原则
做分库分表的时候 一直想知道分库分表容量的最优规则有什么好的建议,以下是参考阿里云 DRDS 分库分表的规则,还是有一定的参考意义 .
- 阿里云ECS/Ubuntu下JDK、Tomcat、MySQL安装记录
今天六一儿童节,然后... ... ... ... 然后就是父亲节呀孩子们!!! ———————————————————————割———————————————————————— 同事需要JDK.To ...
- Linux下配置yum源为阿里云或网易的详解
一.yum源概述 yum需要一个yum库,也就是yum源.默认情况下,CentOS就有一个yum源.在/etc/yum.repos.d/目录下有一些默认的配置文件(可以将这些文件移到/opt下,或者直 ...
- 阿里云centos7.4下tomcat8.5配置ssl证书
环境 阿里云centos7.4 域名也是阿里申请的 jdk1.8 tomcat8.5 1.申请证书 登录到阿里云的域名管理,可以看到已经申请过得域名,我这里第一个已经配置了ssl,第二个未配置,点击更 ...
- SpingBoot一——demo及阿里云部署
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:https://www.cnblogs.com/by-dream/p/9957624.html 双11买了阿里云的服务器,后续计划 ...
随机推荐
- 推荐轻量高效无依赖的开源JS插件和库
目录 图片 布局 音频视频 编辑器 轮播图 弹出层 表单 存储 动画 时间 其它 CDN 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本.demo Lightgalle ...
- PDMS二次开发之PML开发一些常见查询语句
1.查找session 以及session number var !DBname DBname !db = object db(!DBname) !session = !db.lastsession( ...
- 引用dll动态库，动态库中弹出对话框输入，将输入参数，作为变量继续调用。
在做支付项目时,引用动态库,动态库弹出支付宝或者微信的支付码,继而接收.最终将结果返回给调用动态库方法. 首先,动态库接收的是一个string 类型的xml,如 public string Pay(s ...
- sqlite在火狐中安装及使用
1.SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在很多嵌入 ...
- 配置opencv时计算机显示丢失opencv_world300d.dll如何解决
在自己安装路径里找到opencv_world300d.dll文件: 然后把opencv_world300d.dll文件复制到C://Windows/System32里:
- IO复用三种方式
简介 IO复用技术,简单来说就是同时监听多个描述符.在没有用到IO复用以前,只能是一个线程或一个 线程去监听,服务端同时有多个连接的时候,需要创建多个线程或者进程.而且,并不是所有的连 接是一直在传输 ...
- 页面上使用 Thymeleaf 的内联js不当造成了 java.lang.StackOverflowError: null 问题
由于在页面上内联js使用不当,从而在从 Controller 跳转到页面时发生了以下错误: java.lang.StackOverflowError: null at org.thymeleaf.ut ...
- HAProxy
1. HAProxy是支持虚拟主机的,可以工作在4. 7层(支持多网段):2. 能够补充Nginx的一些缺点比如Session的保持,Cookie的引导等工作:3. 支持url检测后端的服务器:4. ...
- ［软件测试基础３］基于Jemter的压力测试
一．整体目标 安装LAMP待测系统,推荐ECShop,基于此进行Jmeter压力测试,并在测试后得出Jmeter测试报告,并根据sysstat得出Linux服务器的CIMN(CPU,IO,Memory ...
- 浅谈Oracle事务【转载竹沥半夏】
浅谈Oracle事务[转载竹沥半夏] 所谓事务,他是一个操作序列,这些操作要么都执行,要么都不执行,是一个不可分割的工作单元.通俗解释就是事务是把很多事情当成一件事情来完成,也就是大家都在一条船上,要 ...