响应式超级菜单位置CSS

问题描述 投票：0回答：1

我正在尝试创建一个响应式导航栏，它在桌面版本中有一个megamenu，在移动版本中有一个列表菜单。我的问题是，我不知道如何正确应用 html 类和 css。

我已经尝试过 flexbox 和 css grid，但在所有情况下，盒子都没有放置在应有的位置。

示例：在 Flex-box 中，我将创建一个由橙色项目包围的“容器”（见下图）和一个由蓝色项目包围的“容器”。然后我会对橙色框使用 flex-direction 列，对蓝色框使用 row 和wrapper。但是，如果我查看我的移动版本，橙色和蓝色盒子有一个单独的容器意味着我没有按正确的顺序排列它。

在移动版本中，我以正确的顺序获得了列表。 First Drowdown Clients、First Dropdown Projects 和 First Dropdown Resources 是我的“橙色框”。因此，如果我单击这些项目，则会出现右侧的“客户端 1”等子菜单（蓝色框）。对于桌面版本，我希望将橙色框放在大游戏菜单的左侧，将子菜单（蓝色框）放在右侧。子菜单相互重叠，这没关系，因为稍后如果我单击橙色框，其他子菜单（蓝色框）就会消失。这取决于橙色框，哪些子菜单将出现在最后。但我不知道如何将橙色框放置在超级菜单的左侧。

提前致谢！

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100%;
}

nav {
  height: 60px;
  background-color: #000000;
}

nav ul li {
  list-style: none;
}

.navbar__item a {
  color: #fff;
  text-decoration: none;
}

@media screen and (min-width: 769px) {
  .container {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
  }

  #mobile-btn {
    width: 30px;
    height: 30px;
    background-color: blue;
    color: #fff;
    text-align: center;
    display: none;
  }

  #logo {
    display: flex;
    align-items: center;
    margin: 0 0 0 10px;
  }

  #nav__logo {
    height: 30px;
  }

  .user {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
  }
  #nav__user {
    display: block;
    height: 30px;
    margin: 0 10px 0 0;
  }

  #navbar {
    height: 60px;
  }

  #navbar ul {
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 60px;
  }

  .navbar__item {
    margin: 10px 10px 10px 10px;
  }

  .navbar__item a {
    color: #fff;
    text-decoration: none;
  }
  .login-menu {
    position: absolute;
    top: 60px;
    right: 10px;
    margin: 2px 2px 2px 2px;
    padding: 20px 20px 20px 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    display: none;
  }

  input {
    margin: 0 0 20px 0;
    height: 2rem;
  }

  #login_btn {
    width: 100%;
  }

  .show_login_form {
    display: block;
  }

  .submenu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    height: 350px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    padding: 30px 30px 30px 30px;
    background-color: #222222;
  }

  .submenu-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }

  .submenu-left-main{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 0;
    height: 100%;
  }

  .submenu-right-main{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 60%;
    top: 0;
    height: 100%;
  }
  
}

@media screen and (max-width: 768px) {
  #navbar {
    background-color: black;
  }

  .navbar__item a {
    color: #fff;
    text-decoration: none;
  }

  .submenu-left,
  .submenu-right,
  .submenu-left-active {
    color: #fff;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style_subs.css" />
  </head>
  <body>
    <nav>
      <div class="container">
        <div id="logo">
          <img src="images/logo.png" id="nav__logo" alt="" />
        </div>
        <div id="navbar">
          <ul>
            <li class="navbar__item" id="navbar_home"><a href="#">Home</a></li>
            <li class="navbar__item" id="navbar_season"><a href="#">Season</a></li>
            <li class="navbar__item" id="navbar_leagues"><a href="#">Leagues</a></li>
            <li class="navbar__item dropdown" id="sub-01"><a href="#">Submenu</a>
              <div id="sub-01" class="submenu">
                <div class="submenu-content active-content">

                  <div id="sub-01-01">
                    <div id="sub-01-left" class="submenu-left-main">
                      <div id="submenu-clients" class="submenu-left">First Dropdown Clients</div>
                    </div>
                    <div id="submenu-clients-right" class="submenu-right-main">
                        <div class="submenu-right sub-box">Clients 1 on the right</div>
                        <div class="submenu-right sub-box">Clients 2 on the right</div>
                        <div class="submenu-right sub-box">Clients 3 on the right</div>
                        <div class="submenu-right sub-box">Clients 4 on the right</div>
                    </div>
                  </div>
                <div id="sub-01-02">
                  <div id="sub-01-left" class="submenu-left-main">
                    <div id="submenu-projects" class="submenu-left">First Dropdown Projects</div>
                  </div>
                  <div id="submenu-projects-right" class="submenu-right-main">
                      <div class="submenu-right sub-box">Projects 1 on the right</div>
                      <div class="submenu-right sub-box">Projects 2 on the right</div>
                      <div class="submenu-right sub-box">Projects 3 on the right</div>
                      <div class="submenu-right sub-box">Projects 4 on the right</div>
                  </div>
                </div>
                <div id="sub-01-03">
                  <div id="sub-01-left" class="submenu-left-main">
                    <div id="submenu-resources" class="submenu-left">First Dropdown Resources</div>
                  </div>
                  <div id="submenu-resources-right" class="submenu-right-main">
                        <div class="submenu-right sub-box">Resources 1 on the right</div>
                        <div class="submenu-right sub-box">Resources 2 on the right</div>
                        <div class="submenu-right sub-box">Resources 3 on the right</div>
                        <div class="submenu-right sub-box">Resources 4 on the right</div>
                    </div>
                </div>


              </div>
            </div>
            </li>



            <li class="navbar__item"><a href="#">About</a></li>
          </ul>
        </div>
        <div class="user">
          <img
            src="images/profile.png"
            id="nav__user"
            alt=""
            onmouseover="toggleMenu()"
          />
        </div>
        <!--  Form for Login -->
        <form action="" method="post" id="login_form" class="login-menu">
          <span class="header_login">LOGIN</span>
          <div class="form-group">
            <input type="email" name="text" class="" value="" placeholder=" Username"/>
            <span class="invalid-feedback"></span>
          </div>
          <div class="form-group">
            <input
              type="password" name="password" class="" value="" placeholder=" Password"
            />
          </div>
          <div class="row">
            <div class="col">
              <input type="submit" value="Login" class="btn_login_submit" id="login_btn"/>
            </div>
          </div>
        </form>
        <div id="mobile-btn">MO</div>
      </div>
    </nav>
    <script src="script.js"></script>
  </body>
</html>

css navbar responsive megamenu
1个回答
0
投票

问题：

  • 有重复的
    id
    的
  • 我不得不从
    .submenu
    中取出
    .dropdown
    。现在他们是兄妹了。
  • 我已将 
    height
    的 
    .submenu-left-main
    设置为 
    0
    ，因为它们会互相干扰
  • 我添加了颜色以进行可视化。

这是工作代码：

$(document).ready(function() {
  $(".dropdown").click(function() {
    $(".submenu").toggle();
  });
  $("#submenu-projects").click(function() {
    $(".submenu-right-main").hide();
    $("#submenu-projects-right").show();
  });
  $("#submenu-clients").click(function() {
    $(".submenu-right-main").hide();
    $("#submenu-clients-right").show();
  });
  $("#submenu-resources").click(function() {
    $(".submenu-right-main").hide();
    $("#submenu-resources-right").show();
  });

});
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100%;
}

nav {
  height: 60px;
  background-color: #000000;
}

nav ul li {
  list-style: none;
}

.navbar__item a {
  color: #fff;
  text-decoration: none;
}

@media screen and (min-width: 769px) {
  .container {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
  }
  #mobile-btn {
    width: 30px;
    height: 30px;
    background-color: blue;
    color: #fff;
    text-align: center;
    display: none;
  }
  #logo {
    display: flex;
    align-items: center;
    margin: 0 0 0 10px;
  }
  #nav__logo {
    height: 30px;
  }
  .user {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
  }
  #nav__user {
    display: block;
    height: 30px;
    margin: 0 10px 0 0;
  }
  #navbar {
    height: 60px;
  }
  #navbar ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
  }
  .navbar__item {
    margin: 10px 10px 10px 10px;
  }
  .navbar__item a {
    color: #fff;
    text-decoration: none;
  }
  .login-menu {
    position: absolute;
    top: 60px;
    right: 10px;
    margin: 2px 2px 2px 2px;
    padding: 20px 20px 20px 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    display: none;
  }
  input {
    margin: 0 0 20px 0;
    height: 2rem;
  }
  #login_btn {
    width: 100%;
  }
  .show_login_form {
    display: block;
  }
  .submenu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    height: 350px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    padding: 30px 30px 30px 30px;
    background-color: #222222;
  }
  .submenu-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  .submenu-left-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 0;
    height: 0%;
    /*with 100% the menu is not clickable*/
  }
  .submenu-right-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 60%;
    top: 0;
    height: 100%;
  }
}

@media screen and (max-width: 768px) {
  #navbar {
    background-color: black;
  }
  .navbar__item a {
    color: #fff;
    text-decoration: none;
  }
  .submenu-left,
  .submenu-right,
  .submenu-left-active {
    color: #fff;
  }
  /*new code from here*/
  .submenu-right-main {
    display: none
  }
}


/*for visual*/

.navbar__item {
  background: red;
}

.submenu-left {
  background: yellow;
}

.submenu-right {
  background: blue;
}


/*the important thing from here*/

#submenu-projects-right,
#submenu-resources-right,
.submenu {
  display: none;
}

@media screen and (min-width: 769px) {
  .submenu-left {
    position: relative;
  }
  #submenu-projects {
    top: 50px;
  }
  #submenu-resources {
    top: 100px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style_subs.css" />
</head>

<body>
  <nav>
    <div class="container">
      <div id="logo">
        <img src="images/logo.png" id="nav__logo" alt="" />
      </div>
      <div id="navbar">
        <ul>
          <li class="navbar__item" id="navbar_home"><a href="#">Home</a></li>
          <li class="navbar__item" id="navbar_season"><a href="#">Season</a></li>
          <li class="navbar__item" id="navbar_leagues"><a href="#">Leagues</a></li>
          <li class="navbar__item dropdown"><a href="#">Submenu</a>
            <!-- id="sub-01" -->

          </li>
          <div class="submenu" id="sub-01">
            <div class="submenu-content active-content">

              <div id="sub-01-01">
                <div class="submenu-left-main">
                  <!--id="sub-01-left"-->
                  <div id="submenu-clients" class="submenu-left">First Dropdown Clients</div>
                </div>
                <div id="submenu-clients-right" class="submenu-right-main">
                  <div class="submenu-right sub-box">Clients 1 on the right</div>
                  <div class="submenu-right sub-box">Clients 2 on the right</div>
                  <div class="submenu-right sub-box">Clients 3 on the right</div>
                  <div class="submenu-right sub-box">Clients 4 on the right</div>
                </div>
              </div>
              <div id="sub-01-02">
                <div class="submenu-left-main">
                  <!--id="sub-01-left"-->
                  <div id="submenu-projects" class="submenu-left">First Dropdown Projects</div>
                </div>
                <div id="submenu-projects-right" class="submenu-right-main">
                  <div class="submenu-right sub-box">Projects 1 on the right</div>
                  <div class="submenu-right sub-box">Projects 2 on the right</div>
                  <div class="submenu-right sub-box">Projects 3 on the right</div>
                  <div class="submenu-right sub-box">Projects 4 on the right</div>
                </div>
              </div>
              <div id="sub-01-03">
                <div class="submenu-left-main">
                  <!--id="sub-01-left"-->
                  <div id="submenu-resources" class="submenu-left">First Dropdown Resources</div>
                </div>
                <div id="submenu-resources-right" class="submenu-right-main">
                  <div class="submenu-right sub-box">Resources 1 on the right</div>
                  <div class="submenu-right sub-box">Resources 2 on the right</div>
                  <div class="submenu-right sub-box">Resources 3 on the right</div>
                  <div class="submenu-right sub-box">Resources 4 on the right</div>
                </div>
              </div>


            </div>
          </div>



          <li class="navbar__item"><a href="#">About</a></li>
        </ul>
      </div>
      <div class="user">
        <img src="images/profile.png" id="nav__user" alt="" onmouseover="toggleMenu()" />
      </div>
      <!--  Form for Login -->
      <form action="" method="post" id="login_form" class="login-menu">
        <span class="header_login">LOGIN</span>
        <div class="form-group">
          <input type="email" name="text" class="" value="" placeholder=" Username" />
          <span class="invalid-feedback"></span>
        </div>
        <div class="form-group">
          <input type="password" name="password" class="" value="" placeholder=" Password" />
        </div>
        <div class="row">
          <div class="col">
            <input type="submit" value="Login" class="btn_login_submit" id="login_btn" />
          </div>
        </div>
      </form>
      <div id="mobile-btn">MO</div>
    </div>
  </nav>
  <script src="script.js"></script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.