Jump to content
JTReignz

Mega Menu

By JTReignz, in HTML/XHTML

Recommended Posts

JTReignz    0

JTReignz
Posted

I am trying to create a mega menu similar to a lot of the leading online bookstores with multiple dropdowns of varying sizes under each menu title. I have been attempting to do so but only managed one dropdown beside regular menu links. If anyone can offer any help it would be much appreciated.

Thanks.

large dropdown menu image 2.png

large dropdown menu image 3.png

Share this post

Link to post
Share on other sites

Funce    42

Funce
Posted

Post some code, and lets see where you've gone astray.

  • Like 1

Share this post

Link to post
Share on other sites

JTReignz    0

JTReignz
Posted

I used the code from w3schools originally  https://www.w3schools.com/howto/howto_css_mega_menu.asp and customized it so that it went straight from the menu tabs to the categories but when I tried to add additional dropdowns to the menu it didn't wok t all.

Here is the code as I've edited it.

 

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #clear;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 12px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 12px;  
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: clear;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: ffffff;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: white;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ffffff;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<div class="navbar">
  <div class="dropdown">
    <button class="dropbtn">New 
    </button>
    <div class="dropdown-content">  
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div> 
</div>

 

After I failed to figure that out I decided to try the tutorial that corvid offers to wix users since that's what I'm using for my website, but their version just seemed unnecessarily complicated. https://support.wix.com/en/article/corvid-tutorial-creating-an-expanding-mega-menu

Share this post

Link to post
Share on other sites

Funce    42

Funce
Posted

Try to use the code block feature of the forum to format it nicely, colour it, and to avoid it getting eaten by the formatter. If you could edit your previous post.

XcQfW3F.png

 

Adding an additional dropdown shouldn't be too bad.  Just add another dropdown set after your previous <div class="dropdown"> and it'll also be in the navbar. 

<div class="dropdown">
  <button class="dropbtn">New</button>
  <div class="dropdown-content">
    <div class="row">
      <div class="column">
        <h3>Another 1</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Another 2</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Another 3</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>

Unless you're after a sub-dropdown menu, as in a dropdown inside a dropdown. Then it gets trickier.

  • Like 1

Share this post

Link to post
Share on other sites

JTReignz    0

JTReignz
Posted

That worked perfectly thank you. I'm going to add the menu to my site s soon as I leave work. I'm super excited. This has been stressing me for over a month. Thank you so much.

Share this post

Link to post
Share on other sites

JTReignz    0

JTReignz
Posted

Iv'e been editing the code and it's working great I just have one more question. As of now each drop down are the exact same size as the others. Is there a way to change the size of each depending on how many columns I add to each menu link. 

This is the code I'm using. 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: clear;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 12px;
  color: black;
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 12px;  
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: clear;
  text-decoration: underline;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  background-color: #ffffff;
  height: 285px;
}

.column a {
  float: none;
  color: black;
  padding: 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #fff;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<div class="navbar">
 <div class="dropdown">
  <button class="dropbtn"><b><a href="#">NEW</a></b></button>
  <div class="dropdown-content">
    <div class="row">
      <div class="column">
        <h6>CATEGORY</h6>
        <a href="#">BOOKS</a>
        <a href="#">CLOTHING</a>
        <a href="#">ACCESSORIES</a>
        <a href="#">ART & DECOR</a>
      </div>
      <div class="column">
        <h6>FEATURED</h6>
        <a href="#">UPCOMING RELEASES</a>
        <a href="#">NEW RELEASES</a>
        <a href="#">CLOCK REPUBLIC T-SHIRTS</a>
        <a href="#">LIMITED EDITION VOID TREE MAPS</a>
        <a href="#">ERIKA'S PICKS</a>
      </div>
      <div class="column">
        <h6>Another 3</h6>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn"><b><a href="https://www.jtreignz.com/books-1">BOOKS</a></b></button>
  <div class="dropdown-content">
    <div class="row">
      <div class="column">
        <h6>BOOKS BY SERIES</h6>
        <a href="#">THE EQUILIBRIOUS CHRONICLES</a>
        <a href="#">THE VEIL WALKER SERIES</a>
        <a href="#">SLOUGH TRILOGY</a>
        <a href="#">THE MORNING SUN SERIES</a>
        <a href="#">WHAT HAPPENED TO BEXLEY BIX</a>
      </div>
      <div class="column">
        <h6>BOOKS BY GENRE</h6>
        <a href="#">SCIENCE FICTION</a>
        <a href="#">FANTASY</a>
      </div>
      <div class="column">
        <h6>BOOKS BY TYPE</h6>
        <a href="#">SIGNED PAPERBACK</a>
        <a href="#">E-BOOK</a>
        <a href="#">AUDIOBOOK</a>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn"><b><a href="#">CLOTHING</a></b></button>
  <div class="dropdown-content">
    <div class="row">
      <div class="column">
        <h6>SHOP BY FACTION</h6>
        <a href="#">WANT-TI SYNTHRY KADAR</a>
        <a href="#">CLOCK REPUBLIC</a>
        <a href="#">T-SHIRTS</a>
        <a href="#">TANKS</a>
        <a href="#">HOODIES</a>
      </div>
      <div class="column">
        <h6>SHOP WOMENS CLOTHING</h6>
        <a href="#">VIEW ALL</a>
        <a href="#">DRESSES</a>
        <a href="#">T-SHIRTS</a>
        <a href="#">TANKS</a>
        <a href="#">HOODIES</a>
      </div>
      <div class="column">
        <h6>SHOP MENS CLOTHING</h6>
        <a href="#">VIEW ALL</a>
        <a href="#">T-SHIRTS</a>
        <a href="#">TANKS</a>
        <a href="#">HOODIES</a>
      </div>
      <div class="column">
        <h6>SHOP KIDS CLOTHING</h6>
        <a href="#">VIEW ALL</a>
        <a href="#">T-SHIRTS</a>
        <a href="#">ONESIES</a>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn"><b><a href="#">ACCESSORIES</a></b></button>
  <div class="dropdown-content">
    <div class="row">
      <div class="column">
        <h6>SHOP BY PRODUCT</h6>
        <a href="#">MUGS</a>
        <a href="#">HATS</a>
        <a href="#">BAGS</a>
        <a href="#">JOURNALS</a>
        <a href="#">PATCHES</a>
        <a href="#">BUMPER STICKERS</a>
      </div>
      <div class="column">
        <h6>Another 2</h6>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h6>Another 3</h6>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn"><a href="#">Art & Decor</a></button>
  <div class="dropdown-content">
    <div class="row">
      <div class="column">
        <h3>Another 1</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Another 2</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Another 3</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn"><a href="#">Gifts</a></button>
  <div class="dropdown-content">
    <div class="row">
      <div class="column">
        <h3>Another 1</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Another 2</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Another 3</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn"><a href="#">Sale</a></button>
  <div class="dropdown-content">
    <div class="row">
      <div class="column">
        <h3>Another 1</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Another 2</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
      <div class="column">
        <h3>Another 3</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

 

Share this post

Link to post
Share on other sites

JMRKER    8

JMRKER
Posted

Is the size of the sub-menus still a problem? 
It appears to be working correctly in the FF browser
but perhaps I don't understand the problem.

By size do you mean the width of the displays? 
Or the font sizes? Or the number of column visible?
Or something else?

 

Share this post

Link to post
Share on other sites

dsonesuk    893

dsonesuk
Posted

https://www.w3schools.com/code/tryit.asp?filename=G5XCYZAJQEEI

Will allow as many columns in single row.

if you wanted to wrap after so many columns, you would have to set how many allowed on single row by setting percentage max width and flex, with flex-wrap in row. and also change justify-content.

https://www.w3schools.com/code/tryit.asp?filename=G5XDBWDQA9PW

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
Go To Topic Listing
×
×
  • Create New...