javascript隱藏菜單-前端問答-PHP中文網

首頁

web前端

前端問答

javascript隱藏菜單

王林

May 16, 2023 am 09:50 AM

JavaScript隱藏選單

在這個數位化時代，網站已經成為人們獲取資訊、交流溝通的重要途徑之一。為了提高使用者的使用體驗，網站設計也越來越注重互動性和實用性。為此，選單列的設計也成為網站設計的一個重要組成部分。但是，有時候選單列過於繁瑣，會佔據大量的頁面空間，造成使用者不便和壓迫感。因此，隱藏式選單的出現也成為了設計師們解決這個問題的有效方法之一。

隱藏選單可以在使用者不需要時隱藏，需要時再展開。透過這種方式，隱藏選單不但可以節省頁面空間，而且可以更好地進行資訊分類。因此，出現隱藏式選單的網站也越來越多。隱藏選單的實作方式有很多，本文將介紹一種基於JavaScript的隱藏選單實作方法。

一、HTML結構

首先，我們需要在頁面中定義一個選單欄，如下所示：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

登入後複製

這是一個簡單的選單欄，包含四個選項：Home、Blog、Work和Contact。我們將使用JavaScript來隱藏這個選單列。

二、CSS樣式

在隱藏選單之前，我們需要先定義CSS樣式。我們可以隱藏選單項目的display屬性，如下所示：

nav ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
}

nav ul li {
    margin:0 10px;
}

nav ul li a {
    color:#333;
    text-decoration:none;
}

.hidden-menu {
    display:none;
}

登入後複製

這些CSS樣式用來設定選單項目的樣式和隱藏選單的樣式。其中，隱藏選單的樣式為display:none，這是隱藏選單的關鍵。

三、JavaScript實作

現在，我們可以開始透過JavaScript來實作隱藏選單了。我們需要在選單列中新增一個按鈕，當使用者點擊這個按鈕時，選單列就會消失。點擊按鈕之後，我們會透過JavaScript來切換功能表列的顯示狀態。實作這個功能需要用到JavaScript的addEventListener方法監聽按鈕的點擊事件。

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <button id="menu-button">Menu</button>
</nav>

登入後複製

在選單列的程式碼中，我們加入了一個button元素，並設定了它的id屬性為「menu-button」。現在，我們可以開始寫JavaScript程式碼了。我們需要透過取得這個按鈕元素，並在按鈕被點擊時切換選單列的顯示狀態。我們可以透過以下程式碼來完成這個步驟：

const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");

button.addEventListener("click", () => {
    menu.classList.toggle("hidden-menu");
});

登入後複製

這段JavaScript程式碼用於取得按鈕元素和功能表列元素，並在按鈕被點擊時切換功能表列的狀態。我們使用了classList.toggle方法來切換功能表列的class屬性，從而實現功能表列的隱藏與顯示。

四、調整CSS樣式

在程式碼完成之後，我們需要對CSS樣式進行調整，以便隱藏選單的效果更符合實際需求。在預設情況下，功能表列的初始狀態應該是隱藏的，只有在使用者點擊按鈕後才會顯示。因此，我們需要對功能表列的預設狀態進行調整。我們只需要將選單列的display屬性設為none，就可以將其在預設情況下設定為隱藏狀態，如下所示：

nav ul {
    display:none;
    flex-direction:row;
    justify-content:flex-end;
}

.hidden-menu {
    display:flex;
}

登入後複製

這樣，當使用者載入網頁時，選單列就會預設為隱藏狀態，只有在使用者點擊按鈕之後才會顯現。

五、實作效果

現在，我們已經完成了JavaScript隱藏選單的實作。接下來，我們一起來看看實作效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript隐藏菜单</title>
    <style>
        nav ul {
            display:none;
            flex-direction:row;
            justify-content:flex-end;
            list-style:none;
            margin:0;
            padding:0;
        }

        nav ul li {
            margin:0 10px;
        }

        nav ul li a {
            color:#333;
            text-decoration:none;
        }

        .hidden-menu {
            display:flex;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <button id="menu-button">Menu</button>
    </nav>
    
    <script>
        const button = document.getElementById("menu-button");
        const menu = document.querySelector("nav ul");
        
        button.addEventListener("click", () => {
            menu.classList.toggle("hidden-menu");
        });
    </script>
</body>
</html>

登入後複製

在這個範例中，當使用者載入網頁時，選單列會預設為隱藏狀態。只有在使用者點擊按鈕後，選單列才會出現，如下圖所示：

javascript隱藏菜單

#如果再次點擊按鈕，選單列就會恢復到隱藏狀態。

六、延伸應用

透過這個方法，我們可以實現簡單的隱藏選單效果。但是，如果選單列中的選項過多，隱藏選單就無法完全滿足我們的需求，這時候我們可以使用響應式設計來解決這個問題。透過響應式設計，我們可以在不同的裝置上展現不同的選單欄，如在手機上，我們可以使用下拉式選單展示所有選項。這種方法可以更好地適應不同設備的需求，提高使用者體驗。

以上是javascript隱藏菜單的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn