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

浏览数：52 / 时间：2015年06月09日

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>