Bootstrap Umbraco menu Dropdown click - javascript

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.

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 3 accordion menu: Stop the panel open from also opening the page

I am developing an Angular JS 1.5 app using Booststrap components. I have an accordion menu on the sidebar which is based upon this:
http://bootsnipp.com/snippets/QXqM1
(Not my code)
When I open a menu and select the menu item the page is loaded (I am using vanilla angular JS routing for this.
If I then open another menu from the accordion i.e click on the menu header, the menu opens, the previous one collapses but the loaded page changes.
What I would like is for a page to be loaded only when an item is clicked and not when a menu is opened.
Is this and angular issue or a css or bootstrap issue and how can I solve it?
Thanks in advance for any help or pointers on this.
Well thanks for the overwhelming response ;-)
I found a solution: Instead of using href for the sub menu titles I now use data-target. Bootstrap interprets data-target and this way Angular JS routing does not get invoked.
In this way the menus can be opened and closed without impact the view. the href tags remain only on the menu items which should show anything.

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

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

Sliding panels closing when clicked outsite and linking to an open panel

I am planing to use sliding panels as pages for this website.
Even tough I am a JS noob I managed to find and edit scripts until I got pretty much the perfect script
Problem is that the sliding panels are closing when clicked outside. I want then to close when another panel opens but not when somebody clicks outside the panel.
Also this will be an one page design except the portfolio. I a link to index.html with the portfolio panel open. Can I do that? To understand better what I mean please check this image.
Edit: Okay I will explain better.
This will be a one page design, since I will be using sliding panels for pages. However each gallery item will have it's own html page because I do not want the site to be slow.
So I need to link portfolioitem1.html to the index.html with the portfolio panel open just like in the image I posted
Here's a jsFiddle that solves the first part of the problem:
http://jsfiddle.net/aUHwA/1/
The thing that was causing the panels to collapse was the document.click() function you were using. I've moved everything into a $(document).ready() function, added some generic wrappers for the sliders and buttons, and used a generic click function that's shared across all three buttons.
The click function uses the data-rel property of the button that was clicked to decide what panel it should toggle. It also hides any panels that are already visible within the #content div.
To open the portfolio panel by default, you can add this immediately after the on('click') function:
$('#portfolio_button').click();
That will trigger the portfolio animation (see http://jsfiddle.net/aUHwA/3/). Alternatively:
$('#portfolio').slideToggle(0);
will open the portfolio panel instantly, without the sliding animation (see http://jsfiddle.net/aUHwA/2/).

Categories

Resources