[jQuery]導航欄菜單

時間 2019-11-07
標籤 jquery 導航菜單欄目 JQuery 简体版
原文原文鏈接
摘自：《jQuery權威指南》javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>j_1_3.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
    <style type="text/css">
        body{font-size: 12px}
        
        ul, li{
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
        
        .menu{
            width: 190px;
            border: solid 1px #E5D1A1;
            background-color: #FFFDD2;
        }
        
        .optn{
            width: 190px;
            line-height: 28px;
            border-top: dashed 1px #ccc
        }
        
        .content{
            padding-top: 10px;
            clear: left;
        }
        
        a{
            text-decoration: none;
            color: #666;
            padding: 10px;
        }
        
        .optnFocus{
            background-color: #A6FFA6;
            font-weight: bold;
        }
        
        div{padding: 10px}
        
        div img{float:left; padding-right: 6px}
        
        span{
            padding-top: 3px;
            font-size: 14px;
            font-weight: bold;
            float: left;
        }
        
        .tip{
            width: 150px;
            border: solid 2px #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;   //獲取所選項的Top值
            var curH;   //獲取所選項的Height值
            var curW;   //獲取所選項的Width值
            var srtY;   //設置提示箭頭的Top值
            var srtX;   //設置提示箭頭的Left值
            var objL;   //獲取當前對象
            
            /*
            *   設置當前位置數值, 參數obj爲當前對象名稱
            */
            function setInitValue(obj) {
                curY = obj.offset().top;
                curH = obj.height();
                curW = obj.width();
                srtY = curY + (curH / 2) + "px";
                srtX = curW - 5 + "px";
            }
            
            //設置當前所選項的鼠標滑過事件
            $(".optn").mouseover(function(){
                objL = $(this);
                setInitValue(objL);
                var allY = curY - curH + "px";
                objL.addClass("optnFocus");
                objL.next("ul").show().css({"top": allY, "left": curW});
            })
            .mouseout(function(){
                $(this).removeClass("optnFocus");
                $(this).next("ul").hide();
            });
            
            $(".tip").mouseover(function(){
                $(this).show();     //顯示提示框
                objL = $(this).prev("li");  //獲取當前的上級li對象
                setInitValue(objL); //設置當前位置
                objL.addClass("optnFocus"); //增長上級li對象獲取焦點時的樣式
            })
            .mouseout(function(){
                $(this).hide();
                $(this).prev("li").removeClass("optnFocus");
            });
        });
    </script>
  </head>
  
  <body>
        <ul>
            <li class="menu">
                <div>
                    <span>電腦手機數碼類產品</span>
                </div>
                
                <ul class="content">
                    <li class="optn"><a href="#">筆記本</a></li>
                    <ul class="tip">
                        <li><a href="#">聯想</a></li>
                        <li><a href="#">華碩</a></li>
                        <li><a href="#">蘋果</a></li>
                        <li><a href="#">戴爾</a></li>
                        <li><a href="#">三星</a></li>
                    </ul>
                    
                    <li class="optn"><a href="#">手機</a></li>
                    <ul class="tip">
                        <li><a href="#">蘋果</a></li>
                        <li><a href="#">三星</a></li>
                        <li><a href="#">諾基亞</a></li>
                        <li><a href="#">華爲</a></li>
                        <li><a href="#">魅族</a></li>
                    </ul>
                    
                    <li class="optn"><a href="#">相機</a></li>
                    <ul class="tip">
                        <li><a href="#">索尼</a></li>
                        <li><a href="#">三星</a></li>
                        <li><a href="#">尼康</a></li>
                        <li><a href="#">佳能</a></li>
                        <li><a href="#">山寨</a></li>
                    </ul>
                    
                    <li class="optn"><a href="#">硬盤</a></li>
                    <ul class="tip">
                        <li><a href="#">三星</a></li>
                        <li><a href="#">西數</a></li>
                        <li><a href="#">希捷</a></li>
                        <li><a href="#">東芝</a></li>
                        <li><a href="#">山寨</a></li>
                    </ul>
                </ul>
            </li>
        </ul>
  </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。