实例讲解css怎么实现菜单栏的隐藏与展现-前端问答-PHP中文网

实例讲解css怎么实现菜单栏的隐藏与展现

PHPz

发布： 2023-04-21 11:26:05

原创

2679人浏览过

在网站开发中，菜单栏常常是网站的重要组成部分，方便用户进行导航和操作。然而，有时候我们希望在某些情况下隐藏菜单栏，比如在移动端优化时为了减少页面占用空间，或者制作响应式网站时，在小屏幕设备上需要隐藏菜单栏，同时在点击汉堡按钮时才展现出来。在本文中，我们将会介绍一些基本的 css 技巧，以实现菜单栏的隐藏与展现。

利用 display 属性控制菜单栏的显示与隐藏

display 属性是 CSS 中一个很基础的属性，用于控制 HTML 元素的显示方式。该属性有多个参数，其中包括：block （块级元素）、inline （行内元素）、none（不显示）等几个常用值。

为了实现菜单栏的隐藏，在样式表中可以添加如下 CSS 代码：

.menu {
    display: none;
}

登录后复制

这样，当页面加载时，菜单栏就会被隐藏起来。如果我们要在点击汉堡按钮时再展现菜单栏，可以为该按钮绑定事件，点击时通过修改菜单栏元素的 display 属性为 block 进行展现。代码示例如下：

HTML 代码：

立即学习“前端免费学习笔记（深入）”；

<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 代码：

.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 代码：

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

登录后复制

如上所示，我们利用了 CSS 中的伪类选择器 :active 和 JavaScript 中的 classList 属性，在点击汉堡按钮时为其添加 .active 类，展开菜单时修改菜单栏元素的 display 属性为 block，实现菜单栏的展现与隐藏。

通过 CSS 动画控制菜单栏的滑动展现

除了利用 display 属性控制元素的显示和隐藏外，CSS 中还有许多有趣的动画技巧，可以帮助我们实现更为流畅的展现效果。其中，利用 CSS 中的 transition 属性，可以实现一些简单的元素过渡效果。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

具体来说，在菜单栏的展现中，可以为菜单栏元素添加过渡效果，将其从隐藏状态转化为展现状态。

添加如下 CSS 代码：

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

登录后复制

在菜单栏元素 .menu 上设置 position 为 fixed，使其保持固定位置，然后将 left 属性设置为 -100%。这样一来，菜单栏就会被隐藏在页面左侧，位于用户屏幕外。同时，我们为菜单栏元素设置了一个过渡效果：当其 left 属性发生变化时，通过 ease-in-out 的缓动效果进行过渡，以实现更为平滑的展现效果。

当点击汉堡按钮时，我们利用 JavaScript 代码使菜单栏元素的 left 属性从 -100% 变为 0，同时将其对应的类 .active 添加至菜单栏元素上。代码示例如下：

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

登录后复制

在汉堡按钮的点击事件中，我们使用了 JavaScript 中的 classList 属性，通过切换 .active 类，控制菜单栏的展现和隐藏。同时，在 .menu 元素上添加了 .active 类时，菜单栏元素的 left 属性从 -100% 变为 0，通过设置的过渡效果产生了平滑的滑动效果。

总结

在网站开发的过程中，菜单栏的展现方式是一个经常要考虑的问题。利用 CSS 属性的各种技巧，可以实现菜单栏的隐藏与滑动展现等不同的展现方式，为用户提供更为便利的操作体验。希望本文对大家在网站开发方面有所启发，帮助大家实现更为优秀的网页设计。

以上就是实例讲解css怎么实现菜单栏的隐藏与展现的详细内容，更多请关注php中文网其它相关文章！