Jump to content

JTReignz

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by JTReignz

  1. JTReignz

    Mega Menu

    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>
  2. JTReignz

    Mega Menu

    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.
  3. JTReignz

    Mega Menu

    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
  4. JTReignz

    Mega Menu

    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.
×
×
  • Create New...