When I selected dropdown, the selected list did not close quickly it will take a long time. how can solve this
You can try looking at the following JS, CSS and HTML snippets:
\\JS
document.addEventListener("click", toggleDropdown);
function toggleDropdown(event) {
var dropdown = document.getElementById("dropdown");
if (event.target.classList.contains('test')){
dropdown.classList.toggle('show');
} else {
dropdown.classList.remove('show');
}
\\CSS
.dropdownMenu.show {
overflow:visible;
height:200px;
}
\\HTML
<li id="products" class="products">Test
<ul id="dropdown" class="dropdownMenu">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
Related
Im a jquery noob and I cant figure out how to get the next level expanding in a clickable accordion like menu.
Here is the fiddle:
https://jsfiddle.net/hinterseer/gaxm6uqo/29/
Html
<div class="navbar-collapse">
<ul class="nav">
<li class="subMenu">Archive <span class="caret toggle">+</span>
<ul class="subMenu-link">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li class="subMenu"> Archive 2 <span class="caret toggle">+</span>
<ul class="subMenu-link">
<li class="subMenu">Archive 3 <span class="caret toggle">+</span>
<ul class="subMenu-link">
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
css
.subMenu-link {
display: none;
}
.subMenu {
list-style: none;
}
jQyery
(function($) {
$("li.subMenu").unbind().click(function () {
var slideDown = $(this).find(".toggle").text() == "+" ? false : true;
$(".subMenu-link").slideUp();
$(".toggle").text('+');
if (!slideDown) {
$(this).find('.subMenu-link').slideDown();
$(this).find('.toggle').text('-');
}
});
})(jQuery);
I've refactored things a bit further to enable toggling of each list item and their children independently. I've listed the changes below:
change the listener to $(".toggle").on('click', function() {...
change slideDown to const and modify selector $(this).find(".caret:first")...
use .siblings() for slide up/down functionality, $(this).siblings(".subMenu-link").slideUp()
restructure HTML to wrap li text in its own span so that the text triggers the toggle instead of the whole element (and its children)
add cursor: pointer to .toggle for visual cue to user indicating click
Saw this and thought I'd give things a shot even if it was more than asked.
(function($) {
$(".toggle").on('click', function() {
const slideDown = $(this).find(".caret:first").text() == "+" ? false : true;
$(this).siblings(".subMenu-link").slideUp();
$(this).find(".caret").text('+');
if (!slideDown) {
$(this).siblings('.subMenu-link').slideDown();
$(this).find('.caret').text('-');
}
});
})(jQuery);
.subMenu-link {
display: none;
}
.subMenu {
list-style: none;
}
.toggle {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse">
<ul class="nav">
<li class="subMenu"><span class="toggle">Archive <span class="caret">+</span></span>
<ul class="subMenu-link">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li class="subMenu"><span class="toggle">Archive 2 <span class="caret">+</span></span>
<ul class="subMenu-link">
<li class="subMenu"><span class="toggle">Archive 3 <span class="caret">+</span></span>
<ul class="subMenu-link">
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Just add :first in this line:
var slideDown = $(this).find(".toggle:first").text() == "+" ? false : true;
Code seems to be correct, but simply doesn't work.
html of it
<div class="logo5">
<a class="underlogolink" id="expandlogonav" href="whatever.com" >
<div class="underlogotext alcenter">{{settings.underlogotext}}</div>
</a>
</div>
<div class="logo6" id="underlogonav">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>
</div>
and the css
#underlogonav {
height:0px;
overflow-y:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#expandlogonav:hover ~ #underlogonav {
height:auto;
}
Could you please point me to where i went wrong.
#underlogonav is not a sibling of #expandlogonav.
You need to have a selector that actually matches the element.
You could hover over the div containing #expandlogonav instead.
NB: If you fix that, the transition still won't work because you can't transition to auto heights.
I am trying to make a menu with submenus. I wrote my HTML and it looks like:
<nav>
<ul>
<li>Home</li>
<li>Page 1
<ul>
<li>dropdown 1</li>
<li>dropdown 2</li>
<li>submenu
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
I have a stylesheet linked to it, and it looks like:
nav ul {
display:inline-block;
position:relative;
list-style:none;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
For some reason the list is displayed as a block. I tried float:left, and it made no difference.
You have to to put display:inline-block for li elements:
nav li {
display:inline-block;
}
check here the example: http://jsfiddle.net/9y1uzqye/1/
You need to make the individual list items use block display, not the list itself.
I basically have a menu like it shown below in the HTML code, and I want to add "|" before each "li" within the menu to give it the look of (Home | About | Contact). Everything is working, however, I am having a problem of deleting the "|" from the very first "li" in each "ul" within the menu.
So at the moment my menu is shown like: ( | Home | About | Contact), how do I get rid of the "|" that is on the first "li" element?
currnt CSS:
#mainMenu li:before{
content: "|";
color: blue;
}
I have tried to give it a class of "first" and then use li.first {contnet:none} but no hope.
<nav><ul id="mainMenu"><!--Main Menu-->
<li class="first">Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li>
<li>Crisis</li>
</ul></li>
<li>Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul></li>
<li>Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul></li>
<li>Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul></li>
<li>Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul></li>
<li>Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul></li>
<li>Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul></li>
</ul></nav>
Change your css to this: (using sibling selector)
#mainMenu ul li ~ li:before {
content: "|";
}
The above style will be applied to the elements which have previous sibling elements (li ~ li). Hence this styling will not be applied to the first li element because it doesn't have any previous sibling elements.
How about:
#mainMenu ul li:first-child:before{
content: '';
}
You can exclude the first element using :not pseduo selector.
#mainMenu li:not(:first-child):before {
content: "|";
color: blue;
}
Js Fiddle Demo
#mainMenu li.first:before{
content: none;
}
I think this should work.
In page I have that code:
<ul>
<li>Name 1</li>
<li>Name 2</li>
<li>Name 3</li>
<li>Name 4</li>
<li id="beforeInsert"></li>
</ul>
And I try to inject some of these code:
<li>Name 5</li>
<li>Name 6</li>
<li>Name 7</li>
before <li id="beforeInsert"></li> element whith that function:
html.inject("beforeInsert", "before");
But this function just add a first <li> element from my second list, in <ul> block. What I do wrong?
The inject function works on mootools dom elements. so you can do something like this:
var el_before = document.id('beforeInsert');
[5,6,7].each(function(num){
var li = new Element('li').set('html','Name ' + num);
li.inject(el_before,'before');
});
jsfiddle