下拉菜单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买了阿里云的服务器,后续计划 ...
随机推荐
- log4j.properties 使用
一.参数意义说明 输出级别的种类 ERROR.WARN.INFO.DEBUG ERROR 为严重错误 主要是程序的错误 WARN 为一般警告,比如session丢失 INFO 为一般要显示的信息,比如 ...
- Go语言配置与开发环境配置
1.首先下载go的运行时 http://golang.org/dl/ 下载windows 的zip版本,解压到硬盘上的一个位置 2.设置环境变量如下 GOBIN %GOROOT%\bin //go的 ...
- javascript立即执行函数
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花;当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( ...
- redis 简单应用
Incr $views = Redis::incr('views'); $article_views = Redis::incr('article:' . $article_id . ':views' ...
- 【Git学习笔记】远程仓库
第一种情景:本地初始化一个Git仓库后,接着又在github上创建了一个Git仓库,现在要让这两个仓库进行远程同步. 1. 关联本地仓库就和远程仓库 $ git remote add origin ...
- warnin php startup in unknown on line 0:
PHP Warning: PHP Startup: in Unknown on line 0 这种情况是因为扩展路径有问题导致的路径或错,或没有该扩展但ini中开启了此扩展
- 数据库连接池原理 与实现（动脑学院Jack老师课后自己的练习有感）
第一步: 首先创建一个数据库连接池的接口: 数据库连接池接口有两个主要的方法,其中一个getConnection(); 通过数据库连接池返回给用户封装的数据库连接对象 createConnectio ...
- Find Missing Term in Arithmetic Progression 等差数列缺失项
查找等差数列中的缺失项. e.g.Input: arr[] = {2, 4, 8, 10, 12, 14} Output: 6 Input: arr[] = {1, 6, 11, 16, 21, 31 ...
- dede文章内容页增加视频文件
具体方法:1.在优酷上注册个账号.将要上传的视频在优酷上发布.2.待审核完成后分享复制html代码. 3.在后台发布文章时点击源码,将优酷中复制的代码考过来.4.发布后生成页面即可.(可参照vide ...
- 手机QQ内置网页，微信内置网页中进行分享到QQ和微信的操作
微信内的网页分享: API内容详见微信开发文档 https://mp.weixin.qq.com/wiki 这里需要注意的是:调用微信API的时候修改的是微信内网页右上角三个点那里打开后,选择分享之 ...