how to auto close Materialize css mobile navbar? - javascript

I have created a website Link. Here I have used Only Materialize css and vanilla js, Plain Css. I have made a single page application where page sections are being hidden or showing using event listeners. It works fine. However, In the mobile navbar, the menu is not auto-closing after taping on it. I didn't find any docs relating to autoclose in this specific matter. How I can close the navbar whenever the user taps on a menu option?

You can add .sidenav-close to every link in the sidenav. From the documentation:
Close Trigger
Add the class .sidenav-close to an element inside the sidenav and any click event on that element will cause the sidenav to close. This is useful in Single Page Apps where the page does not refresh on link clicks.
<ul id="slide-out" class="sidenav">
<li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
</ul>

Related

click link in navbar menu

I'd like to use javascript to click on a link in a navbar dropdown menu. If the dropdown has been opened at least once $("#state_save").is(":visible") is true and I can use document.getElementById("state_save").click(); to click the link.
However, without activating the navigation bar manually first, document.getElementById("state_save").click(); won't work
I can get the list of all links in the navbar using $("#nav_radiant li:has(a)") but it is not clear how to click on #state_save.
EDIT:
Based on the comments I figured out that until the dropdown menu has been opened the href of the state_save element is blank.
Praveen: A (slightly) older version of the app is linked below. The id in this version is saveStateNav
https://vnijs.shinyapps.io/radiant/?SSUID=1f38b44126
FYI The code is generated using R and the shiny package

Bootstrap Umbraco menu Dropdown click

I work for a site which has a site which is built upon Umbraco and utilizes bootstrap and Jquery.
We have a top navigation menu which has pages and sub-pages. When you hover over a navigation menu it opens up the sub-menu and lets you go to them.
When this menu is viewed on a mobile device it becomes a hamburger and when you click on it it drop-down and the main tabs are shown. Here when you click on the main tab it shows the sub-menu quickly but then goes to the main tab instead of allowing you to click on the sub-menu.
The problem is that this is a large site which is about to launch so that there is no easy way to find what links to what. What is a elegant way to fix this?
I cannot provide the link due to the fact that it is a company.
Thank you!
You could try using this bit of JS (requires jQuery):
$(".dropdown").on('click', function (e) {
e.preventDefault();
});
Or you could change your menu partial to just not put the URL in for menu items that have a dropdown and instead put a # in its place.

Making toogle tabs open when clicked on menu, and close when other menu item is clicked

I`ve made this website http://intelmarketing.mk/demos/mediahuset/ and I need help with the menu (toogle tabs).
The idea is when a menu item is clicked the page to scroll down and open the toogle coresponding the menu item. I taught that it can be done with
Take me to Link 1
<a id="link1">Link 1</a>
Made the headers to be images with id's and clicking on the menu scrolls down to the toogle, but not opening.
Also when other menu item is clicked (or tab) the already opened toogle needs to close.
Any help will be welcomed.
Best regards, Nikola.
SITE:
http://intelmarketing.mk/demos/mediahuset/
Update**
The site is build on wordpress platform, and for the toogle tabs I use whistle plugin.
wordpress.org/plugins/whistles/
The menu are simple images.
On click of "our work" you wish that page should scroll down and a tab should slide down. Presently the page is scrolling down, however tab is not sliding. Am I correct?
You could add two events to your navigation bar tabs 1) to scroll down 2)to slide tab
2nd event is slideToggle() that you're already using
This is not a clean way, but it should work.
Cheers

jQuery Mobile Drop Down Menu Causing Page Reload

I have a drop down menu on this development Wordpress site: http://zap2dev.redzephyr.biz/ the mobile menu appears to be working fine however upon pressing the mobile menu icon the menu displays and promptly the page begins reloading. Obviously on reload the mobile menu is collapsed again so begins the vicious cycle.
Any ideas what could be causing the page to reload?
Any help would be greatly appreciated.
Change <a class="navicon mtoggle" href=""> to <div class="navicon mtoggle">
then update your css
nav#mobile .navicon{
cursor:pointer;
}
Try making your toggle not a link and instead a div. Otherwise with javascript assign on click or touch to prevent.default which would cause the browser from trying to open the link which doesn't have an assigned href and reloads the page.

tap working throught layer bootstrap iphone

I need help regarding mobile website on iPhone. I have implemented slide panel jquery plugin with bootstrap. The left-slide panel contains category links, positioned absolutely below the homepage. When I click the navigation button to open the slide-panel opens but the link below in slide-panel also get triggered. As a result page redirects to link after opening the slide-panel. Seeking for help...
Thanks

Categories

Resources