利用jQuery实现A锚点导航定位菜单特效



41 161 54



特效描述:利用jQuery实现 A锚点 导航定位 菜单特效,利用jQuery实现A锚点导航定位菜单特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.min.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/profile.min.js"></script>

3. HTML代码

<div class="profile">
    <div class="profile_right">
        <div class="profile_right_cnt">
            <div class="profile_right_cnt_first"></div>
            <p class="floatnav_a_cur"><a  class="a-anchors">一般信息</a></p>
            <p class="sec"><a class="sec a-anchors">分类</a></p>
            <p class="sec"><a class="sec a-anchors">产品分类</a></p>
            <p class="sec"><a class="sec a-anchors">产品属性与价格</a></p>
            <p class="sec"><a class="sec a-anchors">模板配置</a></p>
            <p><a class="a-anchors">属性</a></p>
            <p><a class="a-anchors">收款</a></p>
            <p><a class="a-anchors">卖家要求</a></p>
            <p><a class="a-anchors">卖货政策</a></p>
            <div class="profile_right_cnt_last"></div>
        </div>
    </div>
    <div class="profile_left">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;一般信息</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;分类</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;产品分类</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;产品属性与价格</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;模板配置</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;属性</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;收款</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;卖家要求</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a class="a-anchors">&nbsp;卖货政策</a></h3>
            </div>
            <div class="panel-body" style="height:300px;">
            </div>
        </div>
    </div>
</div>
<script>
    $('.profile').profile();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 导航菜单 列表切换 文字导航菜单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到