jQuery-二级导航

时间：2023-01-21 20:42:58
 <!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=&quot ...

  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. Deepin -Android Studio-Genymotion 之旅

    Deepin -Android Studio-Genymotion 之旅 暑假无聊中在deepin系统下配置好了android的开发环境,并使用了比较好的一款模拟器–Genymotion;下面是我配置 ...

  2. ubuntu15&period;04 安装 pylab失败&comma;先记下来&comma;漫漫看

    pydo@planpls:/var/python/web2py$ pip install pylab Downloading/unpacking pylab Downloading pylab-0.1 ...

  3. &lbrack;原创&rsqb; zabbix学习之旅四：mail客户端安装

    相信大家使用zabbix的最主要目的就是当被监控机器发生故障时,能通过zabbix获得第一时间的报警提醒.zabbix常用的报警媒介有email,短信,jabber和脚本,这其中脚本类型最为灵活,尤其 ...

  4. web组件新学--layer

    在之前项目后台管理界面开发中,不知道有layer这样好用的组件,我的内心是这样的的...呀!这个框架有弹框,哈哈哈,好开心,不用自己写遮罩层,不用自己写弹框,好开森.. 当知道有layer之后.... ...

  5. Srtuts2实现登录界面（不连接数据库）

    1.设计思路 (1)利用Struts2框架设计出一个登录页面的跳转,当用户名和密码都正确时, 跳到登录成功页面:否则,跳到登录失败页面,并在10秒钟内跳到登录界面: (2)在Action中判断用户名和 ...

  6. CoreDNS Plugins ---&gt&semi; hosts

    需求 kubernetes集群外部有少量服务,kubernetes集群内部pod需要通过服务所在的主机的hostname访问服务. 解决方案 通过coredns的hosts插件配置kubernetes ...

  7. Python3基础 random 配合while输出10个随机整数

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. GitHub &plus; circleCI 自动构建&sol;自动部署 应用

    GitHub + circleCI 自动构建/自动部署, 这里略过了单元测试,以部署 laravel 应用为例子 比起 gitlab + ansible + genkins 操作起来节省了很多硬件资源 ...

  9. Python redis交互

    1.首先安装模块 pip3 install redis 2.代码模板如下: from redis import StrictRedis if __name__ == '__main__': # 设置连 ...

  10. itop4412学习-上层应用多任务开发

    1. 首先搭建虚拟机VMWARE12.0+UBUNTU16.04,不过报错了,说是要关闭计算机(非重启)-- 进入BIOS -- 设置BIOS的虚拟化(不打开,默认是工作在32位模式的,virtual ...

相关文章