<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

    <script src="jquery-2.1.0.js"></script>

    <style type="text/css">

        body{

            font-size:13px;

        }

        ul, li {

            list-style-type:none;

            padding:0px;

            margin:0px;

        }

        .menu {

            width:190px;

            line-height:28px;

            border-top:1px dashed #00ffff;

        }

        .content {

            padding-top:10px;

            clear:left;

        }

        a {

            text-decoration:none;

            color:#666;

            padding:10px;

        }

        .optn {

            width:190px;

            border:1px solid #E5d1A1;

        }

        .optnFocus {

            background-color:#fff;

            font-weight:bold;

        }

        div {

            padding:10px;

        }

            div img {

                float:left;

                padding-right:5px;

            }

        span {

            padding-top:3px;

            font-size:14px;

            font-weight:bold;

            float:left;

        }

        .tip {

            width:190px;

            border:1px solid #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;

            var curH;

            var curW;

            var strY;

            var strX;

            var objL;

            //设置当前位置数值 参数obj为当前对象名称

            function setInitValue(obj) {

                curY = obj.offset().top;

                curH = obj.height();

                curW = obj.width();

                strY = curY + (curH / 2) + "px";

                strX = curW - 5 + "px";

            }

            //设置当前所选项的鼠标滑过事件

            $(".optn").mouseover(function () {

                objL = $(this);

                setInitValue(objL);

                var allY = curY - curH + "px";

                objL.addClass("optnFocus");

                objL.next("ul").show().css({ "top": strY, "left": strX });

            })

            .mouseout(function () {

                $(this).removeClass("optnFocus");

                $(this).next("ul").hide();

                $("#sort").hide();

            })

            $(".tip").mousemove(function () {

                $(this).show();

                objL = $(this).prev("li");

                setInitValue(objL);

                objL.addClass("optnFocus");

                $("#sort").show().css({ "top": strY, "left": strX });

            })

            .mouseout(function () {

                $(this).hide();

                $(this).prev("li").removeClass("optnFocus");

                $("#sort").hide();

            })

        });

    </script>

</head>

<body>

    <ul>

        <li class="menu">

            <div>

                <img alt=""src="15.jpg" />

                <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="13.jpg" />

        </li>

    </ul>

</body>

</html>

Jquery列表中的导航菜单的应用的更多相关文章

  1. JQUERY 插件开发——MENU（导航菜单）

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  2. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  3. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

  4. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  5. jquery 实现两级导航菜单

    主要用于运维系统, 对界面要求不高的场合.  深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1.  HTML 页面及 JS 交互, 注意引入 Jquery ...

  6. jquery倾斜的动画导航菜单

    1. [代码]完整源代码  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  7. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  8. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  9. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

随机推荐

  1. 遍历json的方式

    var obj = eval("(" + data + ")"); for(var key in obj) { alert(obj[key]); }

  2. 图片自动转换效果 jquery

    http://www.16sucai.com/uploadfile/show5/switchable01/switchable/ <div class="maxpSlid" ...

  3. Uubntu14.04 LST安装NodeJS

    1:从官网下载node.js源码http://nodejs.org/download/ 当前最新版为node-v0.10.33 2:安装 $ tar zxvf node-v0.10.33.tar.gz ...

  4. 福建省队集训被虐记——DAY2

    唉--第二天依然被虐--但是比第一天好一点--我必须负责任的指出:志灿大神出的题比柯黑的不知道靠谱到哪里去了--柯黑出的简直不可做 但是被虐的命运是无法改变的--求各位神犇别D我 黄巨大真是强啊,不愧 ...

  5. nodejs 设置网络代理

    在使用nodejs的过程中,加入使用代理上网,那么安装组件会失败,此时配置代理即可,命令如下: [root@oracle ~]#npm config set proxy=http://10.101.1 ...

  6. 【BBST 之伸展树 (Splay Tree)】

    最近“hiho一下”出了平衡树专题,这周的Splay一直出现RE,应该删除操作指针没处理好,还没找出原因. 不过其他操作运行正常,尝试用它写了一道之前用set做的平衡树的题http://codefor ...

  7. 《Two Days DIV + CSS》读书笔记——CSS控制页面方式

    1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...

  8. wireshark使用心得

    关于pcap文件的文件解析网上资料有很多,我在这就不说明了 心得一:wireshark Runtime Error 一般来说,wireshark不适合长时间捕获包,也就是随着时间增长,总会报出上述错误 ...

  9. 《Java程序员面试笔试宝典》之Java与C/C++有什么异同

    Java与C++都是面向对象语言,都使用了面向对象思想(例如封装.继承.多态等),由于面向对象有许多非常好的特性(继承.组合等),使得二者都有很好的可重用性. 需要注意的是,二者并非完全一样,下面主要 ...

  10. 浅析libev的ev_signal过程

    ev_signal是libev提供的对信号处理的一个模块,基本上是对sigaction函数的一个封装,并将本身是异步的信号转化为同步.ev_signal的使用十分简单: #include <ev ...