[JQ权威指南]第十四天:列表中导航菜单的运用

最新推荐文章于 2022-10-22 10:19:10 发布

厦门德仔

最新推荐文章于 2022-10-22 10:19:10 发布

阅读量1.1k

点赞数

分类专栏： # JQuery

本文链接：https://blog.csdn.net/david_520042/article/details/48133513

版权

JQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

在页面表单中，分别展示某类产品的全部子类项，当用户将鼠标移动某项子类时，所选子类样式发生变化，并在该子类的右边以浮动的形式展示该类的全部产品；当用户将鼠标移动出某项子类时候，所选子类样式恢复到初始值，同时，影藏已显示全部子类产品。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表中的导航菜单运用</title>
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
<style>
    body{font-size:13px;}
    ul,li{list-style-type:none; padding:0px; margin:0px;}
    .meun{ width:190px; border:solid 1px #E5D1A1; background-color:#FFFDD2}
    .optn{ width:190px; line-height:28px; border-top:dashed 1px #ccc}
    .content{ padding-top:10px; clear:left}
    a{ text-decoration:none; color:#666; padding:10px}
    .optnFocus{ background-color:#fff; font-weight:bold;}
    div{ padding:10px;}
    div img{ float:left; padding-right:6px;}
    span{ padding-top:3px; font-size:14px; font-weight:bold; float:left;}
    .tip{ width:190px; border:solid 2px #ffa200; position:absolute; display:none;}
    .tip li{ line-height:23px;}
    #sort{ position:absolute; display:none;}

</style>
<script type="text/javascript">
      $(function() {
          var curY; //获取所选项的Top值
          var curH; //获取所选项的Height值
          var curW; //获取所选项的Width值
          var srtY; //设置提示箭头的Top值
          var srtX; //设置提示箭头的Left值
          var objL; //获取当前对象
          /*
          *设置当前位置数值
          *参数obj为当前对象名称
          */
          function setInitValue(obj) {
              curY = obj.offset().top
              curH = obj.height();
              curW = obj.width();
              srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
              srtX = curW - 5 + "px"; //设置提示箭头的Left值
          }
          $(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件
              objL = $(this); //获取当前对象
              setInitValue(objL); //设置当前位置
              var allY = curY - curH + "px"; //设置提示框的Top值
              objL.addClass("optnFocus"); //增加获取焦点时的样式
              objL.next("ul").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标
              $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
          })
          .mouseout(function() {//设置当前所选项的鼠标移出事件
              $(this).removeClass("optnFocus"); //删除获取焦点时的样式
              $(this).next("ul").hide(); //隐藏提示框
              $("#sort").hide(); //隐藏提示箭头
          })
          $(".tip").mousemove(function() {
              $(this).show(); //显示提示框
              objL = $(this).prev("li"); //获取当前的上级li对象
              setInitValue(objL); //设置当前位置
              objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
              $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
          })
          .mouseout(function() {
              $(this).hide(); //隐藏提示框
              $(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式
              $("#sort").hide(); //隐藏提示箭头
          })
      })
       </script> 
</head>
<body>
     <ul>
        <li class="menu">
            <div>
                 <img alt="" src="Images/icon.gif" />
                 <span>电脑数码类产品</span>
            </div>
            <ul class="content">
               <li class="optn"><a href="#">笔记本</a></li>
               <ul class="tip">
                   <li><a href="#">笔记本1</a></li>
                   <li><a href="#">笔记本2</a></li>
                   <li><a href="#">笔记本3</a></li>
                   <li><a href="#">笔记本4</a></li>
                   <li><a href="#">笔记本5</a></li>
               </ul>
               <li class="optn"><a href="#">移动硬盘</a></li>
               <ul class="tip">
                   <li><a href="#">移动硬盘1</a></li>
                   <li><a href="#">移动硬盘2</a></li>
                   <li><a href="#">移动硬盘3</a></li>
                   <li><a href="#">移动硬盘4</a></li>
                   <li><a href="#">移动硬盘5</a></li>
               </ul>
               <li class="optn"><a href="#">电脑软件</a></li>
               <ul class="tip">
                   <li><a href="#">电脑软件1</a></li>
                   <li><a href="#">电脑软件2</a></li>
                   <li><a href="#">电脑软件3</a></li>
                   <li><a href="#">电脑软件4</a></li>
                   <li><a href="#">电脑软件5</a></li>
               </ul>
               <li class="optn"><a href="#">数码产品</a></li>
               <ul class="tip">
                   <li><a href="#">数码产品1</a></li>
                   <li><a href="#">数码产品2</a></li>
                   <li><a href="#">数码产品3</a></li>
                   <li><a href="#">数码产品4</a></li>
                   <li><a href="#">数码产品5</a></li>
               </ul>
            </ul>
            <img id="sort" src="Images/sort.gif" alt=""/>
        </li>
     </ul>
</body>
</html>