Hello everyone.
I am currently learning how to make a website. I built a website using HTML CSS Javascript. I’m currently trying to learn how to collapse a website into vertical navigation as shown on this website.I’m attaching a link here so you can get an idea: https://mdbootstrap.com/snippets/jquery/mdbootstrap/911242#html – tab view
[<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://news.google.com/__i/rss/rd/articles/styles.css" />
<script src="script.js" defer></script>
</head>
<body>
<header>
<img class="logo" src="images/new logo.png" alt="logo">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<nav class="nav">
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>Information</button>
<div class="dropdown-menu information-grid">
<div>
<div class="dropdown-heading">Free Tutorials</div>
<div class="dropdown-links">
<a href="#" class="link">All</a>
<a href="#" class="link">Latest</a>
<a href="#" class="link">Popular</a>
</div>
</div>
<div>
<div class="dropdown-heading">Courses</div>
<div class="dropdown-links">
<a href="#" class="link">Javascript</a>
<a href="#" class="link">CSS</a>
<a href="#" class="link">React</a>
</div>
</div>
<div>
<div class="dropdown-heading">Blog</div>
<div class="dropdown-links">
<a href="#" class="link">All</a>
<a href="#" class="link">Latest</a>
<a href="#" class="link">Popular</a>
</div>
</div>
<div>
<div class="dropdown-heading">Other</div>
<div class="dropdown-links">
<a href="#" class="link">Twitter</a>
<a href="#" class="link">Newsletter</a>
<a href="#" class="link">Discord</a>
</div>
</div>
</div>
</div>
<a href="#" class="link">Pricing</a>
<div class="dropdown" data-dropdown>
<button class="link" data-dropdown-button>Login</button>
<div class="dropdown-menu">
<form class="login-form">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="password">Password</label>
<input type="password" name="email" id="email">
<button type="submit">Login</button>
</form>
</div>
</div>
<button class="link" id="signup">Sign Up</button>
</nav>
</div>
</header>
<script>
const toggle = document.getElementById('toggle');
toggle.onclick = function(){
toggle.classList.toggle('active');
}
</script>
</body>
</html>](http://127.0.0.1:5503/index.html)
Do you have a question here, @Apache, or any aspect you need help with?
Yes, I posted the question on this thread after looking it up.
body {
margin: 0;
}
header {
background-color: rgb(212, 209, 209);
display: flex;
flex-wrap: wrap; /* so navbar will go under logo on small smartphones */
align-items: center;
padding: 5px 4%;
justify-content: space-between;
}
.logo {
margin-left: 20px;
cursor: pointer;
}
.nav {
display: flex;
gap: 1rem;
padding: 0;
align-items:center;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.dropdown.active > .link,
.link:hover {
color: black;
}
.link:last-child {
margin: auto;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
right: 0;
top: calc(150% + 0.25rem);
background-color: white;
padding: 0.75rem;
border-radius: 0.25rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.dropdown.active > .link + .dropdown-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.information-grid {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 2rem;
}
.dropdown-links {
display: flex;
flex-direction: column;
gap: .25rem;
}
.login-form > input {
margin-bottom: 0.5rem;
}
#signup {
padding: 10px 25px;
background-color: rgba(0,136,169,1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
document.addEventListener("click", e => {
const isDropdownButton = e.target.matches("[data-dropdown-button]")
if (!isDropdownButton && e.target.closest("[data-dropdown]") != null)
return
let currentDropdown
if (isDropdownButton) {
currentDropdown = e.target.closest("[data-dropdown]")
currentDropdown.classList.toggle("active")
}
document.querySelectorAll("[data-dropdown].active").forEach(dropdown => {
if (dropdown === currentDropdown) return
dropdown.classList.remove("active")
})
})
A toggle menu is in place, but with a different name. #toggle So you have to change your JS to reflect that.you called it #mobile menu.
You haven’t actually styled the hamburger, so you should get the style to create the hamburger from where you saw that code.
Once in place, set it to display:none by default and use media queries with the width you want to display. At the same point in the media query, change the style of the navigation to generally be below the header as desired.
This is a basic start, but leaves you to fill in the gaps as you learn.
#mobile-menu {
display: none;
height: 50px;
width: 100px;
background: red; /* just for testing - you need to find the correct css for this*/
}
/* I've used 800px as the trigger point but this needs to change based on the design */
@media screen and (max-width: 800px) {
#mobile-menu {
display: block;
}
.nav {
display: none;
}
.active + .nav {
display: block;
}
/* Now from here you need to style the way you want that dropdown to look on small screen.
This would probably be using absolute positioning to show the menu over any other content*/
/* e.g. just for starters*/
header {
position: relative;
}
.nav {
position: absolute;
left: 0;
top: 100%;
}
/* now adjust all the styling for the list elements as required*/
/* ??? */
}
The js is changed to reflect the correct hamburger id.
const toggle = document.getElementById("mobile-menu");
toggle.onclick = function () {
toggle.classList.toggle("active");
};
This is a basic start to get it working, so just style it as you wish 🙂
Thank you very much, buddy. I really appreciate your unlimited support. you are correct. This code is left over from a previous project that I forgot to remove. But like you said, I try to figure out the rest, so the learning process becomes more effective.
What about the html, do I need to make any changes or should I leave it as is?
You might be interested in the discussion in a similar thread that discusses using nested lists in html.
The last example shows the difference when using nested lists. There’s nothing wrong with using regular html, but the nested list approach is much more extensible and allows unlimited nesting easier. If you are not following that approach, no need to change.
Note that there are no hamburgers in this example, as we only discussed basic menus.
Of course, if you get stuck, just post.I’ll be out until Sunday afternoon, but I hope someone else jumps in by then. 
1 like
OK! Amazing. You mean this discussion with OBXjuggler? I don’t think there is a similar project.I needed the html code so I could combine it with the css code provided 
In that discussion, I talk about nested lists and give an example of my preferred approach.The original html is similar to yours, useful for comparison
You don’t have to copy the code, but understand the difference and help you learn.
1 like
Haha! OK! Now I understand your intent. You’re right. Copying and pasting is not very effective learning. Instead, getting inspired and figuring out solutions is a much better way to learn programming.
3 likes
Hello dear Paul,
Back to you again with almost the same topic. I’ve tried it myself to make the website collapse into a vertical navigation menu with both dropdown buttons on the left side when the hamburger button is clicked. But I couldn’t accomplish this step. Can you help me with this problem?? Below you will find a link to the style I am working on in Example 2. 
https://mdbootstrap.com/snippets/jquery/mdbootstrap/911242
index.html (2.5KB)
style.css (1.7KB)
script.js (1.0KB)
I copied the new code into my codepen and basically added the code I provided in the previous answer
I’ve styled the dropdown when the hamburger is open very loosely so you know what to do. It is not meant to be a finished product per se. I wouldn’t actually use the same html as you for the dropdown, but I would have used a more structured list approach and a more consistent button usage as described in my previous post.
However, this demo serves as an example of how to implement a hamburger and start styling the dropdown.
1 like
I think bootstrap beats what you want by far. did you implement it?
1 like
OK! What does bootstrap mean?
OK! great. You’ve rebuilt almost exactly the design I wanted.I figured out how to make a hamburger button. However, I tried to move it to the right and toggle too many times, but to no avail.
index.html (2.6KB)
style.css (2.4KB)
Obs! How can I submit my code to CODEOEN?
I’ve provided the code for that, so I’m not sure what you’re asking?
The CSS you posted doesn’t have media queries in place and fullscreen doesn’t hide the button. When I put the media query, the hamburger automatically moves to the right because it hides the navigation and moves the navigation to the new position.
It looks like you got some other code for your burger, but I suggest you use mine and style it as you see fit. The hamburger code in your example looks like a checkbox hack and requires a ton of css to go along with it.
I recommend working from my working code.
He probably means the framework you keep mentioning! Bootstrap5 is the latest version. I have a component that creates a hamburger and a dropdown out of the box.
However, I don’t think it’s at a level where it can be used properly yet, as it has a steep learning curve and can be done without it if you really know how to use it.
1 like
Once you’ve signed up for a free account on codepen and your pen is complete, simply paste your code pen URL into a post here and your embedded pen will automatically appear.
1 like
