NetTalk Central
NetTalk Web Server => Web Server - Ask For Help => Topic started by: CaseyR on September 05, 2018, 02:02:37 PM
-
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.
-
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/
-
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
-
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.
-
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 - ☰
For hiding / unhiding I used CSS media queries.
Bruce mentioned the double drop menu. If you use ☰ 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
-
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
-
Play around with this example app I created a while back.
Don
-
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()">☰<</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.
-
Cool!