JQ二级菜单练习之一~~~ - ninali

<div class="nav">
    <ul>
        <li><a href="#">首页</a>
            <div class="licon">
               <div class="boxfirst">
                   <b></b>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <div class="clear"></div>
            </div>
            </div>
        </li>
        <li><a href="#">首页</a>
            <div class="licon">
               <div class="boxfirst">
                   <b></b>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <div class="clear"></div>
            </div>
            </div>
        </li>
        <li><a href="#">首页</a>
            <div class="licon">
               <div class="boxfirst">
                   <b></b>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <div class="clear"></div>
            </div>
            </div>
        </li>
        <li><a href="#">首页</a>
            <div class="licon">
               <div class="boxfirst">
                   <b></b>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <div class="clear"></div>
            </div>
            </div>
        </li>
        <li><a href="#">首页</a>
            <div class="licon">
               <div class="boxfirst">
                   <b></b>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <div class="clear"></div>
            </div>
            </div>
        </li>
        <li><a href="#">首页</a>
            <div class="licon">
               <div class="boxfirst">
                   <b></b>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <p><a href="#">企业展示</a></p>
                    <div class="clear"></div>
            </div>
            </div>
        </li>
        <div class="clear"></div>
    </ul>
</div>

<div class="navcon">
        <ul>
            <li><img src="images/img.jpg"><br /><a href="#">企业展示</a><div class="imgcon"><img src="images/bgimg.gif" /></div></li>
            <li><img src="images/img.jpg"><br /><a href="#">企业展示</a><div class="imgcon"><img src="images/bgimg.gif" /></div></li>
            <li><img src="images/img.jpg"><br /><a href="#">企业展示</a><div class="imgcon"><img src="images/bgimg.gif" /></div></li>
            <li><img src="images/img.jpg"><br /><a href="#">企业展示</a><div class="imgcon"><img src="images/bgimg.gif" /></div></li>
            <li><img src="images/img.jpg"><br /><a href="#">企业展示</a><div class="imgcon"><img src="images/bgimg.gif" /></div></li>
            <li><img src="images/img.jpg"><br /><a href="#">企业展示</a><div class="imgcon"><img src="images/bgimg.gif" /></div></li>
            <li><img src="images/img.jpg"><br /><a href="#">企业展示</a><div class="imgcon"><img src="images/bgimg.gif" /></div></li>
            <li><img src="images/img.jpg"><br /><a href="#">企业展示</a><div class="imgcon"><img src="images/bgimg.gif" /></div></li>
            <div class="clear"></div>
        </ul>
</div>

*布局*/
.nav{height:34px; background:url(../images/navbj.jpg) no-repeat;margin:50px;}
.nav li{float:left;width:165px;text-align:center;position:relative;}
.nav li a{font-size:16px;line-height:34px;font-weight:600;color:#fff;}

.licon{position:absolute;left:0px;top:34px;display:none;}
.boxfirst{ background-color:#458fce;width:200px;position:relative;margin-top:12px;padding:6px 0px;}
.boxfirst p{float:left;width:60px;text-align:center;} 
.boxfirst p a{color:#fff;font-size:12px;font-weight:normal;line-height:24px;}
.boxfirst b{border-color: #fff #fff #458fce #fff;/*四角*/ border-style: solid;position:absolute;left:76px;top:-12px;
border-width: 6px; font-size: 0; height: 0; line-height: 0; width: 0;}

.navcon{padding:150px 50px;}
.navcon li{position:relative;float:left;width:100px;border:1px solid #ddd;margin-right:-1px;text-align:center;line-height:30px;font-size:14px;
padding:10px 10px 0px;cursor:pointer;}
.imgcon{position:absolute;left:0px;top:75px;display:none;}

<script src="http://img1.c2cedu.com/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        document.write($("tr:gt(0)").text()); //得到大于第１行的其它行内容(２行和３行)
        document.write($("tr:eq(0)").text()); //第一个
        document.write($("tr").eq(-1).text()); //最后一个,注意这是eq()方法，不是过滤器:eq()，eq(index)方法里的index如果是-1表示最后一个元素，如果是-2表示倒数第二个元素

        //通过eq实现选择卡
        var params = location.href.split("?")[1] || "?flag=0"; //得到ＵＲＬ地址中？后面的部分,||这个很关键，当前面为null时，使用||后面的值
        var flag = params.split("=")[1];
        $("tr:eq(" + flag + ")").attr("style", "background:#ddd")//将指定tr加ＣＳＳ样式,第一个元素的索引为0
    </script>//这段讲解是高人给咋弄的  哈哈 O(∩_∩)O哈哈~


<script type="text/javascript">//导航效果
window.onload=function(){
    
    $(".nav li").bind('mouseenter',function(){
        var i=$(".nav li").index(this);
        $(".nav li").eq(i).find(".licon").fadeIn();
    });
    
    $(".nav li").bind('mouseleave',function(){
        $(".licon").fadeOut(100);
    });
    
    $(".navcon li").bind('mouseenter',function(){
        var i=$(".navcon li").index(this);
        $(".navcon li").eq(i).find(".imgcon").slideDown(100);
    });
    
    $(".navcon li").bind('mouseleave',function(){
        $(".imgcon").fadeOut();
    });
    
};
</script>

posted on 2013-10-25 10:17 ninali 阅读(275) 评论(0) 收藏举报

刷新页面返回顶部