Examples to explain how to hide and display the menu bar using css

In website development, the menu bar is often an important part of the website to facilitate user navigation and operation. However, sometimes we want to hide the menu bar in certain situations, such as in order to reduce the page space when optimizing for mobile, or when making a responsive website, the menu bar needs to be hidden on small screen devices, and when the hamburger button is clicked Just showed it. In this article, we will introduce some basic CSS techniques to hide and show the menu bar.

1. Use the display attribute to control the display and hiding of the menu bar

The display attribute is a very basic attribute in CSS, used to control the display mode of HTML elements. This attribute has multiple parameters, including several common values: block (block-level element), inline (inline element), none (not displayed), etc.

In order to hide the menu bar, you can add the following CSS code to the style sheet:

.menu {
    display: none;
}

In this way, when the page is loaded, the menu bar will be hidden. If we want to display the menu bar when the hamburger button is clicked, we can bind an event to the button and display it by modifying the display attribute of the menu bar element to block when clicked. The code example is as follows:

HTML code:

<div class="menu-toggle">
  <button>Toggle Menu</button>
</div>
<nav class="menu">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</nav>

CSS code:

.menu {
  display: none;
}

/* 在移动端，菜单展现后将其置为 fixed 定位 */
@media screen and (max-width: 600px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 2em;
    box-sizing: border-box;
    z-index: 9999;
  }
}

/* 汉堡按钮样式 */
.menu-toggle button {
  background-color: #000;
  color: #fff;
  padding: 0.6em;
  border: none;
}

/* 展开菜单时的样式 */
.menu-toggle.active + .menu {
  display: block;
}

JavaScript code:

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

As shown above, we use the Pseudo class selector :active and the classList attribute in JavaScript, add the .active class to the hamburger button when clicking it, and modify the display attribute of the menu bar element to block when the menu is expanded. Realize the display and hiding of the menu bar.

2. Control the sliding display of the menu bar through CSS animation

In addition to using the display attribute to control the display and hiding of elements, there are many interesting animation techniques in CSS, which can Help us achieve a smoother display effect. Among them, some simple element transition effects can be achieved by using the transition attribute in CSS.

Specifically, in the display of the menu bar, you can add a transition effect to the menu bar element to transform it from the hidden state to the displayed state.

Add the following CSS code:

.menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background-color: #fff;
  padding: 2em;
  box-sizing: border-box;
  transition: left 0.3s ease-in-out;
}

/* 展开菜单时加上移动效果 */
.menu.active {
  left: 0;
}

Set the position to fixed on the menu bar element .menu to keep it in a fixed position, and then set the left attribute to -100 %. This way, the menu bar is hidden on the left side of the page, off the user's screen. At the same time, we set a transition effect for the menu bar element: when its left attribute changes, the transition is made through the ease-in-out easing effect to achieve a smoother display effect.

When the hamburger button is clicked, we use JavaScript code to change the left attribute of the menu bar element from -100% to 0, and at the same time add its corresponding class .active to the menu bar element. superior. The code example is as follows:

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

In the click event of the hamburger button, we use the classList attribute in JavaScript to control the display and hiding of the menu bar by switching the .active class. At the same time, when the .active class is added to the .menu element, the left attribute of the menu bar element changes from -100% to 0, and a smooth sliding effect is generated through the set transition effect Effect.

Summary

In the process of website development, the presentation method of the menu bar is an issue that often needs to be considered. Using various techniques of CSS properties, you can realize different display methods such as hiding and sliding display of the menu bar, providing users with a more convenient operating experience. I hope this article will inspire you in website development and help you achieve better web design.

The above is the detailed content of Examples to explain how to hide and display the menu bar using css. For more information, please follow other related articles on the PHP Chinese website!