css 屏幕尺寸缩小后导航栏无法恢复正常

2nbm6dog 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(140)

我正在创建一个足球网站，并在导航栏上工作。我创建了代码，以便当它缩小时，它变成一个汉堡包按钮可折叠的。然而，如果我再次使屏幕变宽，导航栏内容不再显示。
下面是我的代码：

const navbar = document.getElementById('navbar')
let number = 0

function toggleFunction() {

  console.log(getComputedStyle(navbar).display)
  if (number === 1) {
    navbar.style.display = 'none'
    number -= 1
  } else {
    navbar.style.display = 'inline-block'
    navbar.style.position = 'absolute'
    navbar.style.top = '75px'
    navbar.style.width = '100%'
    navbar.style.textAlign = 'center'
    navbar.style.padding = ' 5px 0'
    navbar.style.background = 'orange'
    navbar.style.height = "auto";
    number += 1
  }

  console.log(navbar)
}

.toggle-btn {
  width: 35px;
  position: absolute;
  right: 80px;
  top: 25px;
  display: none;
}

.toggle-btn span {
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  float: left;
  margin-bottom: 8px;
}

@media (max-width: 800px) {
  .toggle-btn {
    display: block;
  }
  #navbar {
    display: none;
  }
  #header {
    display: block;
  }
}

@media (min-width: 801px) {
  #navbar {
    display: inline-flex;
    width: 100%;
    justify-content: space-evenly;
    padding-left: 15%;
    align-self: center;
    height: 75px;
    align-items: center;
  }
}

#header {
  display: inline-flex;
  width: 100%;
  color: #fff;
  background-color: #000;
  height: 75px;
}

#navbar {
  display: inline-flex;
  width: 100%;
  justify-content: space-evenly;
  padding-left: 15%;
  align-self: center;
  height: 75px;
  align-items: center;
}

<div class="toggle-btn" onclick="toggleFunction()">
  <span></span>
  <span></span>
  <span></span>
</div>

<nav id="header">
  <img src="pantherlogo.png" alt="Beverly Panthers Logo" id="logo">
  <div id="navbar">
    <h3><a href="index.html">HOME</a></h3>
    <h3><a href="news.html">NEWS</a></h3>
    <h3><a href="team.html">TEAMS</a></h3>
    <h3><a href="history.html">HISTORY</a></h3>
    <h3><a href="contacts.html">CONTACTS</a></h3>
  </div>
</nav>
<div id="top">
  <img src="footballimg.png" alt="football" id="footballimg">
  <div id="motto">
    <h1>Restore our pride.</h1>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75811703/navbar-wont-go-back-to-normal-after-screen-size-shrinks

1条答案

按热度按时间

jjjwad0x1#

情景一：
调整屏幕大小，将隐藏导航项目，并显示汉堡按钮，将展开，这将显示项目。调整屏幕大小 * 没有 * 第一次点击汉堡按钮将导致屏幕看起来像它在开始。
情景二：
调整屏幕大小，将隐藏导航项目并显示汉堡按钮，该按钮将展开并显示项目。如果您单击汉堡按钮，则事件侦听器将运行toggleFunction（事件处理程序回调）和navbar元素（div#navbar）将被隐藏，因为在toggleFunction中您显式设置了style.display = "none"。如果您再次调整屏幕大小，你的媒体查询和CSS类将不会有任何效果，因为设置style属性内联（有或没有js）导致规则优先于其他选择器（CSS特异性）。

建议方案（一般）：

为导航栏的“隐藏”和“可见”状态创建一些实用程序类，然后在事件处理程序中应用 * 这些类 *。
例如

/* In your CSS file */
.visible {
  display: inline-flex;
}

@media screen and (max-width: 800px) {
  #navbar {
    display: none;
    /* other modifications to styling */
  }
}

在你的JS中：

function toggleFunction() {
  navbar.classList.toggle("visible"); // element.classList.toggle("class-name") will add the class "class-name" to the element if it wasn't there before, or it will remove it if it was already applied to the element
}

建议的解决方案（具体）

在您的例子中，您应该删除文件底部的navbar样式，以避免CSS特殊性问题。

/* Remove this */
#navbar {
    display: inline-flex;
    width: 100%;
    justify-content: space-evenly;
    padding-left: 15%;
    align-self: center;
    height: 75px;
    align-items: center;
}

并在移动的视图的媒体查询中添加以下规则

@media (max-width: 800px) {
    /* Your other rules here */

    #navbar.visible {
        display: inline-block;
        position: absolute;
        top: 75px;
        width: 100%;
        text-align: center;
        padding: 5px 0px;
        background: orange;
        height: auto;
    }
}

当navbar应用了类visible时，此规则将向您应用所需的样式。
然后，将您的toggleFunction替换为我上面建议的版本，以便每当用户单击burger按钮时，它都会添加/删除visible类。

赞(0）回复(0）举报 2023-03-24

我来回答

css 屏幕尺寸缩小后导航栏无法恢复正常

1条答案

相关问题

热门标签

最新问答