Jquery列表中的導航菜單的應用

時間 2019-12-08
原文原文鏈接
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。