BB23
Reputation: 185
Hide submenu when different submenu is opened
I have created this menu. I want that you can only open one submenu at the time. So if you open the menu for club first and then the menu for profile, the club menu should automatically close. How can this be achieved?
Additionally: It would also be great if all submenus close when closing the hamburger in the top right corner. so that if you reopen the hamburger, the menus are all hidden if that makes any sense... https://codepen.io/bvonr/pen/oNwOjgp
(function () {
var change = document.querySelector(".burger-container"),
box = document.querySelector(".mobilenavigation"),
hider = document.querySelector(".bodyandfooter");
change.onclick = function () {
change.classList.toggle("menu-opened");
box.classList.toggle("menu-opened");
hider.classList.toggle("menu-opened");
};
})();
$(".secondLayer > .plus-button > ul").parent().parent().addClass("hasChildren");
$(".secondLayer").click(function () {
$(this).find(".plus-button").toggleClass("open");
$(this).find(".plus-button").parent().parent().toggleClass("expand");
});* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
}
.header {
width: 100%;
max-width: 100%;
background-color: brown;
display: flex;
position: fixed;
top: 0;
height: 50px;
}
.mobilenavigation {
position: absolute;
overflow: hidden;
height: 0px;
margin-top: 50px;
width: 100%;
font-size: 20px;
line-height: 40px;
}
.burger-container {
position: relative;
display: inline-block;
margin-left: auto;
height: 50px;
width: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
#burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0s;
}
.bar.topBar {
transform: translateY(0px) rotate(0deg);
}
.bar.btmBar {
transform: translateY(6px) rotate(0deg);
}
.burger-container.menu-opened {
transform: rotate(90deg);
}
.burger-container.menu-opened #burger .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.2s;
}
.burger-container.menu-opened #burger .bar.topBar {
transform: translateY(4px) rotate(45deg);
}
.burger-container.menu-opened #burger .bar.btmBar {
transform: translateY(3px) rotate(-45deg);
}
.mobilenavigation.menu-opened {
display: block;
position: absolute;
margin-top: 50px;
padding-top: 15px;
padding-bottom: 15px;
height: calc(100vh - 80px);
width: 100%;
overflow: scroll;
}
.plus-button {
height: 40px;
width: 40px;
transition: 0.3s;
cursor: pointer;
float: right;
}
.plus-icon {
display: inline-block;
width: 20px;
height: 3px;
background-color: #24603c;
border-radius: 0.75em;
transition: 0.3s;
position: relative;
left: 10px;
top: -4px;
}
.plus-icon:before {
width: 20px;
height: 3px;
border-radius: 0.75em;
transition: 0.3s;
position: absolute;
content: "";
transform-origin: 10px center;
transform: rotate3d(0, 0, 1, 90deg);
background-color: #24603c;
}
.open.plus-button .plus-icon:before {
transform: rotate3d(0, 0, 0, 90deg);
}
.hasChildren .plus-button {
display: block;
}
.menulist {
display: none;
}
.secondLayer {
float: right;
}
.expand > .menulist {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="mobilenavigation menu-opened">
<div class="navbar">
<ul class="menuliste">
<li class="menuli1">
<a href="">CLUB</a>
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">Download</a>
</li>
<li class="menulevel1">
<a class=" " href="#">CLUB-KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="#">RAUMBELEGUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="#">FORUM</a>
</li>
</ul>
</li>
<li class="menuli1">
<a href="#">profile</a>
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Freigaben</a>
</li>
<li class="menulevel1">
<a class=" " href="#">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">GRUPPENLEITER</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="burger-container menu-opened">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
</div>Upvotes: 1
Views: 92
Answers (1)
mplungjan
Reputation: 178393
Just remove all expand and open before toggling if they are not belonging to this accordion
$(".secondLayer").click(function () {
const $thisPlus = $(this).find(".plus-button")
const $thisLiContainer = $(this).find(".plus-button").closest("li");
$(".open").not($thisPlus).removeClass("open");
$(".expand").not($thisLiContainer).removeClass("expand");
$thisPlus.toggleClass("open");
$thisLiContainer.toggleClass("expand");
});
(function () {
var change = document.querySelector(".burger-container"),
box = document.querySelector(".mobilenavigation"),
hider = document.querySelector(".bodyandfooter");
change.onclick = function () {
change.classList.toggle("menu-opened");
box.classList.toggle("menu-opened");
hider.classList.toggle("menu-opened");
};
})();
$(".secondLayer > .plus-button > ul").closest("li").addClass("hasChildren");
$(".secondLayer").click(function () {
const $thisPlus = $(this).find(".plus-button")
const $thisLiContainer = $(this).find(".plus-button").closest("li");
$(".open").not($thisPlus).removeClass("open");
$(".expand").not($thisLiContainer).removeClass("expand");
$thisPlus.toggleClass("open");
$thisLiContainer.toggleClass("expand");
});* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
}
.header {
width: 100%;
max-width: 100%;
background-color: brown;
display: flex;
position: fixed;
top: 0;
height: 50px;
}
.mobilenavigation {
position: absolute;
overflow: hidden;
height: 0px;
margin-top: 50px;
width: 100%;
font-size: 20px;
line-height: 40px;
}
.burger-container {
position: relative;
display: inline-block;
margin-left: auto;
height: 50px;
width: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
#burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0s;
}
.bar.topBar {
transform: translateY(0px) rotate(0deg);
}
.bar.btmBar {
transform: translateY(6px) rotate(0deg);
}
.burger-container.menu-opened {
transform: rotate(90deg);
}
.burger-container.menu-opened #burger .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.2s;
}
.burger-container.menu-opened #burger .bar.topBar {
transform: translateY(4px) rotate(45deg);
}
.burger-container.menu-opened #burger .bar.btmBar {
transform: translateY(3px) rotate(-45deg);
}
.mobilenavigation.menu-opened {
display: block;
position: absolute;
margin-top: 50px;
padding-top: 15px;
padding-bottom: 15px;
height: calc(100vh - 80px);
width: 100%;
overflow: scroll;
}
.plus-button {
height: 40px;
width: 40px;
transition: 0.3s;
cursor: pointer;
float: right;
}
.plus-icon {
display: inline-block;
width: 20px;
height: 3px;
background-color: #24603c;
border-radius: 0.75em;
transition: 0.3s;
position: relative;
left: 10px;
top: -4px;
}
.plus-icon:before {
width: 20px;
height: 3px;
border-radius: 0.75em;
transition: 0.3s;
position: absolute;
content: "";
transform-origin: 10px center;
transform: rotate3d(0, 0, 1, 90deg);
background-color: #24603c;
}
.open.plus-button .plus-icon:before {
transform: rotate3d(0, 0, 0, 90deg);
}
.hasChildren .plus-button {
display: block;
}
.menulist {
display: none;
}
.secondLayer {
float: right;
}
.expand > .menulist {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="mobilenavigation menu-opened">
<div class="navbar">
<ul class="menuliste">
<li class="menuli1">
<a href="">CLUB</a>
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">Download</a>
</li>
<li class="menulevel1">
<a class=" " href="#">CLUB-KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="#">RAUMBELEGUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="#">FORUM</a>
</li>
</ul>
</li>
<li class="menuli1">
<a href="#">profile</a>
<div class="secondLayer">
<div class="plus-button">
<div class="plus-icon"></div>
</div>
</div>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Freigaben</a>
</li>
<li class="menulevel1">
<a class=" " href="#">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="#">GRUPPENLEITER</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="burger-container menu-opened">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
</div>Upvotes: 1
Related Questions
- jquery hide/show submenu while keeping the first submenu active along with main menu
- Hide current submenu when other menu item is clicked
- How can I hide and show submenu?
- Using jQuery to hide sub-menu's on click (only one open at a time)
- Hide/Show sub menu
- How to hide one submenu when click on another
- jquery show/hide submenu -> Hide one submenu if other was clicked
- How to hide sub-menu when other menu clicked JQuery
- jquery hiding submenu when change from one submenu opition to another
- CSS/Jquery to show hide submenu