jQuery仿腾讯云滑动下拉导航菜单效果代码

最新推荐文章于 2022-05-09 14:57:53 发布
最新推荐文章于 2022-05-09 14:57:53 发布
阅读量550 收藏
点赞数
分类专栏： web前端 jQuery css 文章标签： jquery css menu html web ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tomhat/article/details/84611584
版权
web前端 同时被 3 个专栏收录
24 篇文章 0 订阅
订阅专栏
jQuery
17 篇文章 0 订阅
订阅专栏
css
8 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">

<link media="screen" rel="stylesheet" href="demo.css"/>

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
var qcloud={};
$('[_t_nav]').hover(function(){
var _nav = $(this).attr('_t_nav');
clearTimeout( qcloud[ _nav + '_timer' ] );
qcloud[ _nav + '_timer' ] = setTimeout(function(){
$('[_t_nav]').each(function(){
$(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('nav-up-selected');
});
$('#'+_nav).stop(true,true).slideDown(200);
}, 150);
},function(){
var _nav = $(this).attr('_t_nav');
clearTimeout( qcloud[ _nav + '_timer' ] );
qcloud[ _nav + '_timer' ] = setTimeout(function(){
$('[_t_nav]').removeClass('nav-up-selected');
$('#'+_nav).stop(true,true).slideUp(200);
}, 150);
});
});
</script>

</head>
<body>
<div class="head-v3">
<div class="navigation-up">
<div class="navigation-inner">
<div class="navigation-v3">
<ul>
<li class="nav-up-selected-inpage" _t_nav="home">
<h2>
<a href="http://www.qcloud.com">首页</a>
</h2>
</li>
<li class="" _t_nav="product">
<h2>
<a href="http://www.qcloud.com/product/product.php">云产品</a>
</h2>
</li>
<li class="" _t_nav="wechat">
<h2>
<a href="http://weixin.qcloud.com/market">微信建站</a>
</h2>
</li>
<li class="" _t_nav="solution">
<h2>
<a href="http://game.qcloud.com/">行业解决方案</a>
</h2>
</li>
<li class="" _t_nav="cooperate">
<h2>
<a href="http://www.qcloud.com/agent/agent.php">合作伙伴</a>
</h2>
</li>
<li _t_nav="support">
<h2>
<a href="http://www.qcloud.com/wiki.php">帮助与支持</a>
</h2>
</li>
</ul>
</div>
</div>
</div>
<div class="navigation-down">
<div id="product" class="nav-down-menu menu-1" style="display: none;" _t_nav="product">
<div class="navigation-down-inner">
<dl style="margin-left: 100px;">
<dt>计算机与网络</dt>
<dd>
<a hotrep="hp.header.product.compute1" href="http://www.qcloud.com/product/product.php?item=cvm">云服务器</a>
</dd>
<dd>
<a hotrep="hp.header.product.compute2" href="http://www.qcloud.com/product/product.php?item=cee">弹性Web引擎</a>
</dd>
<dd>
<a hotrep="hp.header.product.compute3" href="http://www.qcloud.com/product/product.php?item=balance">负载均衡</a>
</dd>
</dl>
<dl>
<dt>存储与CDN</dt>
<dd>
<a hotrep="hp.header.product.storage1" href="http://www.qcloud.com/product/product.php?item=cdb">云数据库</a>
</dd>
<dd>
<a hotrep="hp.header.product.storage2" href="http://www.qcloud.com/product/product.php?item=cmem">NoSQL高速存储</a>
</dd>
<dd>
<a hotrep="hp.header.product.storage4" href="http://www.qcloud.com/product/product.php?item=cos">对象存储服务(beta)</a>
</dd>
<dd>
<a hotrep="hp.header.product.storage3" href="http://www.qcloud.com/product/product.php?item=cdn">CDN</a>
</dd>
</dl>
<dl>
<dt>监控与安全</dt>
<dd>
<a hotrep="hp.header.product.monitoring1" href="http://www.qcloud.com/product/product.php?item=monitor">云监控</a>
</dd>
<dd>
<a hotrep="hp.header.product.monitoring2" href="http://www.qcloud.com/product/product.php?item=safe">云安全</a>
</dd>
<dd>
<a hotrep="hp.header.product.monitoring3" href="http://www.qcloud.com/product/product.php?item=cat">云拨测</a>
</dd>
</dl>
<dl>
<dt>数据分析</dt>
<dd>
<a hotrep="hp.header.product.analysis1" href="http://mta.qq.com/">腾讯云分析</a>
</dd>
<dd>
<a hotrep="hp.header.product.analysis2" href="http://www.qcloud.com/product/product.php?item=keyfactor">关键因子</a>
</dd>
</dl>
<dl>
<dt>开发者工具</dt>
<dd>
<a hotrep="hp.header.product.devtool1" href="http://www.qcloud.com/product/product.php?item=mna">移动加速</a>
</dd>
<dd>
<a hotrep="hp.header.product.devtool2" href="http://www.qcloud.com/product/product.php?item=appup">应用加固</a>
</dd>
<dd>
<a hotrep="hp.header.product.devtool3" href="http://www.qcloud.com/product/product.php?item=dove">信鸽推送</a>
</dd>
</dl>
<dl>
<dt>开发者服务</dt>
<dd>
<a hotrep="hp.header.product.service1" href="http://www.qcloud.com/special/security.php">安全认证服务</a>
</dd>
<dd>
<a hotrep="hp.header.product.service2" href="http://beian.qcloud.com/">域名备案</a>
</dd>
</dl>
</div>
</div>
<div id="solution" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="solution">
<div class="navigation-down-inner">
<dl style="margin-left: 380px;">
<dd>
<a class="link" hotrep="hp.header.solution.1" href="http://weixin.qcloud.com/">微信</a>
</dd>
</dl>
<dl>
<dd>
<a class="link" hotrep="hp.header.solution.2" href="http://game.qcloud.com/">游戏</a>
</dd>
</dl>
<dl>
<dd>
<a class="link" hotrep="hp.header.solution.3" href="http://m.qcloud.com/">移动应用</a>
</dd>
</dl>
</div>
</div>
<div id="support" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="support">
<div class="navigation-down-inner">
<dl style="margin-left: 610px;">
<dd>
<a class="link" hotrep="hp.header.support.1" href="http://www.qcloud.com/wiki.php">资料库</a>
</dd>
</dl>
<dl>
<dd>
<a class="link" hotrep="hp.header.support.2" href="http://bbs.qcloud.com/forum.php">论坛</a>
</dd>
</dl>
<dl>
<dd>
<a class="link" hotrep="hp.header.support.3" href="http://www.qcloud.com/fuchi2014.php">亿元扶持</a>
</dd>
</dl>
</div>
</div>
<div id="cooperate" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="cooperate">
<div class="navigation-down-inner">
<dl style="margin-left: 480px;">
<dd>
<a hotrep="hp.header.partner.1" href="http://www.qcloud.com/agent/agent.php">代理商</a>
</dd>
</dl>
<dl>
<dd>
<a hotrep="hp.header.partner.2" href="http://proxy.weixin.qcloud.com/apply/apply.php">微信服务商</a>
</dd>
</dl>
<dl>
<dd>
<a hotrep="hp.header.partner.3" href="http://www.qcloud.com/special/venture.php?from=qcloud.banner">创投机构</a>
</dd>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>

demo.css
@charset "UTF-8";
html{font-size:62.5%;font-family:'helvetica neue',tahoma,arial,'hiragino sans gb','Simsun',sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr{margin:0;padding:0}
body{line-height:1.333;font-size:12px}
h1,h2,h3,h4,h5,h6{font-size:100%;font-family:arial,'hiragino sans gb','microsoft yahei','Simsun',sans-serif}
li{list-style:none}
a:link,a:visited{text-decoration:none}


.head-v3{position:relative;z-index:100;min-width:1000px}
.head-v3 .navigation-inner{margin:0 auto;width:980px;position:relative}
.navigation-up{height:60px;background:#27303f}
.navigation-up .navigation-v3{margin-left:155px;float:left;_margin-left:10px}
.navigation-up .navigation-v3 ul{float:left}
.navigation-up .navigation-v3 li{float:left;font:normal 16px/59px "microsoft yahei";color:#fff}
.navigation-up .navigation-v3 .nav-up-selected{background:#344157}
.navigation-up .navigation-v3 .nav-up-selected-inpage{background:#202833}
.navigation-up .navigation-v3 li h2{font-weight:normal;padding:0;margin:0}
.navigation-up .navigation-v3 li h2 a{padding:0 25px;color:#fff;display:inline-block;height:60px;font-family:"microsoft yahei"}

.navigation-down{position:absolute;top:60px;left:0px;width:100%}
.navigation-down .nav-down-menu{width:100%;margin:0;background:#344157;position:absolute;top:0px}
.navigation-down .nav-down-menu .navigation-down-inner{margin:auto;width:1200px;position:relative}
.navigation-down .nav-down-menu dl{float:left;margin:18px 80px 18px 0}
.navigation-down .menu-1 dl{margin:20px 80px 25px 0}
.navigation-down .menu-1 dt{font:normal 16px "microsoft yahei";color:#61789e;padding-bottom:10px;border-bottom:1px solid #61789e;margin-bottom:10px}
.navigation-down .menu-1 dd a{color:#fff;font:normal 14px/30px "microsoft yahei"}
.navigation-down .menu-1 dd a:hover{color:#60aff6}
.navigation-down .menu-2 dd a,.navigation-down .menu-3 dd a{color:#fff;font:normal 16px "microsoft yahei"}
tomhat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery仿腾讯云下拉导航
03-03
jquery仿腾讯云下拉导航源码，直接调用就可以
JQuery仿腾讯云滑动下拉导航菜单效果代码
07-04
JQuery仿腾讯云滑动下拉导航菜单效果代码
jquery仿2017年腾讯云导航顶部和左侧响应式菜单兼容IE8
01-08
项目需求要求做一个类似2017年的腾讯云的导航菜单，就写了个有顶部下拉菜单和左侧滑动的菜单，同时兼容IE8，并响应式的可以在移动端按需显示。
仿腾讯云菜单
08-21
query仿腾讯云下拉宽屏导航菜单
jquery仿腾讯云滑动下拉导航菜单效果.zip
07-04
jquery仿腾讯云滑动下拉导航菜单效果是一款和阿里云菜单效果一样的菜单，但是处理方法却大不相同。
vue 仿tx导航栏效果
加油小伙子
05-09 604
不要过多依赖组件来实现前端效果，否则老板的需求会让你裂开
jquery仿腾讯云滑动下拉导航菜单效果特效代码
03-20
本项目"jquery仿腾讯云滑动下拉导航菜单效果特效代码"是基于jQuery实现的一个类似腾讯云风格的滑动下拉菜单。这种菜单常见于许多网站的顶部导航栏，它提供了良好的用户体验，尤其是当网站有多个层级的导航选项时。 ...
jquery鼠标悬停滑动下拉导航菜单效果.zip
07-11
"jQuery鼠标悬停滑动下拉导航菜单效果"是一个常见的网页交互设计技术，广泛应用于企业网站和商城网站，以提升用户体验。这个效果通过结合JavaScript库jQuery实现，使得当用户将鼠标悬停在菜单项上时，会滑动展示下...
jQuery仿百度知道宽屏下拉导航菜单代码.zip
最新发布
09-23
总之，"jQuery仿百度知道宽屏下拉导航菜单代码"提供了一个很好的学习和实践jQuery特效的例子。通过理解并修改这个代码，开发者不仅可以提升对jQuery的理解，还能掌握网页动态效果的实现技巧，为自己的项目增添亮点。...
Echarts带jQuery仿腾讯云产品列表滚动tab切换示例
LisenYang的专栏
12-26 757
jquery实现左侧下拉菜单列表
MySunshine07的博客
07-21 3053
1、HTML部分 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;左侧下拉菜单列表示例&lt;/title&gt; &lt;link rel="stylesheet"
纯DIV+CSS制作的下拉菜单，二级下拉菜单，三级下拉菜单
.NET寺庙
11-23 2410
  HTML代码http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">三级dropdown弹出菜单/* common styling */.menu {font-family: arial, sans-serif; width:750px;
微信小程序下拉菜单实例
热门推荐
书写人生
06-07 2万+
微信小程序下拉菜单思路与步骤： 布局方面，整体使用dl来写，二级包在dd中，用ul li来写；交互方面，点击某一级菜单，关闭兄弟子菜单，点击某子菜单关闭所有菜单。 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单，初始隐藏、position为absolute，使用z-index浮出页面层 /*总菜单容器*/ .menu {display: block;height: 38
jquery hover()事件函数
motian06的专栏
08-21 1万+
hover(over, out)事件函数 当鼠标移动一个匹配的元素上面，会触发指定的第一个函数 当鼠标移出这个元素时，会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 首页 关于考试 报考指南 考试情报 考试与就业 网站地图 $(function(){ //鼠标移到与移出
Bootstrap【第二章】全局CSS之排版&代码&表格
明思齐的博客
04-30 1137
前言：今天要学习的是Bootstrap的全局CSS之排版&代码&表格 一张图概括今天的内容： 一、排版 1.1、页面主题 1、段落突出：通过.lead类可以让段落突出显示 例如：<p class="lead">我家门前有两颗枣树</p> 1.2、标题 1.标题h1--h6和html中的效果一样 2.副标题：在<h1><small>副标题</small...
$(this).attr $(this).val
menu_520的博客
11-14 6146
jquery attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. attr(属性名)        //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回
【HTML + CSS】模仿腾讯云页面——细节优化
董哲朋的博客
04-04 948
文章目录1.导航栏图像位置定位index-nav.htmlcss-nav.css2.列表装饰元素top-list.htmltop-list.csscss 更新位置实现效果 对导航栏、列表进行细节优化 1.导航栏 初稿我们的样式中，导航栏的显示效果并不完美，logo 位置正常，但是显然后侧的文字效果并未实现精准定位，首先给出实现后的样式效果，清除需要优化的位置 图像位置定位 分析源码可知，初稿中将 img-logo 和 container 合并布局，造成无法留出间隔距离的情况 这次我们单独布局并设置
菜单样式1：鼠标悬停向下弹出列表
weixin_30245867的博客
07-03 626
JS部分： varqcloud={}; $('[_t_nav]').hover(function(){ var_nav=$(this).attr('_t_nav'); clearTimeout(qcloud[_nav+'_timer']); qcloud[_na...
jquery 鼠标移过层的显示隐藏
开心快乐的学习中
12-15 2805
     .nav1, .nav1 ul    {        list-style: none;        margin: 0;        padding: 0;        width: 450px;    }    .nav1    {        margin-top: 0px;    }    .nav1    {        font-family: Arial,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值