jQuery加vue仿腾讯云下拉导航
菜单导航 2年前
0 8.24K 10
jQuery加vue仿腾讯云实现的下拉导航,下拉效果由jquery实现,导航数据由vue实现。
使用方法
在头部引入style.css文件。
1 |
在头部引入JS文件。
1 2 | <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/vue.min.js"></script> |
HTML结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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> |
VUE导航代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /* 导航标题 */ nevigatelist: [{ id: '1', nav: 'home', label: '首页', }, { id: '2', nav: 'product', label: '云产品', }, { id: '3', nav: 'wechat', label: '微信建站', }, { id: '4', nav: 'solution', label: '行业解决方案', }, { id: '5', nav: 'cooperate', label: '合作伙伴', }, { id: '6', nav: 'support', label: '帮助与支持', }, ], |
演示地址:
温馨提示:此处内容需要评论本文后才能查看。