So I have a navigation bar with links and sub links. I currently have my links and sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children().slideToggle(300);
});
}
$(document).ready(main);
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
It should work:
function main() {
$('.sub-elements').hide();
$('.main-elements').on('click', function () {
$(this).find('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
Maybe you forget to add the children class in jQuery
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
Related
Usually, by default, I always saw that on mobile device clicking on the parent menu reveals submenu only and then if you click it again it opens the URL. But not on this site I'm working on, any ideas why it might override the default browser function and opens directly the parent link after the first click?
<nav id="nav">
<ul id="menu-primary-navigation" class="menu">
<li id="menu-item-30">Services
<ul class="sub-menu">
<li id="menu-item-4216" class="">Service 1</li>
<li id="menu-item-4215" class="">Service 2</li>
<li id="menu-item-4217" class="">Service 3</li>
</ul>
</li>
<li id="menu-item-1125" class="">About</li>
<li id="menu-item-1139" class="">Events</li>
</ul></nav>
It is hard to say whitout more information, but it will try next changes:
<nav id="nav">
<ul id="menu-primary-navigation" class="menu">
<li id="menu-item-30"><a>Services</a>
<ul class="sub-menu">
<li id="menu-item-4216" class="">Service 1</li>
<li id="menu-item-4215" class="">Service 2</li>
<li id="menu-item-4217" class="">Service 3</li>
</ul>
</li>
<li id="menu-item-1125" class="">About</li>
<li id="menu-item-1139" class="">Events</li>
</ul></nav>
I'm trying to create a select like this(it is a drop down select input) :
as you can see when the select opens it display main categories which by clicking on each category the sub categories will be shown . also you can click on the tick to choose the current category and sub category.
Also , when sub categories of a category is being displayed , there is two item at the top. one is the tick and the other one is back which by clicking on it , you could see the main categories again.
How can create selects like that?
Thanks in advance
this is the html part that you can use to have a menu and sub-menu.
<body class="no-js">
<nav id="topNav">
<ul>
<li>Nav Link 1</li>
<li>
Nav Link 2
<ul>
<li>Sub Nav Link 1</li>
<li>Sub Nav Link 2</li>
<li>Sub Nav Link 3</li>
<li>Sub Nav Link 4</li>
<li class="last">Sub Nav Link 5</li>
</ul>
</li>
<li>Nav Link 3</li>
<li>Nav Link 4</li>
<li>Nav Link 5</li>
</ul>
</nav>
</body>
$('li').on('click', function(){
$('li').not(this).each(function(){
$(this).children('ul').addClass('hide');
});
$(this).children('ul').removeClass('hide');
});
Help me, please! I got several hours on this and I can't figure how to solve it. The code above it's for a horizontal multi-level menu. On click shows a sub-menu and hide all the other sub-menus, everything works fine until this point.
The problem comes when I need to open a sub-menu nested to a sub-menu. The code hide all the elements and show only de clicked sub-menu; hide all the elements including the parent of the sub-menu so the clicked sub-menu is not showed.
How to show and hide the nested sub-menu??? I hope somebody can help me and thanks a lot in advance. Here is the simplify menu HTML code, the classic nested unordered lists.
Problem example: JSFiddle
<ul class="menu">
<li>Item
<ul class="sub-menu"><!--This works fine-->
<li>Item
<ul class="nested sub-menu"><!--Here is the problem-->
<li>Item
<ul class="nested sub-menu"><!--Here is the problem too-->
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Item
<ul class="sub-menu"><!--This works fine-->
<li>Item
<ul class="nested sub-menu"><!--Here is the problem-->
<li>Item
<ul class="nested sub-menu"><!--Here is the problem too-->
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
You need to stop propagation. Without that all parents will fire the click event.
$('li').on('click', function(e) {
$(this).children('ul').toggle();
$(this).siblings('li').find('ul').hide();
e.stopPropagation();
});
.sub-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Item
<ul class="sub-menu">
<!--This works fine-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem too-->
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Item
<ul class="sub-menu">
<!--This works fine-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem too-->
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I can read your html structure but i don't see how your css is, otherwise here is the sample i made for you i'm using BEM methodology .
Code: example
idea is simple add display: none; on nested item , on click item add class for example active and show nested item display: block;
on this example if you need more nested item simple add ul with class primary-nav__subnav inside ~__subnav
<ul class="primary-nav__subnav">
Nested 1
<ul class="primary-nav__subnav">
Nested 2
</ul>
</ul>
Does anybody knows how to resolve the issue in Amazon plugin when I try to put it on my site and put on the third level a checkbox or click somewhere on the div, the level div fades out. how to make the div stay?
This is the plugin
Amazon Plugin
<nav id="mysidebarmenu" class="amazonmenu">
<ul>
<li>Item 1</li>
<li>Folder 0
<div>
<p>Browse our spring collection of useful webmaster tools and resources! Everything from JavaScript, CSS to PHP are covered!</p>
<ul>
<li>JavaScript Kit</li>
<li>CSS Drive</li>
<li>CSS Library
<li>Webmaster Tools
<div>
<p><h3>Image Optimizer</h3>
Use this tool to easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible.
</p>
<p><h3>FavIcon Generator</h3>
Generate a favicon using any regular image with this tool.
</p>
<p><h3>Animated Gif Generator</h3>
Animated Gif Generator lets you easily create an animated gif by uploading a series of still images!
</p>
</div>
<li>PHP For the Absolute Beginner</li>
</ul>
</div>
</li>
<li>Folder 1
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3
<ul>
<li>Sub Item 1.3.1</li>
<li>Sub Item 1.3.2</li>
<li>Sub Item 1.3.3</li>
</ul>
</li>
<li>Sub Item 1.4</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3</li>
<li>Sub Item 1.4</li>
</ul>
</li>
<li>Item 3</li>
<li>Folder 2
<ul>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
</ul>
</li>
<li>Item 4</li>
</ul>
JS
jQuery(function(){
amazonmenu.init({
menuid: 'mysidebarmenu'
})
})
I'm trying to have a simple dropdown with product listings which will filter the products on click, so the dropdown is Onclick.
Issue -
I have multiple products in a category, i'm trying to have a dropdown which will collapse other products which are not used on click.
The current script i have collapses everything and opens it up again and not able to attach a class to it to show downarrow when opened.
It is way too buggy is there any other way to achieve this or a tutorial / script or something.
Here is the jsfiddle.
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
i dont have specific solution for your problem,
but still you can take a look at this Select2 jquery plugin, you can have many facilities like searching and displaying image, just check this link Select2 - DropDown
hope this will help you...
please look below link
http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/
You can check demo over there for multilevel dropdown menu.
Changed a little bit of code(html and script) from your jsfiddle see if that is what you are looking for
http://jsfiddle.net/nextg_tech/4N3wA/
script
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
html
<div class="container">
<ul class="productfilters topnav">
<li>All</li>
<li class="hasarrow">
Product 1
<ul class="ddone">
<li class="hasarrow">Sub Product 1
<ul class="ddone">
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
</ul>
</li>
<li>Sub Product 2</li>
<li>Sub Product 3</li>
</ul>
</li>
<li class="hasarrow">Product 2
<ul class="ddone">
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
</ul>
</li>
</ul>
</div>