I am looking to create a collapsible master navigation bar that will have another collapsible navigation bar inside. I already have one collapsible navigation bar, but I can't figure out how to make a master navigation bar that contains it. In the code below, I have created a collapsible bar called 'Profile' and I want to add another collapsible bar called 'Navigation' which will contain the 'Profile' navigation bar.
I attempted to modify the CSS as shown below:
.menu {
border-radius: 8px;
position: relative;
}
I tried adding: .menu {
border-radius: 8px;
position: relative;
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
list-style: none;
text-decoration: none;
}
.menu {
border-radius: 8px;
position: relative;
}
.btn-nav {
display: block;
padding: 16px 20px;
background: #333;
color: white;
font-size: 2em;
}
... (CSS code continues)
My goal is to create a collapsible navigation bar that will include another collapsible navigation bar.
For instance, when clicking on a navigation bar, a second collapsible navigation bar should appear, which can also be collapsed.