jquery带滑块的网站下拉导航菜单代码



86 343 115



特效描述:带滑块的导航 网站下拉导航 导航菜单,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

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