JTReignz
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by JTReignz
-
-
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.
-
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
-
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.
Mega Menu
in HTML/XHTML
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.