I may possible have a requirement where i have to link the parent menu to a link rather than showing sub menu. Right now i am using Slick Menu http://slicknav.com/
Logically parent menu should not be linked as it should show child menu on mobile device. while desktop version we can counter this with hover effect can show sub-menus and click on the parent menu can open link also but on small screen we can either open link or show submenu.
my question right now is that in fiddle example (http://jsfiddle.net/y1dLdd1f/1/) i am linking Parent 1 meny to google.com, but script is blocking this. How can i unblock it and when user click on it it opens the page rather than showing the sub menu if parent menu has a proper link
<ul id="menu">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
</ul>
Slick menu has a number of available options including "allowParentLinks", all you need should be,...
$(document).ready(function(){
$('#menu').slicknav({
allowParentLinks:"true"
});
});
But to show this working in JSFiddle you would need to add target="_blank" to you <a> tag.
Related
I have my html as follows:
<button id="hamburger-nav"></button>
<nav>
<ul>
<li>
<button>Sub Nav Item 1</button>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
<li>
<button>Sub Nav Item 2</button>
<ul>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</li>
<ul>
</nav>
This is a mobile menu that has a hamburger button that activates the "nav" on click. How do I get the index of the sub nav buttons so I can active their sibling "ul" sub sub menu? Granted all of this has to be done on the onclick method since it is a mobile menu.
I was hoping to have a universal method that could find the index of (this), i.e., the item that is clicked, and then get the corresponding "ul", instead of individually naming these and creating a massive, duplication of code for each menu section.
I would like to use plain old JavaScript as I am trying to cut down on the dependencies of jQuery, etc. Something along the lines of:
var menuButtons = document.querySelectorAll("nav > ul > li > button");
var submenu = document.querySelectorAll("nav > ul > li > ul");
menuButtons.onclick = myFunction(this);
function myFunction(v) {
submenu[v].classList.add("open");
}
While I know this JavaScript doesn't work, accessing the index of the clicked button and opening its accompanying nav was my thought process. But perhaps I'm way of going about this.
Thank you in advance!
I'm trying to style a topbar menu with submenu items in Foundation. The code seems right, but the submenu items keep breaking the styling of the topbar on a page refresh, then going into place (hidden under the top menu item) when the javascript loads.
The docs address FOUC on the dropdown arrows, but not on the list items themselves.
Code:
<div class="top-bar">
<ul class="dropdown menu" data-dropdown-menu>
<li class="is-dropdown-submenu-parent">
Item 1
<ul class="menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
<li>Item 1F</li>
<li>Item 1G</li>
<!-- ... -->
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Codepen: https://codepen.io/anon/pen/gRowMw
This flashing also happens on the official codepen: https://codepen.io/IamManchanda/pen/XRYWPO
I create simple drop down menu using Foundation 6
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Now i want to on different event ( like other button to hide or show menu.) But in doc there is no method to do this. When I use jquery trigger on click also not working is there any solution for this ?
Attach an event handler to an element (for example a button) and give it a function like hiding the dropdown menu:
$("button").click(function(){$(".dropdown").hide()})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button>
I'm a button
</button>
To allow it to come back again, try $("button").click(function(){$(".dropdown").toggle()})
I'm having a problem with jQuery.
I'm doing a mobile menu using jQuery with sub menus. I need to use the same class to activate all the menus because they will be created dynamically, but when I do this, when I click on a item, all the others show their sub-item too.
To be clear, here's an example:
<ul>
<li class="OpenMenu">Menu 1
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="OpenMenu">Menu 2
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="OpenMenu">Menu 3
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
I need each menu to show its sub-items only when is clicked, but all using the same class. I'm doing the "open" effect of the menus with jQuery.
You can achieve by below code, find() method will drill down to only its child items and find sub items
$(".OpenMenu").click(function(){
$(this).find('.sub-item').show();
});
DEMO (covers only displaying required sub menu)
To view how to hide other sub items and display only current items, use this http://jsfiddle.net/Lboyrqnc/2/
I am trying to create a menu formated by jQuery. The appearance and functionality of level one items is correct, but the subsquent levels are not correctly formatting as a submenu that appears with mouse over. Rather it simply appears, and does not highlight the items as the level one items do with mouse over or hover (neither function appears in my code).
HTML CODE
<div style="width: 25%">
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
jQuery or JavaScript
$(document).ready(function() {
$('#menu').menu({menus: "div"});
});
JS Fiddle
I figured it out. It is a matter of simply deleting in the JavaScript the following from line 6:
{menus: div}