这篇博客展示了如何使用JavaScript实现一个蓝色调的阿里云风格导航菜单特效。通过关键代码片段，读者可以了解实现这种特效的基本思路和方法。
蓝色的js阿里云导航菜单特效 ，先来看看效果：
一部分关键的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蓝色的js阿里云导航菜单特效_js代码</title>
<meta name="keywords" content="js代码,下拉导航,下拉导航菜单,下拉菜单导航,阿里云导航菜单js特效" />
<meta name="description" content="蓝色的js阿里云导航菜单特效。" />
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/common-header9.css">
<script type="text/javascript" src="js/base-all.js"></script>
<script type="text/javascript" src="js/common-header.js"></script>
</head>
<body>
<!-- 开发者中心数据拼接-->
<!-- 培训与频道拼接-->
<!-- 互联网+拼接-->
<div data-spm="2">
<div class="ali-common-header">
<div class="ali-common-header-inner common-header-clearfix">
<!-- 运营专区 -->
<div class="activity item pull-left">
<div class="flash-wrap" id="J-ali-activity-img">
<img src="images/TB1nHoRLXXXXXa3XVXXx1caHXXX-460-124.gif"
style="height: 62px;width: 230px;">
</div>
<div class="link logo">
<a href="http://www.aliyun.com" data-spm-click="gostr=/aliyun;locaid=20160107">
</a>
</div>
<div class="link activity-url" id="J-activity-url" activity-url="http://promotion.aliyun.com/ntms/201601/hello.html?spm=5176.383338.3.1.3U4qp9">
</div>
</div>
<!-- 导航菜单 -->
<ul class="menu item pull-left" id="J_common_header_menu" data-spm="201">
<li class="top-menu-item" has-dropdown="true" menu-type="product" data-spm-click="">
<span class="menu-hd">
产品
</span>
<div class="menu-dropdown common-header-clearfix">
<div class="menu-dropdown-inner">
<div class="menu-dropdown-sidebar pull-left">
<a data-spm-click="gostr=/aliyun;locaid=" class="active common-header-clearfix"
href="javascript:void(0);" sidebar-type="ecs">
弹性计算
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="database">
数据库
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="cdn">
存储与CDN
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="network">
网络
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="bigdata">
大规模计算
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="yundun">
云盾
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="manage">
管理与监控
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="service">
应用服务
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="middleware">
互联网中间件
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="mobileservice">
移动服务
<span class="icon pull-right">
</span>
</a>
<a data-spm-click="gostr=/aliyun;locaid=" class=" common-header-clearfix"
href="javascript:void(0);" sidebar-type="domain">
域名与网站（万网）
<span class="icon pull-right">
</span>
</a>
</div>
<div class="menu-dropdown-content">
<!-- 下拉右侧内容 -->
<!-- 模板一： -->
<div style="display: block;background-image:url(./images/ecs-bg-x1.jpg);"
class="item-sub ecs-bg tpl1 product-bg-common common-header-clearfix" sidebar-type="ecs">
<div class="menu-dropdown-bd menu-dropdown-split-line">
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/ecs/">
<h4>
云服务器 ECS
</h4>
<div class="desc">
可弹性扩展、安全稳定、简单易用的计算服务
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/disk/">
<h4>
块存储
</h4>
<div class="desc">
可弹性扩展、高性能、高可靠的块级随机存储
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/ace/">
<h4>
云引擎 ACE
</h4>
<div class="desc">
弹性、分布式的应用托管环境
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/ess/">
<h4>
弹性伸缩
</h4>
<div class="desc">
自动调整弹性计算资源的管理服务
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/containerservice/">
<h4>
容器服务（公测中）
</h4>
<div class="desc">
运行和管理 Docker容器
</div>
</a>
</div>
</div>
<div class="menu-dropdown-bd">
<div class="menu-dropdown-down-item">
<h5 class="topic-hd">
最新特性
</h5>
<ul class="desc">
<li>
<i class="list-style">
●
</i>
<a target="_blank" href="http://www.aliyun.com/act/aliyun/gaoxiaoyunpan.html "
class="desc-li-txt">
ECS高效云盘上线
</a>
</li>
<li>
<i class="list-style">
●
</i>
<a target="_blank" href="http://www.aliyun.com/act/aliyun/usaaz2.html "
class="desc-li-txt">
ECS美国硅谷第二可用区开放
</a>
</li>
<li>
<i class="list-style">
●
</i>
<a target="_blank" href="http://www.aliyun.com/act/aliyun/singaporesale.html "
class="desc-li-txt">
ECS等10余款产品开放新加坡地域
</a>
</li>
<li>
<i class="list-style">
●
</i>
<a target="_blank" href="http://help.aliyun.com/knowledge_detail.htm?knowledgeId=6527514 "
class="desc-li-txt">
ECS镜像共享功能上线
</a>
</li>
<li>
<i class="list-style">
●
</i>
<a target="_blank" href="http://bbs.aliyun.com/read/241167.html " class="desc-li-txt">
SSD云盘和IO优化型实例免费公测
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 模板二： -->
<!-- 模板一： -->
<div style="display: ;background-image:url(./images/database-bg-x1.jpg);"
class="item-sub database-bg tpl1 product-bg-common common-header-clearfix"
sidebar-type="database">
<div class="menu-dropdown-bd menu-dropdown-split-line">
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/rds/">
<h4>
云数据库 RDS
</h4>
<div class="desc">
完全兼容MySQL，SQLServer，PostgreSQL协议的关系型数据库服务
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/mongodb/">
<h4>
云数据库MongoDB版（公测中）
</h4>
<div class="desc">
三节点副本集保证高可用
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/ocs/">
<h4>
云数据库Memcache版
</h4>
<div class="desc">
在线缓存服务，为热点数据的访问提供高速响应
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/kvstore">
<h4>
云数据库Redis版
</h4>
<div class="desc">
兼容开源Redis协议的Key-Value类型在线存储服务
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/ads">
<h4>
分析型数据库
</h4>
<div class="desc">
海量数据实时高并发在线分析服务
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/dts/">
<h4>
数据传输（公测中）
</h4>
<div class="desc">
支持数据迁移及实时订阅同步的数据传输服务
</div>
</a>
</div>
<div class="menu-dropdown-down-item">
<a href="http://www.aliyun.com/product/dms/">
<h4>
数据管理（公测中）
</h4>
<div class="desc">
比phpMyAdmin更强大，比Navicat更易用
</div>
</a>
</div>
</div>
<div class="menu-dropdown-bd">
<div class="menu-
最低0.47元/天 解锁文章
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
