jquery vue仿腾讯云多级菜单下拉效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery vue仿腾讯云多级菜单下拉效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    @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"}
</style>
</head>
<body>

<div class="head-v3" id="index">
	<div class="navigation-up">
		<div class="navigation-inner">
			<div class="navigation-v3">
				<ul>
					<ul>
						<!-- 默认被选中项 -->
						<li :class="i.id == 1 ? 'nav-up-selected-inpage' : ''" v-for="i in nevigatelist" :_t_nav="i.nav">
							<h2>
								<a href="#">{{i.label}}</a>
							</h2>
						</li>
					</ul>
				</ul>
			</div>
		</div>
	</div>
	<div class="navigation-down">
		<div v-for="i in navdetails" :id="i.id" :class="i.id == 'product' ? ['nav-down-menu','menu-1'] : ['nav-down-menu','menu-3','menu-1']" style="display: none;" :_t_nav="i.id">
			<div class="navigation-down-inner">
				<dl v-for="item in i.childrenlist" :style="item.id == '1' ? {'margin-left': i.leftlength}:''">
					<dt v-if="item.label !=''">{{item.label}}</dt>
					<dd v-for="y in item.hreflist">
						<a class="link" href="#">{{y.label}}</a>
					</dd>
				</dl>
			</div>
			
		</div>
	</div>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.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);
		});
	});

	new Vue({
		el: "#index",
		data: {
			/* 导航标题 */
			nevigatelist: [{
				id: '1',
				nav: 'home',
				label: '首页',
			}, {
				id: '2',
				nav: 'product',
				label: '云产品',
			}, {
				id: '3',
				nav: 'wechat',
				label: '微信建站',
			}, {
				id: '4',
				nav: 'solution',
				label: '行业解决方案',
			},.........完整代码请登录后点击上方下载按钮下载查看