jQuery实现仿美橙互联两级导航菜单的方法

2020-05-22 16:55:46易采站长站整理

</head>
<body style=”text-align:center”>
<DIV id=nav_wrap>
<DIV id=nav>
<DIV class=l></DIV>
<UL class=c>
  <LI><SPAN class=v><A href=”#” target=”_blank”>首页</A></SPAN>
  <DIV class=kind_menu style=”LEFT: 20px”>欢迎访问美橙互联! </DIV></LI>
  <LI><SPAN class=v><A href=”#”>特惠套餐</A></SPAN>
  <DIV class=kind_menu style=”LEFT: 40px”><A
  href=”#”>电信套餐</A> <SPAN>|</SPAN> <A
  href=”#”>双线套餐</A> </DIV></LI>
  <LI><SPAN class=v><A href=”#”>域名频道</A></SPAN>
  <DIV class=kind_menu><A href=”#”>英文域名</A>
  <SPAN>|</SPAN> <A href=”#”>中文域名</A>
  <SPAN>|</SPAN> <A href=”#”>通用网址</A> <SPAN>|</SPAN>
  <A href=”#”>价格列表</A>
  <SPAN>|</SPAN> <A href=”#” target=_blank>域名交易</A>
  <SPAN>|</SPAN> <A href=”#”>相关帮助</A>
  <SPAN>|</SPAN> <A href=”#”>智能加速</A> </DIV></LI>
  </UL>
<DIV class=r></DIV>
</DIV><!–nav–>
<DIV id=tmenu></DIV>
</DIV><!–nav_wrap–>
<SCRIPT type=text/javascript>
    var site_url = window.location.href.toLowerCase(); 
    switch (true) {    
        default :
            $(“#nav li”).attr(“class”,””);
            $(“#nav li”).eq(0).attr(“class”,”nav_lishw”);
            $(“.nav_lishw .v a”).attr(“class”,”sele”);
            $(“.nav_lishw .kind_menu”).show();
    }
    $(“#nav li”).hover(
        function(){
            clearTimeout(setTimeout(“0”)-1);
            $(“#nav .kind_menu”).hide();
            $(“#nav li .v .sele”).attr(“class”,”shutAhover”);