Issue
I have created a menu of nested list. The problem is, when I add a second nested list, the last li element among the first group of list elements doesn't adjust it's height from the top of the page to account for the height of the second ul('.sub-2'). It appears to the left but not below the ul. How do I get the last link ('.last-link') to account for the height of the second ul so that it appears below the ul.
$(document).ready(function() {
$('#submen-1').on('click', function(e) {
$('.sub-1').toggleClass("active");
e.stopPropagation();
})
$('#submen-2').on('click', function() {
if ($('.sub-2').hasClass("active")) {
$('.sub-2').removeClass("active");
} else {
$('.sub-2').addClass("active");
}
})
});* {
box-sizing: border-box;
}
body {
height: 100vh;
}
nav {
height: 10vh;
}
ul {
list-style-type: none;
}
.sub-1 {
height: 0px;
visibility: hidden;
}
.sub-2 {
height: 0px;
visibility: hidden;
}
.active {
height: 55px;
visibility: visible;
}
.height {
display: block;
position: relative;
top: 55.5px;
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<a href="#" id="btn"><i class="fa-solid fa-bars"></i></a>
<ul class="main">
<li><a href="contact.html">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#" id="submen-1">Sub</a>
<ul class="sub-1">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#" id="submen-2">Sub-2</a>
<ul class="sub-2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" id="last-link">Last Link</a></li>
</ul>
</nav>
<script src="script.js"></script>
</body>Solution
Setting the height to 55px is limiting the second sub level to it only being that, without accounting for the 3rd sub menu that has another 55px. Instead of having a set height of 55px have it set to auto.
$(document).ready(function() {
$('#submen-1').on('click', function(e) {
$('.sub-1').toggleClass("active");
e.stopPropagation();
})
$('#submen-2').on('click', function() {
if ($('.sub-2').hasClass("active")) {
$('.sub-2').removeClass("active");
} else {
$('.sub-2').addClass("active");
}
})
});* {
box-sizing: border-box;
}
body {
height: 100vh;
}
nav {
height: 10vh;
}
ul {
list-style-type: none;
}
.sub-1 {
height: 0px;
visibility: hidden;
}
.sub-2 {
height: 0px;
visibility: hidden;
}
.active {
height: auto;
visibility: visible;
}
.height {
display: block;
position: relative;
top: 55.5px;
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<a href="#" id="btn"><i class="fa-solid fa-bars"></i></a>
<ul class="main">
<li><a href="contact.html">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#" id="submen-1">Sub</a>
<ul class="sub-1">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#" id="submen-2">Sub-2</a>
<ul class="sub-2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" id="last-link">Last Link</a></li>
</ul>
</nav>
<script src="script.js"></script>
</body>Answered By - Ivana Murray
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.