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

来源：互联网发布：淘宝的标志图片编辑：程序博客网时间：2024/06/02 01:48
在页面表单中，分别展示某类产品的全部子类项，当用户将鼠标移动某项子类时，所选子类样式发生变化，并在该子类的右边以浮动的形式展示该类的全部产品；当用户将鼠标移动出某项子类时候，所选子类样式恢复到初始值，同时，影藏已显示全部子类产品。
<!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>
0 0