下拉菜单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买了阿里云的服务器,后续计划 ...
随机推荐
- 通过YUM库自动安装Mongodb
1.1查看操作系统版本 1.2验证当前yum库是否包含mongodb 1.3配置包含mongodb的yum源 1.4再次验证YUM库中的mongodb 1.5 yum库安装mongodb 为方便观察, ...
- MySQL 事务
MySQL 事务主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数据库操作语句就构成 ...
- C++中 引入虚基类的作用
当某类的部分或全部直接基类是从另一个基类共同派生而来时,这直接基类中,从上一级基类继承来的成员就拥有相同的名称,派生类的对象的这些同名成员在内存中同时拥有多个拷贝,同一个函数名有多个映射.可以使用作用 ...
- 视频直播点播nginx-rtmp开发手册中文版
2016年8月18日12:42:35 参照官方文档https://github.com/arut/nginx-rtmp-module/wiki/Directives 请注意这个是粗翻译版,仅供参考,不 ...
- run time
http://www.cnblogs.com/yswdarren/p/3619303.html
- FTP提示505错误解决办法
使用ServerU建FTP服务器时,选定了锁定主文件夹,不选即可解决问题.
- Virtualbox 虚拟机支持硬件摄像头
最近我们公司做了一个摄像头项目,需要测试各种浏览器的情况,我就安装了一个Win xp的虚拟机,但是发现无法找到摄像头,经过查阅资料找到了解决办法 前提环境 Mac电脑 Virtualbox 虚拟机 虚 ...
- 给Source Insight做个外挂系列之四－－分析“Source Insight”
外挂的目的就是将代码注入到其它进程中,所以必须要有目标进程才能完成注入,而所谓的目标进程通常是某软件的一部分或者是全部,所以要对目标程序有深入地了解.一般外挂都是针对某个应用程序开发的,其装载.运行都 ...
- Ref 与 Out 的使用方法及区别
C# 中我们有的时候会遇到这样的情况,一个方法需要返回多个参数的时候.怎么办呐? 我们可以给返回的参数加上 Out 或 Ref 类型标识 就可以实现返回多个参数了. 具体他们两个的用法有什么区别 ...
- Android高级之十二讲之如何降低应用内存消耗
安卓应用的内存往往是有限的,从开始的8M到16M,24M,32M,48M,64M等逐步变大,但内存的变大是由于分辨率的提高导致,并不意味着可以随意声明使用内存,而不及时回收(即使Java有自己的垃圾回 ...