jQuery橙色的二级折叠下拉菜单收缩展开插件


jQuery橙色的二级折叠下拉菜单收缩展开插件
jQuery橙色的二级折叠下拉菜单收缩展开插件以及二级折叠、下拉菜单、收缩展开等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script charset="utf-8" type="text/javascript" src="jquery.js"></script>
<script charset="utf-8" type="text/javascript" src="theme.js"></script>

3. HTML代码

<div class="nav_title"><a href="index.html" class="a">菜单一</a><a href="index2.html">菜单二</a></div>
<div class="content_left">
    <div class="title"><span>产品分类</span></div>
    <div class="left_nav">  
        <ul>
            <li>
                <div class="t"><i></i><a href="#">精品推荐</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">网带</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">网链</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">链轮</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">食品输送机</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">网带</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">精品推荐</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">网带</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">网链</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">链轮</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">食品输送机</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
            <li>
                <div class="t"><i></i><a href="#">网带</a></div>
                <div class="txt">
                    <p><a href="#">人字形网带</a></p>
                    <p><a href="#">不锈钢网带</a></p>
                </div>
            </li>
        </ul> 
        <div class="more"><span>展开</span></div>
    </div>
</div>
<div class="explain_txt">
    <p>1.此导航个数超过6个会自动隐藏超出部分,并出现“展开”按钮</p>
    <p>2.点击文字可跳转链接,点击小箭头可打开二级菜单</p>
    <p>3.点击超过第6个之后的小箭头展开二级菜单后,点击 “收起” 按钮,其二级菜单全部收起(前6个还是当前状态)</p>
</div>

相关推荐

发表评论

相关文章