Home >Web Front-end >JS Tutorial >jQuery makes menu navigation bar function

jQuery makes menu navigation bar function

php中世界最好的语言Original: 2018-04-19 16:19:021557browse

<!DOCTYPE html>
<html>
 <head>
  <metacharset="UTF-8">
  <title></title>
  <style>
  *{
   padding: 0px;
   margin: 0px;
  }
   #top{width: auto;height: 30px;background: #eee;position: relative;}
   #top li{float: left;
     text-align: center;
     width: 80px;
     height:30px;
     line-height:30px;
     list-style: none;
    }
    /*设置位置*/
   .position{
    position: absolute;
    border: 1px solid #ccc;
    top:30px;
    padding: 3px;
    font-size: 15px;
    display: none;
   }
   .shoucang{width: auto;left: 10px;}
   .sell{width: auto;left: 70px;}
   .customer{width: auto;left: 180px;}
   .bg{background-color: #DDA0DD;cursor: pointer;}
  </style>
  <scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>
  <script>
   $(function(){
    $(".li1").hover(function(){
     $(".shoucang").show();/*显示收藏的菜单内容*/
     $(".customer,.sell").hide();/*隐藏其他的菜单内容*/
    },function(){
     $(".shoucang").hide();/*鼠标离开，收藏的菜单内容隐藏*/
    });
    $(".li2").hover(function(){
     $(".sell").show();
     $(".customer,.shoucang").hide();
    },function(){
     $(".sell").hide();
    });
    $(".li3").hover(function(){
     $(".customer").show();
     $(".shoucang,.sell").hide();
    },function(){
     $(".customer").hide();
    });
    $("#top p").hover(function(){/*鼠标放置在p位置上，显示下拉菜单*/
     $(this).show();
    },function(){/*鼠标离开在p位置上，隐藏下拉菜单*/
     $(this).hide();
    });
    $(".sell p,.shoucang p,.customer p").bind("mouseover",function(){
     $(this).addClass("bg");
    });
    $(".sell p,.shoucang p,.customer p").bind("mouseout",function(){
     $(this).removeClass("bg");
    });
   });
  </script>
 </head>
 <body>
  <pid="top">
   <ul>
    <liclass="li1">收藏夹</li>
    <liclass="li2">卖家中心</li>
    <liclass="li3">联系客服</li>
 
   </ul>
   <pclass="shoucang position">
    <p>收藏的宝贝</p>
    <p>收藏的店铺</p>
   </p>
   <pclass="sell position">
    <p>免费开店</p>
    <p>已出售的报宝贝</p>
    <p>出售中的报宝贝</p>
    <p>卖家服务市场</p>
   </p>
   <pclass="customer position">
    <p>消费者客服</p>
    <p>卖家客服</p>
   </p>
  </p>
 </body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

jQuery makes menu navigation bar function

Related articles