I have created a nested drop down menu like this:
And I have my code for it.
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products <span class="caret">
</span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">Women <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Blouse</li>
<li>Sweater</li>
</ul>
...
</li>
</ul>
</li>
With my Style
.dropdown-submenu {
position: relative;}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;}
However when I click the drop down button, and click the other drop down, the previous ones doesn't close, therefore it will keep overlap. How do I make the list close it up?
One thing you can try is use jQuery to emulate the user "clicking" anywhere else on the body e.g.
$("body").trigger("click");
Related
Here is my current CSS-only dropdown menu html:
<div class="main-nav">
<div class="main-nav-container">
<div class="nav-links">
<ul>
<li class="nav-link"><a>Nav Link</a>
<div class="dropdown">
<ul class="dropdown-list-type">
<li>
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-link"><a>Nav Link</a>
<div class="dropdown">
<ul class="dropdown-list-type">
<li>
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
Relevant CSS:
.dropdown{
position: absolute;
display: flex;
top: 100%;
border-top: solid 1px var(--white-3);
left: 0;
z-index: 8;
opacity: 0;
pointer-events: none;
transition: .3s; }
.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{
transform: translate(0, 0);
opacity: 1;
pointer-events: auto;
}
On mobile, I want the user to be able to open and close the dropdown by tapping on the "Nav Link". Currently, the user can tap to open, but then has to tap somewhere else to close the dropdown. I figure I need Javascript make it do what I want.
My idea:
Use a media query to remove the hover function on mobile
Use Javascript to add a class to the "Nav Links" on mobile
Using this class, with JS, make the Nav Links toggle the dropdown to display/hide
Is this the best way to do it? If so, how do I add a class to the "Nav Links" with Javascript at a specific screen size?
I would like to just use plain Javascript, no Jquery.
Also, I current want to keep the CSS-only hover approach for desktop. So I want the Javascript function only for the mobile view.
I hope that makes sense to everyone. Thank you!
I would like to use an accordion inside a bootstrap dropdown with up direction ("dropup") and make the menu expand upwards.
I managed to setup the "accordion" inside the dropdown as you can see in the code example.
Here is the html
<div class="dropup" id="dropdownUp">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="btnGroup"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroup" id="dmenu">
<a class="dropdown-item keepopen" href="#c_1" data-toggle="collapse">Category 1</a>
<ul class="collapse" id="c_1" data-parent="#dmenu">
<li>Child 1-1</li>
<li>Child 1-2</li>
<li>Child 1-3</li>
</ul>
<a class="dropdown-item keepopen" href="#c_2" data-toggle="collapse">Category 2</a>
<ul class="collapse" id="c_2" data-parent="#dmenu">
<li>Child 2-1</li>
<li>Child 2-2</li>
</ul>
<a class="dropdown-item keepopen" href="#c_3" data-toggle="collapse">Category 3</a>
<ul class="collapse" id="c_3" data-parent="#dmenu">
<li>Child 3-1</li>
</ul>
</div>
</div>
And here is the javascript
$(document).ready(function() {
$('#dropdownUp').on('hide.bs.dropdown', function(e) {
if ($(e.clickEvent.target).hasClass('keepopen')) {
return false;
}
return true;
});
$('#dropdownUp').on('hidden.bs.dropdown', function() {
$('.dropdown-menu .collapse.show').collapse('hide');
});
});
Here the link to the example
https://jsbin.com/cirejudipu/edit?html,js,output
The problem is, when the collapse expands, the dropdown menu goes over the button. Is there a way to make the accordion and the dropdown menu expand upwards? Thank you.
you could use the transform/rotate CSS property to force the element to turn upside down. you may need to use the same property on the contents to flip them right side up. I've used this on animated CSS/JS apps as well as on flipping entire canvas projects sideways.
here is the line of CSS
transform: rotate(180deg);
let me know if that helps
I am trying to create a Bootstrap dropdown menu with two sub-menus. My problem is that the dropdowns are dynamically created after the document is loaded, and don't respond to how I would normally get them to work.
How I would normally go about it would be
$(document).ready(function(){
addItem(); //adds the first instance of the drop down
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(e){
e.stopPropagation();
e.preventDefault();
$(this).siblings().removeClass("open");
$(this).parent().toggleClass("open");
});
});
But this obviously doesn't work for dynamically created content. I saw elsewhere online that this would work for dynamic content;
//still has first instance of dropdown, just later in the doc
$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
e.stopPropagation();
e.preventDefault();
$(this).siblings().removeClass("open");
$(this).parent().toggleClass("open");
});
but for the life of me, I can't figure out why this doesn't work. What I'm seeing is that it is adding the open class to the sub-menu, but toggle the parent menu(not stopping propagation?) So, my question is, why doesn't the second one execute as expected, and how can I make it?
List structure for reference:
<div class="dropdown open">
<button id="select0" class="btn new-btn" data-toggle="dropdown" aria-expanded="true">Select Your Item <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="sub" data-toggle="dropdown">Item 1</a>
<ul class="dropdown-menu sub-menu">
<li><a data-def-cost="6">Item 1.1</a></li>
<li><a data-def-cost="8">Item 1.2</a></li>
</ul>
</li>
<li><a class="sub" data-toggle="dropdown">Item 2</a>
<ul class="dropdown-menu sub-menu">
<li><a data-def-cost="5">Item 2.1</a></li>
<li><a data-def-cost="3">Item 2.2</a></li>
</ul>
</li>
<li><a data-plu="xyz" data-def-cost="8.00">Item 3</a></li>
<li><a data-plu="xyz" data-def-cost="8.00">Item 4</a></li>
<li><a data-plu="xyz" data-def-cost="10.00">Item 5</a></li>
<li class="dropdown-header">Other Items</li>
<li><a data-plu="143">Item 6</a></li>
<li><a data-plu="xyz">Item 7</a></li>
<li><a data-plu="xyz">Item 8</a></li>
</ul>
<input type="text" class="hidden" name="input1">
<input type="text" class="hidden" name="otherinput1">
</div>
$(this).siblings() points to an ul element, however, the .open class is supposed to be added to the parent li : http://getbootstrap.com/javascript/#dropdowns-usage.
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.
Here is a suggestion (inspired by the following code snippet : Multi-Level Dropdowns) :
$(document).ready(function () {
// this variable keeps track of the last open menus
// in order to close them when another link is clicked
// or when the entire dropdown is closed
var open;
$("#my-dropdown").on("hide.bs.dropdown", function () {
if (open) open.removeClass("open");
});
$(".dropdown-submenu > a").on("click", function (e) {
if (open) open.removeClass("open");
open = $(this).parents(".dropdown-submenu");
open.addClass("open");
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="my-dropdown">
<button type="button" data-toggle="dropdown">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li class="dropdown-submenu">
Submenu 1
<ul class="dropdown-menu">
<li>Action 1.1</li>
<li>Action 1.2</li>
</ul>
</li>
<li class="dropdown-submenu">
Submenu 2
<ul class="dropdown-menu">
<li>Action 2.1</li>
<li>Action 2.2</li>
<li class="dropdown-submenu">
Submenu 2.3
<ul class="dropdown-menu">
<li>Action 2.3.1</li>
<li>Action 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unsure as to efficiency of my solution, but I rearranged the order a bit, and forced the parent to stay open
$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
$(this).siblings().removeClass("open");
$(this).parent().addClass("open");
$(this).parent().parent().parent().addClass("open");
e.stopPropagation();
e.preventDefault();
});
and this solved my issue
use one of these below lines.
$(this).siblings('.dropdown-menu').removeClass('open');
$(this).next('.dropdown-menu').removeClass('open');
i'm trying to create a seperate mobile navigation for a website i'm creating. this is the basic html layout right now
<nav class="mobile-navigation">
<ul class="header-mobile">
<li>
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
<li>
<img src="{$WEB_ROOT}/templates/{$template}/img/logo/logo.svg" alt="logo">
</li>
<li>
<ul>
<li><span class="icon icon-nav-account"></span></li>
<li>
<a href="{$WEB_ROOT}/cart.php?a=view">
<span class="icon icon-cart"></span>
<span class="notification-amount">{$cartitemcount}</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="row">
<ul class="nav-mobile">
<li>About us</li>
<li>Services</li>
<li>Domains</li>
<li>Support</li>
</ul>
</div>
with a simple script to toggle the menu
$('.fa-bars').click(function(evt) {
$('.nav-mobile').slideToggle('down');
});
Now i'm trying to create something where if a list item is chosen, the dropdown is displayed like the images below.
first list -->
second list with selected item
anyone an idea how i achieve this?
First of all you should change your arrow's direction and position. or create two of them one on left and one on right then when user clicks on a li toggle class clicked or something else to that li element(if you want others to collapse you should remove clicked class). Then in css
li > ul{
display:none;
}
li .left-arrow{
display:none;
}
li.clicked > .left-arrow{
display:inline;
}
li.clicked > ul{
display: block;
}
should do the trick
I have created a simple accordion with rotating arrows on click. It works fine with one exception :
I have a few collapsible item and if I click the first one it works ok. But clicking the other one do not rotate the previous icon to the default state.
How to make arrow to come back to the default state when clicking the other collapsible item?
$(function() {
$('.arrow-r').on('click', function() {
$(this).find('.fa-angle-down').toggleClass('rotate-element');
})
})
.rotate-element {
#include transform (rotate(180deg));
}
.fa-angle-down {
&.rotate-icon {
position: absolute;
right: 0;
top: 17px;
#include transition (all 150ms ease-in 0s);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header arrow-r"> Menu 1<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a>Item 1</a>
</li>
<li><a>Item 2</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header arrow-r"> Menu 2<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a>Item 1</a>
</li>
<li><a>Item 2</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header"> Menu 3</a>
<div class="collapsible-body">
<ul>
<li><a>Item 1</a>
</li>
<li><a>Item 2</a>
</li>
</ul>
</div>
</li>
Please try this:
$(function() {
$('.arrow-r').on('click', function() {
//Reset all but the current
$('.arrow-r').not(this).find('.fa-angle-down').removeClass('rotate-element');
//Rotate/reset the clicked one
$(this).find('.fa-angle-down').toggleClass('rotate-element');
})
})
If it helps other folks; this combination worked for me: (it's almost identical except I added the ".arrow-r" after the firs .find)
I had 4 main Accordions with multiple Accordions inside, but I only wanted the main arrow on each of the main accordions to animate. (this combination stopped all the inner accordions from triggering the main animation)
$(function() {
$('.arrow-r').on('click', function() {
//Reset all but the current
$('.arrow-r').not(this).find('.arrow-r').removeClass('rotate-element');
//Rotate/reset the clicked one
$(this).find('.fa-angle-down').toggleClass('rotate-element');
})
})
This is my actual code if it helps to see the pattern:
$(function() {
$('.accroordlite').on('click', function() {
//Reset all but the current
$('.accroordlite').not(this).find('.accroordlite').removeClass('down');
//Rotate/reset the clicked one
$(this).find('.spinOnClick').toggleClass('down');
})
})