'Hamburger' menu button for small screens

[CaseyR]

Hi, Bruce

I can't find any reference to a menu button for small screens in NT Central (except for Don Ridley's posted video last January), or in the User Group notes, but I still think this has been addressed somewhere for NT.  Could you point me in the right diection? If not, I thought it might be suitable for tomorrow's user group.

[osquiabro]

i create my own menu for small screens and all is NT + bootstrap via css, look:

http://track.magictransport.com:88/
Try with 1331864 http://track.magictransport.com:88/ShipmentTracking for see result in mobile and desktop

http://tracking.act-transport.com:85/

[Bruce]

Hi Casey,

I tweaked CSS for the Double-Drop menu to support hamburger buttons on small screens, but alas I seem to have lost that code. I'll redo it when I get a chance...

cheers
Bruce

[CaseyR]

That would be great, Bruce.

Thanks, osquiabo,  I will take a look in more detail at your examples to see if they can be applied to double drop.

[DonRidley]

There are a couple of ways to do this.  You can use an actual image file or you can use a "character entity."

I used a character entity - &#9776

For hiding / unhiding I used CSS media queries. 

Bruce mentioned the double drop menu.  If you use &#9776 as your menu item text, it will display the "hamburger" icon.

https://www.abeautifulsite.net/the-unicode-character-for-menu-icons

https://dev.w3.org/html5/html-author/charref

See ya,

Don

[CaseyR]

Thanks, Don

At the moment, I am stuck just getting the

@media (max-width: 24em){
  div.menu_div{
    display: none;
  }
)

to work, so I think I will wait for Bruce's css.

Thanks for posting the video BTW

[DonRidley]

Play around with this example app I created a while back.

Don

[CaseyR]

Thanks for the example, Don.  It was very informative

In the end I simplified the problem, by using a single menu structure for both full and small screens. For small screens, the menu is hidden and the hamburger button is shown. Clicking on the button reveals the menu and hides the button itself.   Both the hamburger button and the menu need unique IDs in the divs.

I added the hambuger button after the menu in the After Div embed:
  packet.Append('<<span id="my-menu-btn" style="font-size:30px;cursor:pointer" onclick="openMenu()">&#9776;<</span>')


The relevant CSS is :

/*hides hamburger menu button. To be activated on small screens */
#my-menu-btn{display: none;}

@media (max-width: 24em){

/*show hamburger button and hide menu on new small screen */
 #my-menu-btn{display: block;}
 #menu1_div{display: none;}
}
   
The Javascript is

function openMenu() {
   document.getElementById("menu1_div").style.display = "block";
   document.getElementById("my-menu-btn").style.display = "none";
}

I didn't bother with a close button for the menu; anywhere the user goes will open a new page with the menu hidden and the hamburger button displayed.

One small thing with the example app:  the javascript file provided is labeled custom.remove_js and the app template uses custom.js

Thanks again.

[DonRidley]

Cool!