Jquery列表中的导航菜单的应用

时间：2024-01-20 19:28:57
<!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>

相关文章