jQuery-二级导航

 <!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-二级导航的更多相关文章

jquery二级导航
效果图直接放代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
分享21个基于jquery菜单导航的效果
jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...
一款jquery编写图文下拉二级导航菜单特效
一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...
jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery垂直二级导航菜单代码
http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航. HTML <div id="my_menu" class=&qu ...
用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素. 3通过使用show()方法来显示HTML元素. 4通过 ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
二级导航内容均分--jquery
这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下. 背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制. 原理: 1.把各个二级 ...
jQuery 顶部导航尾随滚动，固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部演示 XML/HTML Code <section> <article class="left"> < ...
jquery-menu-aim插件实现二级导航
jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码: $(function () ...

随机推荐

C和C指针小记(十一)-递归和迭代优化
1.递归 C通过运行时堆栈支持递归函数的实现. 递归函数就是直接或间接调用自身的函数. 一个小例子: /** 使用递归将整型转换为ascii字符 @param value 整型数 */ void bi ...
iOS循环引用常见场景和解决办法
好多场景会导致循环引用,例如使用Block.线程.委托.通知.观察者都可能会导致循环引用. 1.委托遵守一个规则,委托方持有代理方的强引用,代理方持有委托方的弱引用. 实际场景中,委托方会是一个控制 ...
PHP之数组函数
php数组中的预定义变量预定义常量 CASE_LOWER (integer) CASE_LOWER 用在array_change_key_case()中将数组的键名转换为小写字母.这也是array_ ...
bzoj3733 [Pa2013]Iloczyn 搜索
正解:搜索解题报告: 先放下传送门QwQ umm其实并不难,,,最近在复建基础姿势点所以都写的是些小水题QAQ 首先考虑如果能构造出来一定是因数凑起来鸭,所以先把因数都拆出来,然后就爆搜几个常见的 ...
Log4j与Logback
一.Log4j简介: 1.Log4j(log for java) 01.是apache的一个开源项目 02.是使用java语言编写的一个日志框架 03.用于记录程序中的日志信息 04.可以将日志信息输 ...
springmvc实现文件上传
springmvc实现文件上传多数文件上传都是通过表单形式提交给后台服务器的,因此,要实现文件上传功能,就需要提供一个文件上传的表单,而该表单就要满足以下3个条件 (1)form表彰的method属 ...
10.0-uC/OS-III任务管理
1.实时应用中一般将工作拆分为多个任务,每个任务都需要是可靠的.任务(也叫做线程)是简单的程序.单CPU中,在任何时刻只能是一个任务被执行. 2.uC/OS-III支持多任务且对任务数量没有限制, 任 ...
【托业】【新托业TOEIC新题型真题】学习笔记8-题库五->P7
———————————————————单词———————————————————— minister 部长 construction contractor 施工方 commence 开始:着手 bac ...
python3 open()函数调用方法简单示例
python3 open()函数调用简介.Python open() 方法用于打开一个文件,并返回文件对象,在对文件进行处理过程都需要使用到这个函数,如果该文件无法被打开,会抛出 OSError. 注 ...
python 字符串、列表和元祖之间的切换
>>> s=['http','://','www','baidu','.com'] >>> url=''.join(s) >>> url 'htt ...

jQuery-二级导航

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

随机推荐

热门专题