文章/答案/技术大牛

发布

社区首页 >问答首页 >肚脐绝对定位

问肚脐绝对定位
EN

Stack Overflow用户

提问于 2020-06-08 16:12:36

回答 1查看 2K关注 0票数 0

这里我有一个响应式的导航条，我希望它是绝对的，菜单项要向右浮动，但是当我将位置属性应用到它时，菜单项就会向左浮动。此外，应用绝对位置导航，使汉堡包的小屏幕左浮动，当它打开关闭图标消失。

请帮助我找出正确的解决方案，使导航绝对，但不影响菜单项和汉堡包。

注意:在检查代码片段时，尝试将其用于桌面和移动屏幕。

    document.getElementById("hamburger").addEventListener("click", function() {
      this.classList.toggle("active");
      document.querySelector(".mobile-menu").classList.toggle("active");
    });

body {
  background-color: rgb(0, 0, 0);
  margin: 0;
  overflow-x: hidden;
  cursor: pointer;
}

img {
  margin-top: 100px;
}

@media (max-width: 767px) {
  img {
    margin-top: 40px;
    height: 80px;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}


/* Navigation Menu */

nav {
  height: 70px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

nav #menu {
  display: flex;
  height: 100%;
}

nav #menu li {
  padding: 0px 30px;
  line-height: 70px;
  transition: all 0.3s ease-out;
}

nav #menu li a {
  color: #fff;
}

nav #menu li a:hover {
  color: rgb(238, 215, 12);
}

@media (max-width: 767px) {
  nav #menu {
    display: none;
  }
}


/* Mobile Menu */

#hamburger {
  position: absolute;
  float: right;
  right: 10px;
  top: 14px;
  z-index: 999;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease-out;
  visibility: hidden;
  opacity: 0;
}

#hamburger .line {
  height: 5px;
  background: rgb(238, 215, 12);
  margin: 5px auto;
  backface-visibility: hidden;
}

#hamburger.active #one {
  transform: rotate(45deg) translateX(6px) translateY(6px);
}

#hamburger.active #two {
  opacity: 0;
}

#hamburger.active #three {
  transform: rotate(-45deg) translateX(10px) translateY(-12px);
}

@media (max-width: 767px) {
  #hamburger {
    visibility: visible;
    opacity: 1;
  }
}

.mobile-menu {
  z-index: 1;
  position: absolute;
  top: 0px;
  background: black;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-out;
  display: table;
}

.mobile-menu .mobile-menu__items {
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}

.mobile-menu .mobile-menu__items li {
  display: block;
  text-align: center;
  padding: 20px 0;
  text-align: center;
  font-size: 35px;
  min-height: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.mobile-menu .mobile-menu__items li:hover {
  color: rgb(238, 215, 12);
}

.mobile-menu .mobile-menu__items li:hover a {
  transition: all 0.3s ease-out;
  color: rgb(238, 215, 12);
}

.mobile-menu .mobile-menu__items li a {
  color: white;
}

.mobile-menu.active {
  visibility: visible;
  opacity: 0.99;
}

@media (min-width: 768px) {
  .mobile-menu {
    visibility: hidden !important;
  }
}


/* Main */

h1 {
  z-index: 1;
  color: #fff;
  left: 0;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About</title>
  <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <!-- Navigation Menu -->
  <header>
    <nav>
      <a href="home"><img src="images/logo.svg" alt="logo"></a>
      <ul id="menu">
        <li><a href="home">HOME</a></li>
        <li><a href="work">WORK</a></li>
        <li><a href="about">ABOUT</a></li>
        <li><a href="javascript:;">CONTACT</a></li>
      </ul>

      <div id="hamburger">
        <div class="line" id="one"></div>
        <div class="line" id="two"></div>
        <div class="line" id="three"></div>
      </div>
    </nav>
    <!-- Mobile Menu -->
    <div class="mobile-menu">
      <ul class="mobile-menu__items">
        <li><a href="home">HOME</a></li>
        <li><a href="work">WORK</a></li>
        <li><a href="about">ABOUT</a></li>
        <li><a href="javascript:;">CONTACT</a></li>
      </ul>
    </div>
  </header>
  <!-- Main -->
  <main>

    <h1>hello</h1>
  </main>


</body>

</html>

html

css

css-position

menuitem

nav

回答 1

Stack Overflow用户

发布于 2020-06-08 16:24:16

将此样式添加到css更改菜单ul li a中。

 nav ul li a{display:block;width:100%;float:right;text-align:right;}

票数 0

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

原文链接：

https://stackoverflow.com/questions/62266502

复制

相似问题

问肚脐绝对定位
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问肚脐绝对定位EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问肚脐绝对定位
EN