Search code examples
cssnavbarresponsivemegamenu

Responsive Megamenu position css

I'm trying to create a responsive navbar which has a megamenu in the desktop version and a list menu in the mobile version. My problem is, that I don't know how to correctly apply html classes and css.

I tried already flexbox and css grid but in all cases the boxes are not positioned where they should be.

Example: In flex-box I would create a "container" sourounded by the orange items (see below picture) and a "container" sourounded by the blue items. Then I would use flex-direction column for the orange boxes and use row and wrap for the blue boxes. But to have a seperate container for orange and blue boxes means that I do not have it in the correct order if I look into my mobile version.

enter image description here

In the mobile version I got my list in the correct order. First Drowdown Clients, First Dropdown Projects and First Dropdown Resources are my "orange boxes". So, if I click on those items the submenue like Clients 1 on the right etc. will appear (blue boxes). For the desktop version I want to have the orange boxes on the left in the megamenu and the submenues (blue boxes) on the right side. The submenues are overlapping each other and that is ok, because later if I click on a orange box the other submenues (blue boxes) will disappear. It depends on the orange box which submenues will appear at the end. But I do not know how I can position orange boxes on the left side of the megamenue.

Thanks in advance!

@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>

Solution

  • Issues and what I've done about them:

    • There were repeated id's, so I deleted them.
    • I had to take out the .submenu from the .dropdown. Now they are siblings.
    • I've set the height of the .submenu-left-main to 0 because they ware interfering with each other
    • For the show/hide content I've used JQuery.
    • I also used simple display: inline-block to arrange the .submenu-left-main
    • I've added background-color, only for visualization.

    Here's the working code:

    $(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%;
  }
  /*new code from here*/
  .submenu-left-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 10%;
    height: 0%;
    width: 30%;
    text-align: center;
  }
  .submenu-right-main {
    position: absolute;
    left: 50%;
    top: 10%;
    height: 100%;
    width: 45%;
    max-width: 450px;
  }
}

@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;
  }
  .submenu-right-main {
    display: none
  }
}


/*for visual*/

.navbar__item {
  background: red;
}

.submenu-left {
  background: yellow;
}

.submenu-right {
  background: blue;
}


/*the important thing from here*/


/*hide subcontent by default*/

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

.submenu-left {
  position: relative;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  #submenu-projects {
    top: 50px;
  }
  #submenu-resources {
    top: 100px;
  }
  .submenu-right {
    display: inline-block;
    width: 150px;
    height: 70px;
    padding: 10px;
    margin: 5px;
  }
}
    <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>