Mobile menu dropdown issue - javascript

Here is my website: http://lowandheavy.com
The problem is that when website opens in mobile the 2nd menu with name "women" not working like menu "men".
It opens the dropdown but redirecting immediately to the submenu 3. Here is the code:
<ul class="nav-menu navigation-tier navigation-tier-primary" data-navigation-tier-primary>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/" >Home</a>
</li>
<li class="dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class="dropbtn navigation-link-primary" href="#">Men</a>
<div class="dropdown-content">
Tanks
T-shirts
</div>
</li>
<li class="dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class="dropbtn navigation-link-primary" href="#">Women</a>
<div class="dropdown-content">
Leggings
Tanks
T-shirts
V-Neck
Unisex Tees
</div>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/hats/" >Hats</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/about/" >About</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/contact-us/" >Contact</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/news-feed/" >News</a>
</li>
</ul>

Lets DO the same on click
/***Add css in file***/
.dropdown.active .dropdown-content {
display: block;
}
/***Add Jquery in file***/
$('.navigation-link-primary').click(function(e){
$('.dropdown').removeClass('active');
$(this).parent().addClass('active');
});

By clicking on the menu name Men then same time click on menu name women you are facing issue that its not staying its redirecting
It is not the issue
It is happening because when you click on menu "Men" It opens a submenu of Men. then same time clicking on woman submenu of woman open and submenu of "Men" close so gap reduce between Men and Woman in directly you clicked upon one of the submenu of "Woman" (Maybe 2nd or 3rd submenu) not clicked upon the "Woman" menu and you are getting redirected.
Check below snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="nav">
<li>Link 1</li>
<li>Link 2 (toggle)
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Link 3 (toggle)
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
If you are directly open "woman" menu then you will not see your issue because at that time Submenu of "Men" menu is not open

$('.dropbtn.navigation-link-primary').click(function(e){
if($(this).hasClass('active')) {
$("a.dropbtn.navigation-link-primary").removeClass('active');
}
else {
$(this).addClass('active');
}
});
#media(max-width:850px) {
.dropdown:hover .dropdown-content {
display: none !important;
}
body.home .main-header-menu .header-navigation-item a {
width: 100% !important;
display: inline-block;
}
a.dropbtn.navigation-link-primary.active+div {
display: block !important;
}
}

Related

How to show/hide submenu with animation in vuejs

I'm new to vuejs and I want to create a menu with below html structure.
<ul>
<li>item 1
<ul class="list-unstyled">
<li>submenu 1-1</li>
<li>submenu 2-1</li>
<li>submenu 3-1</li>
</ul>
</li>
<li>item 2
<ul class="list-unstyled">
<li>submenu 1-2</li>
<li>submenu 2-2</li>
</ul>
</li>
</ul>
submenu's are hidden with css.
I want when I click on item 1 link, the child ul element will be toggled with slide down animation. And also this will happens for item 2 and others.
I wrote a demo for the first submenu. I use the transition component for the animation. you can also visit https://codesandbox.io/s/polished-butterfly-z1zf8?file=/src/App.vue:0-1263
<template>
<div id="app">
<ul>
<li>
item 1
<transition name="slideDown">
<ul class="list-unstyled" v-show="item1Visible">
<li>
<a href>submenu 1-1</a>
</li>
<li>
<a href>submenu 2-1</a>
</li>
<li>
<a href>submenu 3-1</a>
</li>
</ul>
</transition>
</li>
<li>
item 2
<ul class="list-unstyled" v-show="item2Visible">
<li>
<a href>submenu 1-2</a>
</li>
<li>
<a href>submenu 2-2</a>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
item1Visible: true,
item2Visible: true
};
}
};
</script>
<style>
.slideDown-enter-active,
.slideDown-leave-active {
transition: all 0.5s ease-out;
overflow: hidden;
}
.slideDown-enter, .slideDown-leave-to /* .fade-leave-active below version 2.1.8 */ {
height: 0;
}
.slideDown-enter-to,
.slideDown-leave {
height: 50px;
}
</style>

Bootstrap multilevel dropdowns not automaticly closed

I use bootstrap multilevel dropdowns. It works all fine, but I don't know, how can I show only one child at same time.
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">Size6</span></a>
<ul class="dropdown-menu">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size5</a>
<ul class="dropdown-menu">
<li>5555555555555555555555555</li>
<li>5555555555555555555555555</li>
<li>55555555555555555555555</li>
<li>55555555555555555555555</li>
<li>55555555555555555555555555</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size4</span></a>
<ul class="dropdown-menu">
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size3</a>
<ul class="dropdown-menu">
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size2</a>
<ul class="dropdown-menu">
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size1</a>
<ul class="dropdown-menu">
<li>111111111111111111</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Full code example is here.
When I click from Size6 to Size5, it shows both dropdowns. I want close current submenu, when I switch from one dropdown menu to other. Bellow in image I show the problem, when i clicked on all submenus:
Hide the siblings on a.test click.
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
$(this).parent('li').siblings('li').find('ul:visible').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">Size6</span></a>
<ul class="dropdown-menu">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size5</a>
<ul class="dropdown-menu">
<li>5555555555555555555555555</li>
<li>5555555555555555555555555</li>
<li>55555555555555555555555</li>
<li>55555555555555555555555</li>
<li>55555555555555555555555555</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size4</span></a>
<ul class="dropdown-menu">
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size3</a>
<ul class="dropdown-menu">
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size2</a>
<ul class="dropdown-menu">
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size1</a>
<ul class="dropdown-menu">
<li>111111111111111111</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Is this what you were looking for something like this Dropdown with sub-menu and nested sub-menus
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
li.main{
padding:20px;
border:1px solid grey;
display:inline-block
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<li class="dropdown main">
Dropdown A <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li><a>Dropdown 2</a></li>
<li>Dropdown 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown 4
<ul class="dropdown-menu">
<li>Dropdown Submenu 4.1</li>
<li>Dropdown Submenu 4.2</li>
<li>Dropdown Submenu 4.3</li>
<li>Dropdown Submenu 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
Dropdown 5
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.1</li>
<li>Dropdown Submenu 5.2</li>
<li>Dropdown Submenu 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.1</li>
<li>Dropdown Submenu 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.3.1</li>
<li>Dropdown Submenu 5.4.3.2</li>
<li>Dropdown Submenu 5.4.3.3</li>
<li>Dropdown Submenu 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.4.1</li>
<li>Dropdown Submenu 5.4.4.2</li>
<li>Dropdown Submenu 5.4.4.3</li>
<li>Dropdown Submenu 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown main">
Dropdown B <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="dropdown dropdown-submenu">
Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</body>
</html>

How to override hover event to click event for CSS dropdown menu

I am attempting to create a pure CSS multi-level dropdown menu. I got it to work for hovering. However, I only want it to hover in the submenu, but the main menu item to be clickable to expand the menu. I tried to add jquery to override the hovering to clickable action, but it's not working. What am I doing wrong?
<nav class="nav">
Home
<li class="menu-item subItem">Menu1<b class="down-arrow"></b>
<ul class="submenu">
<li class="menu-item">Menu Item 1</li>
<li class="menu-item subItem">Submenu <b class="right-arrow"></b></span>
<ul class="submenu">
<li class="menu-item">Sub1</li>
<li class="menu-item">Sub2</li>
<li class="menu-item subItem">3rd Level <b class="right-arrow"></b></span>
<ul class="submenu">
<li class="menu-item">Level1</li>
<li class="menu-item">Level2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<script>
$(function() {
$('.menu-item').on('click',function(e) {
e.preventDefault();
$('.submenu').show();
});
});
</script>

Nested collapse

I'm trying to collapse a nested menu with jQuery. I read this answer and, to me, it appears to be similar to my solution. The problem is that mine doesn't work.
What I think I'm saying with my JavaScript code is: "hey, when a user clicks on a li that is the parent of a ul.submenu, get its ul.submenu children and attach the slideToggle only to it". But, as you can see from the snippet, it closes also the parent ul.submenu and I can't understand why.
$(document).ready(function () {
$('.submenu').hide();
$('.submenu').parent('li').click(function () {
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
You want to stop the click event from bubbling up the DOM and triggering the click handler on the parent. Use .stopPropagation() for that:
$(document).ready(function() {
$('.submenu').hide();
$('.submenu').parent('li').click(function(e) {
e.stopPropagation()
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>

Twitter Bootstrap Broader Dropdown Menu with 2 or more Div

I want to design menu like below in picture :-
But I am not able to do it, here is my try :- http://jsfiddle.net/BqqqE/5/
Code Below :-
<div class="dropdown">
<a class="dropdown-toggle btn btn-danger" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu"><a tabindex="-1" href="index.php">Project</a>
<div class="dropdown-menu">
<div class="container">
<div class="row-fluid">
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Is above Menu Possible with Bootstrap ?
Thanks
Take a look at this JSFiddle. I've added class dropdown-menu-tworows. You can set width for submenu but it's not necessary.
.dropdown-menu-tworows .span6 {
width: 49%;
display: inline-block;
}
Is this what you wanted?

Categories