Hi all.
So I read that when you’re using a menu that the toggle button that hides/shows it should be nested in the menu.
My menu:
<nav aria-label='main page navigation' class='ui-menu'>
<div class='toggle' role='button' aria-label='toggle navigation menu'><img class='me-4 close' src='images/icon-close-menu.svg' alt='Image of close menu cross.' width="26" height="26"><img class='hamburger' src='images/icon-menu.svg' alt='Image of hamburger to collapse the dropdown menu.' width="32" height="18"></div>
<div class='mt-5 mt-xxl-0 ms-xxl-3 me-xxl-4 ui-menu-item'>
<button aria-expanded="false" class=' features-link text-uppercase me-4' aria-label='Opens list of features.'>Features<img class='ms-2 features-close' src='images/icon-arrow-up.svg' alt='Close features submenu.' width='10' height='6' ><img class='ms-2 features-open' src='images/icon-arrow-down.svg' alt='Open features submenu.' width="10" height="6"></button>
<ul aria-hidden='true' class='features-ul'>
<li><div><img class=' me-1' src='images/icon-todo.svg' alt='Image of todo list.' width="14" height="16">ToDo List</div></li>
<li><div><img class='me-1' src='images/icon-calendar.svg' alt='Image of calender.' width="16" height="16">Calender</div></li>
<li><div><img class='me-1' src='images/icon-reminders.svg' alt='Image of bell notification.' width="13" height="17">Reminders</div></li>
<li><div><img class='me-1' src='images/icon-planning.svg' alt='Image of clock.' width="16" height="16">Planning</div></li>
</ul>
</div>
<div class='ms-xxl-3 me-xxl-4 ui-menu-item'>
<button aria-expanded='false' class='company-link text-uppercase me-4' aria-label='Opens list about the company.'>Company<img class='ms-2 company-close' src='images/icon-arrow-up.svg' alt='Close company submenu.' width='10' height='6'><img class='ms-2 company-open' src='images/icon-arrow-down.svg' alt='Open company submenu.' width='10' height='6'></button>
<ul aria-hidden='true' class='company-ul'>
<li><div>History</div></li>
<li><div>Our Team</div></li>
<li><div>Blog</div></li>
</ul>
</div>
<div class='ms-xxl-3 me-xxl-4 ui-menu-item'><a class='text-uppercase me-4' href='#' aria-label='link to careers'>Careers</a></div>
<div class='ms-xxl-3 me-xxl-4 ui-menu-item'><a class='font text-uppercase' href='#' aria-label='link to about'>About</a></div>
<div class='position-absolute end-14 ui-menu-item'><button class='login-btn btn btn-primary font text-uppercase' aria-label='link to login'>Login</button></div>
<div class='position-absolute end-3 ui-menu-item'><button class='register-btn btn btn-primary font text-uppercase' aria-label='link to register'>Register</button></div>
</nav>
But when this is in mobile view the menu should be hidden and only the toggle button should show.
And in desktop the menu should show and the toggle button should be hidden.
this is the css code
.ui-menu{
visibility:hidden;
}
.toggle{
visibility: visible;
display: block;
}
@media screen and (min-width: $container__form-xxl * 1px) {
.ui-menu{
visibility: visible;
display:flex;
}
.toggle{
display: none;
}
}
and the js /jquery where I think the problem is
let toggleCounter= 0;
$('.toggle').click(function(event){
++toggleCounter;
if(toggleCounter % 2 ){
$('.ui-menu').css({'visibility':'visible','position':'absolute','top':'0','left':'51%','z-
index':'1','height':'100vh','width':'170px','text-align':'center'}).menu({
menus: 'nav div',
});
else {
$('.ui-menu').menu('collapseAll',null,true);
}
}
I had a working version before I read that the toggle button needs to be in the menu, which messed up everything . It works fine in desktop, but in mobile the menu doesn’t close properly.
My concern is that I’m also misunderstanding jquery menu ui ?
Thanks