下拉菜单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买了阿里云的服务器,后续计划 ...
随机推荐
- Matlab的标记分水岭分割算法
1 综述 Separating touching objects in an image is one of the more difficult image processing operation ...
- Ubuntu下安装R语言和开发环境
[简介]R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个自由.免费.源代码开放的软件,它是一个用于统计计算和统计制图的优秀工具. [R语言的安装]官网:https://www.r-pr ...
- 原来 laravel 路由 参数可以为可选。。。 很灵活
基本路由 您的应用程序的绝大多数路由将在 app/routes.php 文件中定义.Laravel 中最简单的路由由一个 URI 和一个闭包调用组成. 基本 GET 路由 复制代码代码如下: Rout ...
- Thinking in Java——笔记(12)
Error Handling with Exceptions The ideal time to catch an error is at compile time, before you even ...
- throw exception
Throw new CustomerException('Customer message'); // App\Exceptions\Handler.php public function rende ...
- oracle 函数调用
--带out的函数 create or replace function fun_try(v_name varchar,v_outname out varchar)return varchar2 is ...
- 好用的Markdown编辑器一览
Markdown 是一种简单的.轻量级的标记语法.用户可以使用诸如 * # 等简单的标记符号以最小的输入代价生成极富表现力的文档. Markdown具有很多优点: 写作中添加简单符号即完成排版,所见即 ...
- oracle 查询结果集运算
intersec:交集minus:差集union:进行表连接后会筛选掉重复的记录,表连接之后对结果进行排序运算,删除重复记录在返回结果. union all:只是简单的将两个结果合并就返回.无论是否有 ...
- VitualBox环境下，实现windows系统与虚拟机Linux文件互传
本次环境是Win7系统和ubuntu14(虚拟机) 1.首先需要安装VitualBox的增强功能,如图所示 2.安装完成后重启linux系统,然后在WIN7系统下创建共享文件夹(本文在D盘下创建名为V ...
- DNS压力测试工具dnsperf简介
dnsperf是我最近写的一个开源的DNS压力测试工具,用户可以用它来对DNS服务器或者Local DNS做压力测试.dnsperf目前的实现是单进程模式,通过epoll非阻塞地处理网络事件. dns ...