javascript hidden menu

JavaScripthiddenmenu

In this digital era, websites have become one of the important ways for people to obtain information and communicate. In order to improve user experience, website design is increasingly focusing on interactivity and practicality. For this reason, the design of the menu bar has also become an important part of the website design. However, sometimes the menu bar is too cumbersome and takes up a lot of page space, causing inconvenience and oppression to users. Therefore, the emergence of hidden menus has become one of the effective ways for designers to solve this problem.

The hidden menu can be hidden when the user does not need it, and then expanded when needed. In this way, hiding menus not only saves page space, but also allows for better classification of information. Therefore, more and more websites have hidden menus. There are many ways to implement hidden menus. This article will introduce a method to implement hidden menus based on JavaScript.

1. HTML structure

First, we need to define a menu bar in the page, as shown below:

<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>

This is a simple menu bar, including four Options: Home, Blog, Work and Contact. We will use JavaScript to hide this menu bar.

2. CSS style

Before hiding the menu, we need to define the CSS style first. We can hide the display attribute of menu items as follows:

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;
}

These CSS styles are used to style the menu items and hide the menu. Among them, the style of the hidden menu is display:none, which is the key to hiding the menu.

3. JavaScript implementation

Now, we can start to implement the hidden menu through JavaScript. We need to add a button to the menu bar. When the user clicks this button, the menu bar will disappear. After clicking the button, we will switch the display state of the menu bar through JavaScript. To implement this function, you need to use JavaScript's addEventListener method to listen for button click events.

<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>

In the menu bar code, we added a button element and set its id attribute to "menu-button". Now, we can start writing JavaScript code. We need to get this button element and switch the display state of the menu bar when the button is clicked. We can complete this step through the following code:

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

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

This JavaScript code is used to obtain the button element and menu bar element, and switch the state of the menu bar when the button is clicked. We use the classList.toggle method to switch the class attribute of the menu bar to hide and display the menu bar.

4. Adjust the CSS style

After the code is completed, we need to adjust the CSS style so that the effect of the hidden menu is more in line with actual needs. By default, the menu bar's initial state should be hidden and will only appear after the user clicks the button. Therefore, we need to adjust the default state of the menu bar. We only need to set the display property of the menu bar to none to set it to be hidden by default, as shown below:

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

.hidden-menu {
    display:flex;
}

In this way, when the user loads the web page, the menu bar will default to It is hidden and will only appear after the user clicks the button.

5. Implementation Effect

Now, we have completed the implementation of the JavaScript hidden menu. Next, let's take a look at the implementation effect:

<!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>

In this example, when the user loads the web page, the menu bar will be hidden by default. The menu bar will only appear after the user clicks the button, as shown in the following figure:

If the button is clicked again, the menu bar will return to its hidden state.

6. Extended Application

Through this method, we can achieve a simple hidden menu effect. However, if there are too many options in the menu bar, the hidden menu cannot fully meet our needs. At this time, we can use responsive design to solve this problem. Through responsive design, we can display different menu bars on different devices. For example, on mobile phones, we can use drop-down menus to display all options. This method can better adapt to the needs of different devices and improve user experience.

The above is the detailed content of javascript hidden menu. For more information, please follow other related articles on the PHP Chinese website!