<!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. 【紫书】uva489 Hangman Judge 做了很久Orz

    题目链接:https://vjudge.net/problem/UVA-489 题意:给出两行字符串,第一行是标准答案,第二行是玩家猜的串.玩家每次猜一个,猜对一个,标准答案中所有该字符都算被猜到.猜 ...

  2. nslookup dig iptables,sudoer,jenkins

    [NSLOOKUPm]http://roclinux.cn/?p=2441 nslookup media.ucampus.unipus.cn [DIG]http://roclinux.cn/?p=24 ...

  3. Page7：能控性、能观性及其判据和对偶原理（2）[Linear System Theory]

    内容包含连续时间时变系统的能控性和能观测性判据,离散时间线性系统的能控性和能观测性判据,以及对偶原理

  4. eclipse debug模式

    eclipse debug模式 1.怎样在Eclipse中设置断点 方法/步骤 1 首先打开工程项目 2 第一种是,把鼠标移动想要设置断点的行,在行号前面空白地方双击,就会出现断点 3 第二种是,在菜 ...

  5. kubernetes的CI/CD

    部署流程:把编码上传到gitlab上,使用webhook链接jenkins自动去编译docker镜像,然后上传到harbor本地docker镜像库中,再自动下载docker镜像,使用k8s控制dock ...

  6. 使用Git，如何忽略不需要上传的文件（配置文件）

    步骤1:在目录下,选择GIt Bash Here 2.输入命令 : git update-index --assume-unchanged 文件名 3.再输入指令 git  status 查看修改文件 ...

  7. 【python基础】文件操作

    文件操作目录 一 .文件操作 二 .打开文件的模式 三 .操作文件的方法 四 .文件内光标移动 五. 文件的修改 一.文件操作介绍 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用pyt ...

  8. python基础教程 变量/输入输出/if判断

    python的运用越来越多.大数据经常被人谈及,数据从何而来?通过各个平台.app.网站数据的收集,分析,过滤,生成报告,这些都可以用python来处理,并且有很多成熟的库可以直接用了.那还不赶紧深入 ...

  9. 在Ubuntu上实现局域网共享文件夹

    在Ubuntu上实现局域网共享文件夹如果你的系统是Ubuntu 14.04.14.10或12.04,有两个方法可以使你通过局域网在搭载Windows或其他Linux的电脑上共享本地文件.对局域网中的每 ...

  10. NYOJ 92

    1.深搜(会爆栈,通过开全局栈模拟递归) 爆栈代码 # include<iostream> # include<string> # include<string.h> ...