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 () ...

随机推荐

SQL行列转换6种方法
在进行报表开发时,很多时候会遇到行列转换操作,很对开发人员针对于SQL级别行列转换操作一直不甚理解,今天正好抽空对其进行了一些简单的总结.这里主要列举3种可以实现SQL行列转换的方法,包括通用SQL解 ...
zookerper安装部署
********************单节点安装zk*************************上传zk安装包到服务器/mnt目录下: [root@chavin ~]$ ll /mnt/zoo ...
monit安装配置
环境centos5(32bit),monit-5.17.1,下载地址 https://bitbucket.org/tildeslash/monit/downloads/ 1.tar zxvf moni ...
browse-agent type and curl post
https://www.jb51.net/web/499127.html http://www.atool.org/useragent.php query for type 用Curl测试POST ...
[skill][https][ssl/tls] HTTPS相关知识汇总
结论前置: A 身份验证证书, 服务器证书 B 密钥协商 RSA DHE / ECDHE PSK C 加密通信加密通信采用对称加密,使用B阶段协商出来的密钥. B 阶段如果使用 RSA 协 ...
sql server 实现多表连接查询
项目中要实现多表查询,用外连接实现. a表 a(aid,aname) 其中aid为pk b表 b(aid,bname,aid) 其中 bid为pk,aid为fk c表 c(cid,cname,aid) ...
2018/04/14 理解oAuth2.0
最近都近没有更新博客了,卡在 oAuth 上了. 之前公司做统一身份的认证,不了解 oAuth 的我在这卡了两天. 于是决定仔细研究原理,理论指导实践. -- 什么是 oAuth ? 简单来说 oAu ...
洛谷P2329 栅栏 [SCOI2005] 搜索
正解:搜索解题报告: 先放下传送门! 首先说下爆搜趴,就直接枚每个需求是否被满足以及如果满足切哪个板子,随便加个最优性剪枝,似乎是有80pts 然后思考优化首先显然尽量满足需求比较小的,显然如果能 ...
这个zsh超级棒
https://github.com/robbyrussell/oh-my-zsh wget用法: http://man.linuxde.net/wget https://pan.baidu.com/ ...
collection my favoriate websites
802.1x认证客户端linux版安装 http://blog.csdn.net/StarChunli/article/details/50918121 在U盘上安装kali linux http:/ ...

jQuery-二级导航

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

随机推荐

热门专题