前端開發css實戰：使用css制作網頁中的多級菜單

 

前端開發css實戰：使用css制作網頁中的多級菜單

 

　　在日常工作中，大家都會遇到一些顯示隱藏類菜單，比如頁頭導航、二維碼顯示隱藏、文本提示等等......而這些效果都是可以使用純css實現的(而且非常簡單)，使用css的優勢顯而易見，它可以使頁面中的javascript變得更少。

　　實現邏輯：

　　　　　　　　核心：hover偽類控制子元素的顯示隱藏，添加css3動畫;  （沒錯就是這樣簡單）

　　　　　　　　:hover偽類，適用於當用戶指向一個元素時，例如用戶的鼠標指向一個段落p。當用戶鼠標離開元素時，恢復元素原有的樣式顯示

　　實現代碼：

　　　

<style type="text/css">
  *{margin: 0; padding: 0;}
    ul{ list-style: none; }
    a{text-decoration: none;}
    
        .nav{ height: 50px;
            font-size: 14px; 
             background-color:#0081C2;
         }
        .nav ul{ width: 90%; margin: 0 auto;}
        .nav ul li{ 
            display: inline-block; 
            width: 15%; height:50px; 
            text-align: center; line-height: 45px;
            position: relative;
            }

/*menu相對li定位 並默認隱藏*/

 .menu{ position: absolute;
                left: 0; top:50px;
                width: 100%; background-color: #005580; 
                line-height: 33px;
                display: none;　　
            }
        .menu p{ width: 100%; height: 35px;}
        .menu p a:hover{ color: #dfdfdf;}
        .nav ul li a{display: block; 
                    width: 100%;  height: 100%;
                    color: #ffffff; text-align: center;
                }
　　/*當li鼠標hover時顯示*/
        .nav ul li:hover{ background-color: #00007D;}
        .nav ul li:hover .menu{ display: block;}
        
    </style>
    
    <div class="nav">
        <ul>
            <li>
                <a href="#">菜單選項一</a>
                <div class="menu">
                    <p><a href="#">二級菜單1</a></p>
                    <p><a href="#">二級菜單2</a></p>
                    <p><a href="#">二級菜單3</a></p>
                    <p><a href="#">二級菜單4</a></p>
                </div>
            </li>
            <li>
                <a href="#">菜單選項二</a>
                <div class="menu">
                    <p><a href="#">二級菜單1</a></p>
                    <p><a href="#">二級菜單2</a></p>
                    <p><a href="#">二級菜單3</a></p>
                    <p><a href="#">二級菜單4</a></p>
                </div>
            </li>
            <li><a href="#">菜單選項三</a></li>
            <li><a href="#">菜單選項四</a></li>
            <li><a href="#">菜單選項五</a></li>
            <li><a href="#">菜單選項六</a></li>
        </ul>
    </div>

 

效果：

來看看實現的思路：

　　

.nav ul li:hover{ background-color: #00007D;}
.nav ul li:hover .menu{ display: block;}

 

　

 

這就是核心；也就是這兩行css搞定了一個豎向的二級菜單，當li元素hover鼠標移上的時候將menu顯示，如果我們需要給它添加一個動畫效果，可以使用css3來搞定

　　

.menu{ position: absolute;
                left: 0;
                width: 100%; background-color: #005580; 
                line-height: 33px;
                z-index: -1;
                
                transition: all 500ms;　　　　//添加一個500ms的css3動畫效果  
                top: -200px;
                opacity: 0;
            }

.nav ul li:hover .menu{ top: 50px;opacity: 1;}　　　　//hover時改變他它的top與透明度  

 

下面博主也給出javascript的寫法，這種寫法用在需要從服務端獲取較多數據的情況下，通過ajax異步獲取菜單數據，所以必須用到javascript事件控制二級菜單；

    .nav ul li.active{ background-color: #00007D;}
      .nav ul li.active .menu{top: 50px;opacity: 1;}

$(".nav>ul>li").hover(function(){　　　　//hover事件
　　
　　　....其他代碼

    $(this).siblings("li").removeClass("active");
    $(this).addClass("active");　　　　//激活狀態 顯示menu
},function(){
    $(".nav>ul>li").removeClass("active");
});

 

最后總結：

　　　　css的偽類hover可以做出很多更有趣的效果。

　　　　當可以使用css解決一個效果的時候，應該盡量使用css解決，已減少javascript性能開銷

　

------------------------------------合理規划你的學習路線，是成功的不二法門----------------------------------------