<!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>

     <title>列表中的导航菜单应用</title>

     <script type="text/javascript"

             src="Jscript/jquery-1.8.2.min.js">

     </script>

     <style type="text/css">

            body{font-size:13px}

            ul,li{list-style-type:none;padding:0px;margin:0px}

            .menu{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;padding:10px;

                 background-color:#fff;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>

jQuery-二级导航的更多相关文章

  1. jquery二级导航

    效果图 直接放代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  3. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  4. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  6. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

  7. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  8. 二级导航内容均分--jquery

    这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下. 背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制. 原理: 1.把各个二级 ...

  9. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  10. jquery-menu-aim插件实现二级导航

    jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码: $(function () ...

随机推荐

  1. Hive日志（Hive Logging）--hive GettingStarted翻译

    Hive uses log4j for logging. By default logs are not emitted to the console by the CLI. The default ...

  2. Python使用xml.dom解析xml

    在菜鸟教程上找了个关于电影信息的xml类型的文档,用python内置的xml.dom来解析提取一下信息. 先复习一下xml概念: XML 指可扩展标记语言(EXtensible Markup Lang ...

  3. screen基本用法

    当某些命令执行时间过长或者某些程序关闭shell后自动断开时,就能使用screen 1.安装yum -y install screen 2.输入screen命令进入screen控制台 3.输入scre ...

  4. [others]tinycore/microcore

    https://zh.wikipedia.org/wiki/Tiny_Core_Linux https://github.com/zeit/micro

  5. LeetCode 804 Unique Morse Code Words 解题报告

    题目要求 International Morse Code defines a standard encoding where each letter is mapped to a series of ...

  6. Gson使用技巧

    1. CharMatcher String serviceUrl = CharMatcher.is('/').trimTrailingFrom(ConfigHelper.metaServiceUrl( ...

  7. Eclipse实用小插件

    MyBatipse插件 描述 用于mybatis的Dao层或者mapper层的方法直接跳到对应的xml文件对应的方法 安装 进入IDE(eclipse)的Help——>Install New S ...

  8. 虚拟机VirtualBox与CentOS 7安装

    一.VirtualBox 我们电脑的操作系统一般都是Windows,如果我们要学习Linux,那么可以在我们的电脑上装个虚拟机,然后在这虚拟机上安装Linux.虚拟机可以用VirtualBox 或者 ...

  9. 对oracle中SQL优化的理解

    Oracle数据库里SQL优化的终极目标就是要缩短目标SQL语句的执行时间.要达到上述目的,我们通常只有如下三种方法可以选择:1.降低目标SQL语句的资源消耗.2.并行执行目标SQL语句.3.平衡系统 ...

  10. 异常 java.net.ConnectException: Connection refused: no further information

    java.net.ConnectException: Connection refused: no further information at sun.nio.ch.SocketChannelImp ...