Toggle button problem nested in menu

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

If you want help it is always best to give us a working version of your project so that we don’t have to spend a lot of time setting it up ourselves. You could put this in something like codepen or even in github. The easier you make this for us to look at and test the more likely someone will take a look and offer help.

1 Like

I put it on github. The breakpoint from desktop to mobile is 1440px

https://github.com/cmb347827/intro-section-with-dropdown-navigation-main-github.io

Also , when I had a working version I did ‘display:none’ for the ui-menu.

Working version , or so it seems at least.

https://github.com/cmb347827/temp-works-github.io

Thanks!

Thanks for the github links, but now I don’t know which one you want me to look at? Please clarify.

1 Like

The top one. I moved the toggle button there within the menu.
The second one is my old ,working, version that has the toggle outside of the menu.

Thanks !

Notice how you are using a button for the Features and Company toggles and the submenu for each of those is a ul. I would recommend you do the same thing for the main menu and the hamburger button (and use an actual button, not a div).

1 Like

Thanks. I will try that later tonight, hopefully it solves it

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.