Issue
I am looking to center a title over the top of two unordered lists. I am rather new to HTML,CSS and JS so my go-to is usually chat gpt or just google, but I cannot seem to find any examples of how to best do it, and chat gpt doesnt seem to have a clue what I want so i figured here was the best place to come.
As I have mentioned before, I am looking to center a title over two unordered lists. I have illustrated roughly what I want in this image:Depiction of hover mega-menu
I have all my current code in this codepen: Codepen Code and I am hopeful you can help me.
I have tried positioning the header in multiple ways and changing how the lists are styled but I only seem to be able to make the header appear over the top of all the links, like this:Long list of links under header, or have the header appear on the side in an individual box, like this:Header in an individual box (notice the underline at the bottom of the box, because I'm using a border as my underline). I am doing the css and html only preferably. Here is the code if you don't like using codepen:
HTML:
<nav>
<div class="container">
<ul class="menu-main">
<li class="Tab1"><a href="">Tab 01</a>
<div class="menu-sub">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</li>
<li class="Tab2"><a href="">Tab 02</a>
<div class="menu-mega">
<ul>
<h3>Category</h3>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<h3>Category</h3>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<h3>Category</h3>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</li>
<li class="Tab2"><a href="">Tab 03</a>
<div class="menu-mega">
<ul>
<h3>Category</h3>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</ul>
</div>
</li>
<li><a href="">Tab 04</a></li>
</ul>
</div>
</nav>
CSS:
* {
margin: 0;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
body {
background: #333333;
}
.container {
width: 100%;
height: 40px;
background: #666666;
}
.menu-main {
display: flex;
justify-content: start;
}
.menu-main li {
display: flex;
align-items: center;
justify-content: center;
margin: 0px 10px;
height: 40px;
width: 100px;
position: relative;
transition: all 0.5s;
}
h3 {
display: flex;
align-items: center;
justify-content: center;
color: white;
margin: 0 10px 10px 10px;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.menu-main li:hover {
background: gray;
}
.menu-sub {
display: flex;
justify-content: center;
pointer-events:none;
opacity: 0;
position: absolute;
top: 40px;
left: 0px;
background: #555555;
width: 100%;
transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
opacity: 1;
pointer-events:auto;
}
.menu-sub ul li {
transition: all 0.2s ease-in-out;
}
.menu-mega {
display: flex;
pointer-events:none;
opacity: 0;
justify-content: space-evenly;
position: absolute;
top: 40px;
left: 0px;
background: #555555;
width: auto;
padding: 10px;
transition: all 0.2s ease-in-out;
}
Also any improvements I could make to my code would be very much appreciated as I am still only 2 weeks into my web dev journey, and I'm always looking for how to improve! Thanks!
Solution
If you want two separate lists displayed side by side, then you need to add a flex wrapper around them.
* {
margin: 0;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
body {
background: #333333;
}
.container {
width: 100%;
height: 40px;
background: #666666;
}
.menu-main {
display: flex;
justify-content: start;
}
.menu-main li {
display: flex;
align-items: center;
justify-content: center;
margin: 0px 10px;
height: 40px;
width: 100px;
position: relative;
transition: all 0.5s;
}
h3 {
display: flex;
align-items: center;
justify-content: center;
color: white;
margin: 0 10px 10px 10px;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.menu-main li:hover {
background: gray;
}
.menu-sub {
display: flex;
justify-content: center;
pointer-events:none;
opacity: 0;
position: absolute;
top: 40px;
left: 0px;
background: #555555;
width: 100%;
transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
opacity: 1;
pointer-events:auto;
}
.menu-sub ul li {
transition: all 0.2s ease-in-out;
}
.menu-mega {
display: flex;
pointer-events:none;
opacity: 0;
justify-content: space-evenly;
position: absolute;
top: 40px;
left: 0px;
background: #555555;
width: auto;
padding: 10px;
transition: all 0.2s ease-in-out;
}
.multi {
display: flex;
}
<nav>
<div class="container">
<ul class="menu-main">
<li class="Tab1"><a href="">Tab 01</a>
<div class="menu-sub">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</li>
<li class="Tab2"><a href="">Tab 02</a>
<div class="menu-mega">
<div>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<div>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<div>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</div>
</li>
<li class="Tab2"><a href="">Tab 03</a>
<div class="menu-mega">
<div>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<div>
<h3>Category</h3>
<div class="multi">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</div>
</div>
</li>
<li><a href="">Tab 04</a></li>
</ul>
</div>
</nav>
But if you want a single list which wraps automatically, you could just style the list with a columns
rule.
* {
margin: 0;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
body {
background: #333333;
}
.container {
width: 100%;
height: 40px;
background: #666666;
}
.menu-main {
display: flex;
justify-content: start;
}
.menu-main li {
display: flex;
align-items: center;
justify-content: center;
margin: 0px 10px;
height: 40px;
width: 100px;
position: relative;
transition: all 0.5s;
}
h3 {
display: flex;
align-items: center;
justify-content: center;
color: white;
margin: 0 10px 10px 10px;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.menu-main li:hover {
background: gray;
}
.menu-sub {
display: flex;
justify-content: center;
pointer-events:none;
opacity: 0;
position: absolute;
top: 40px;
left: 0px;
background: #555555;
width: 100%;
transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
opacity: 1;
pointer-events:auto;
}
.menu-sub ul li {
transition: all 0.2s ease-in-out;
}
.menu-mega {
display: flex;
pointer-events:none;
opacity: 0;
justify-content: space-evenly;
position: absolute;
top: 40px;
left: 0px;
background: #555555;
width: auto;
padding: 10px;
transition: all 0.2s ease-in-out;
}
.multi {
columns: 2;
}
<nav>
<div class="container">
<ul class="menu-main">
<li class="Tab1"><a href="">Tab 01</a>
<div class="menu-sub">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</li>
<li class="Tab2"><a href="">Tab 02</a>
<div class="menu-mega">
<div>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<div>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<div>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</div>
</li>
<li class="Tab2"><a href="">Tab 03</a>
<div class="menu-mega">
<div>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<div>
<h3>Category</h3>
<ul class="multi">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
<li><a href="">Link 7</a></li>
<li><a href="">Link 8</a></li>
<li><a href="">Link 9</a></li>
<li><a href="">Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="">Tab 04</a></li>
</ul>
</div>
</nav>
Answered By - Brett Donald
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.