文章/答案/技术大牛

发布

社区首页 >问答首页 >链接转换到右侧的水平可折叠菜单

问链接转换到右侧的水平可折叠菜单
EN

Stack Overflow用户

提问于 2021-11-18 11:02:57

回答 1查看 23关注 0票数 0

我正在尝试创建这个水平菜单，当您单击便携菜单时，会展开右侧的链接。然而，它做了一个奇怪的动画，所有的链接都堆叠在一起，然后最终在一行中。我假设这是因为当菜单关闭时，我将其设置为width: 0px。有什么更好的方法来实现这一点，在转换过程中，链接向右移动，而不是奇怪的出栈动画？

function navMenu()
{
    var classToggle = document.getElementById("navLinks");
    if (classToggle.className === "navMenuClosed") {
      classToggle.className = "navMenuOpen";
    } else {
      classToggle.className = "navMenuClosed";
    }

}

.bento-menu {
  float: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  height: 22px;
  width: 22px;
  cursor: pointer;
}

.bento-dot {
  width: 6px;
  height: 6px;
  background: #ff0000;
  overflow: hidden;
}
#navLinks {
  line-height: 22px;
  background-color: brown;
  float: left;
}

.navMenuOpen {
  width: 500px;
  opacity: 1;

  transition: width 2s;
}
.navMenuClosed {
  width: 0px;
  opacity: 0;
  overflow-x: hidden;
}

#navLinks li {
  display: inline;
  margin-right: 30px;
}

#navLinksUl {
  margin: 0;
  list-style: none;
}

.test {
  border: darkblue solid 10px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/test/navbar.css" />
  </head>
  <body>
    <div id="navbar">
      <div class="bento-menu" onclick="navMenu()">
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
      </div>

      <div id="navLinks" class="navMenuClosed">

        <ul id="navLinksUl">
          <li>Link 1</li>
          <li>Link 1</li>
          <li>Link 1</li>
          <li>Link 1</li>
        </ul>
      </div>
    </div>
    <script src="/test/navbar.js"></script>
  </body>
</html>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-18 11:44:37

您应该能够将其添加到#navLinks的CSS中。你应该读一读text-overflow和其他属性，我发现它对所有类型的导航都非常有帮助:)

#navLinks {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

希望我能帮上忙！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70018707

复制

相似问题

问链接转换到右侧的水平可折叠菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问链接转换到右侧的水平可折叠菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问链接转换到右侧的水平可折叠菜单
EN