jquery帶滑塊的網站下拉導航菜單代碼



92 364 122



特效描述:帶滑塊的導航 網站下拉導航 導航菜單,jquery帶滑塊的導航菜單代碼

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/Other.js"></script>

3. HTML代碼

<!--頭部菜單-->
<div class="top">
    <div class="w t_cen">
        <div class="t_c_logo"><a href="index.html"><img src="images/logo.png" /></a></div>
        <div class="t_c_lr t_c_left"></div>
        <div class="t_c_cen">
            <div class="t_c_top">
            </div>
            <div class="t_c_bottom">
                <ul>
                    <li class="thisli">
                        <a href="#"><em>官方首頁</em><i>Home</i></a>
                    </li>
                    <li>
                        <a href="#"><em>集團概況</em><i>About Us</i></a>
                        <div class="Nodes">
                            <img src="images/menu_top.png" />
                            <ul>
                                <li><a href="#">公司簡介</a></li>
                                <li><a href="#">總部扶持</a></li>
                                <li><a href="#">服務團隊</a></li>
                            </ul>
                            <img src="images/menu_bottom.png" />
                        </div>
                    </li>
                    <li>
                        <a href="#"><em>品牌中心</em><i>Brand</i></a>
                        <div class="Nodes">
                            <img src="images/menu_top.png" />
                            <ul>
                                <li><a href="#">品牌文化</a></li>
                                <li><a href="#">市場前景</a></li>
                                <li><a href="#">品牌形象</a></li>
                                <li><a href="#">店面形象</a></li>
                            </ul>
                            <img src="images/menu_bottom.png" />
                        </div>
                    </li>
                    <li>
                        <a href="#"><em>產品中心</em><i>Product </i></a>
                        <div class="Nodes">
                            <img src="images/menu_top.png" />
                            <ul>
                                <li><a href="#">產品案例</a></li>
                                <li><a href="#">核心產品</a></li>
                                <li><a href="#">主流產品</a></li>
                            </ul>
                            <img src="images/menu_bottom.png" />
                        </div>
                    </li>
                    <li>
                        <a href="#"><em>項目優勢</em><i>Advantages</i></a>
                        <div class="Nodes">
                            <img src="images/menu_top.png" />
                            <ul>
                                <li><a href="#">產品優勢</a></li>
                                <li><a href="#">投資優勢</a></li>
                                <li><a href="#">店面優勢</a></li>
                                <li><a href="#">總部優勢</a></li>
                            </ul>
                            <img src="images/menu_bottom.png" />
                        </div>
                    </li>
                    <li>
                        <a href="#"><em>加盟我們</em><i>Join Us</i></a>
                        <div class="Nodes">
                            <img src="images/menu_top.png" />
                            <ul>
                                <li><a href="#">加盟模式</a></li>
                                <li><a href="#">加盟流程</a></li>
                                <li><a href="#">成功案例</a></li>
                            </ul>
                            <img src="images/menu_bottom.png" />
                        </div>
                    </li>
                    <li>
                        <a href="#"><em>新聞中心</em><i>News</i></a>
                        <div class="Nodes">
                            <img src="images/menu_top.png">
                            <ul>
                                <li><a href="#">品牌新聞</a></li>
                                <li><a href="#">行業新聞</a></li>
                            </ul>
                            <img src="images/menu_bottom.png" />
                        </div>
                    </li>
                    <li>
                        <a href="#"><em>聯系我們</em><i>Contact</i></a>
                    </li>
                </ul>
                <div class="thisMenu" id="thisMenu"></div>
            </div>
        </div>
        <div class="t_c_lr t_c_right"></div>
    </div>
</div>
<!--/頭部菜單-->
<!--引用JQuery-->
<!--其他樣式-->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽:
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子