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

时间：2014-03-31 10:07:56 收藏：0 阅读：586
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!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列表中的导航菜单的应用,布布扣,bubuko.com
原文：http://www.cnblogs.com/qianlovebeijixiong/p/3634639.html