jQuery加vue仿腾讯云下拉导航

jQuery加vue仿腾讯云下拉导航

jQuery加vue仿腾讯云实现的下拉导航,下拉效果由jquery实现,导航数据由vue实现。

使用方法

在头部引入style.css文件。

1
<link rel="stylesheet" type="text/css" href="css/demo.css" />

在头部引入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: '帮助与支持',
}, ],
温馨提示:此处内容需要评论本文后才能查看。
1

发表评论