Multiple level selection bar - javascript

I am trying to do a multilevel selection bar. But I am not sure how to create this type of bar. I have tried to use the common navigation bar method, but is doesn't work out the way i wanted.
I want to do something like this, and here is the photo for references:
Any suggestion on how to do it? Or any similar examples? (Please show in fiddle example.)
Thank you!

You want to create a multi-level unordered list, with each list item that has children, containing another unordered list. E.G.
<ul class="parent">
<li>
Category
<ul class="child">
<li>
Sub-category
<ul class="grandchild">
<li>
Sub-sub-category
<ul class="great-grandchild">
<li>
sub-sub-sub category
</li>
</ul>
</li>
</ul>
</li>
<li>
Sub-category 2
</li>
</ul>
</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
then you would hide all of the children/grandchildren etc with css, and show them on parent:hover/active
ul:not('.parent') {
display: none;
}
ul.parent > li:hover > ul,
ul.child > li:hover > ul,
ul.grandchild > li:hover > ul,
ul.great-grandchild > li:hover > ul {
display: block;
}

Related

Simplest JQuery animated navbar with multi-level dropdowns

I'm creating a navbar for a website and I need a very simple way of creating the drop-downs for 2 levels going from the main bar to a drop-down list with a further drop-down level.
I'm using JQuery with no extra plugins.
By "Simplest", I mean with the fewest lines of code and the fewest variables and so the fastest loading time.
I have tried using the hover() event but this does not seem to work.
Here is an example of the HTML:
<div class="menu">
<ul>
<li>Link 1</li>
<li>Link 2
<ul class="sub">
<li>Sub 1
<ul class="sub2">
<li>Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Ideally, hovering over "Link 2" will have the child list slide down, and hovering over "Sub 1" will have the child list slide down next to it.
Also, I'm using percentages for most of the dimensions so it would be really useful if this scaled the same way.
If any more information is needed then ask before down-voting please.
Thanks.
The best jQuery is no jQuery.
.menu input {
position: absolute;
left: -9999px;
}
.menu label {
cursor: pointer;
display: block;
}
.menu label:after {
content: '...';
}
.sub {
display: none;
}
.menu label:hover+input+.sub,
.menu input:checked+.sub,
.sub:hover {
display: block;
}
<div class="menu">
<ul>
<li>Link 1</li>
<li>
<label for="menu-2">Link 2</label>
<input type="checkbox" id="menu-2" />
<ul class="sub">
<li>
<label for="menu-2-1">Sub 1</label>
<input type="checkbox" id="menu-2-1" />
<ul class="sub">
<li>Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Add further CSS as necessary.

DropDown list disappearing before user can the move mouse pointer to it

I have a menu with list items Home and Home 2. When I hover my mouse over "Home"/"Home 2", the dropdown list appears for the item as expected. However, when I am moving my mouse down to the dropdown list, the list disappears immediately and I cant get access to the dropdown menu.
I want the drop down list to be visible while moving my mouse down to the dropdown list preferably using jQuery. However, I cant get it to work.
The HTML Layout for the design is:
<ul class="mega">
<li class="grid">Home
<ul>
<li>DD Item 1</li>
<li>DD Item 2</li>
<li>DD Item 3</li>
</ul>
</li>
<li class="grid">Home2
<div class="dropDownClass"">
<ul>
<li>DD Item 4</li>
<li>DD Item 5</li>
<li>DD Item 6</li>
</ul>
</div>
</li> </ul>
Any help will be much appreciated.
Thanks
I would do something like this.
HTML:
<ul class="mega">
<li class="grid">Home
<ul>
<li>DD Item 1</li>
<li>DD Item 2</li>
<li>DD Item 3</li>
</ul>
</li>
<li class="grid">Home2
<ul>
<li>DD Item 4</li>
<li>DD Item 5</li>
<li>DD Item 6</li>
</ul>
</li>
CSS:
ul{
list-style-type: none;
}
.mega{
width: 200px;
}
.grid{
padding: 10px 15px;
background-color:gray;
color: white;
border: 1px solid black;
}
.grid ul{
display: none;
}
.grid:hover > ul{
display: inline;
}
Check out this fiddle to see it in action.
You need to setup your CSS to resemble this:
ul{list-style: none; padding: 3px; margin:0}
li ul{display:none;}
li.grid:hover ul{display:block}
This will hide the second ul until the li is hovered.
Add this in your document.ready function:
$('.grid1 ul').hide();
$('.grid2 ul').hide();
$('.grid1').on('mouseover', function() {
$('.grid1 ul').show();
$('.grid1').on('mouseout', function() {
$('.grid1 ul').hide();
});
});
$('.grid2').on('mouseover', function() {
$('.grid2 ul').show();
$('.grid2').on('mouseout', function() {
$('.grid2 ul').hide();
});
});
and change the value of the class attributes of the two <li> elements from both being grid to one of them being grid1 and the other being grid2.

efficient way for a selector

i got this structure:
<ul class="depth-one">
<li>Category 1 <span class="do">+</span>
<ul class="depth-two">
<li > Category 1.1 <span class="do">+</span>
<ul class="depth-three">
<li>Category 1.2.1</li>
<li>Category 1.2.2</li>
</ul>
</li>
<li> Category 1.2</li>
<li> Category 1.3</li>
</ul>
</li>
<li> Category 2 <span class="do">+</span>
<ul class="depth-two">
<li>Category 2.1</li>
<li>Category 2.2</li>
<li>Category 2.3</li>
</ul>
</li>
<li>Category 3 <span class="do">+</span>
<ul class="depth-two">
<li>Category 3.1</li>
<li>Category 3.2</li>
<li>Category 3.3</li>
</ul>
</li>
</ul>
with that CSS:
ul{
list-style:none;
padding:0;
margin:0;
}
ul li{
width:220px
}
.depth-one{
}
.depth-two{
display:none;
}
.depth-three{
display:none;
}
.do{
float:right;
font-weight:bold;
color:blue;
cursor:pointer;
}
What I want to do is, whenever I click on the class "do" (the spans) I would like to toggle the closet UL element.
How can I pick the closet UL element to the span using jQuery, so I can use the functions slideUp and slideDown to toggle it?
My Idea was to use the function next(), but I think that there is a more generic way to do it.
Thanks in advance!
Well, the .next() is actually perfect
$('.do').on('click', function() {
$(this).next('ul').slideToggle().find('ul:visible').slideUp(); // According to your comment; hide all the visible successors of type ul.
$(this).text( $(this).text() == '+' ? '-' : '+' ); // Alter the caption (which I guess you want to do as well) :-)
});
EDIT: Added hide for all child ul's to match your comment.
You can use the jQuery .next() method
Example:
$(".do").click(function () {
$(this).next("ul").slideToggle()
});
Try this
$(".do").click(function () {
$(this).next().closest("ul").slideToggle();
});
FIDDLE

Get <li> with child <ul> from <ul> child of <li>

I have a very simple example of a menu here:
<ul id="1">
<li>First</li>
<li>Second
<ul id="2">
<li>Second - 1</li>
<li>Second - 2</li>
<li>Second - 3
<ul id="3">
<li>Aaa</li>
<li>Bbb</li>
<li>Ccc</li>
</ul>
</li>
</ul>
</li>
<li>Third</li>
</ul>
I need to get the <li> that has a child <ul> and that is a child of <ul> who is a child of <li>, and apply a style to it.
I know it sounds complicated, but in the example above I want to get only the <li> that says "Second - 3" which is inside a ul, which is a child of a li and has a child ul. I don't want to get any other <li>s.
I can't do this without getting also the li which says "Second", and I don't want that.
$("li > ul").addClass('whatever');
Use $("li ul li:has(ul)")
e.g:
$(function(){
var items = $("li ul li:has(ul)");
alert(items.html());
});
Working example: http://jsfiddle.net/EXzaa/
Try this:
$("li > ul > li").each(function(){
if ( $(this).find("ul").length > 0){
$(this).css({"font-weight":"bold"});
}
});
Unless I get you wrong this is simple. Try something like this:
$('#3').parent('li').addClass('whatever');
This will select the parent node of the ul element with the id = 3 (only if it is an li element)

sub nav not directing to page (jquery)

I have basic markup for a drop down nav, nested lists.
The user will click on the top nav item, which will open up the sub nav, but my sub nav links aren't working.
It is in a CMS so I must have the links for the placeholder pages there.
Markup:
<ul class="navtop">
<li>Who
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Long Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>What
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Long Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
Javascript:
$(".navtop li").click(function(){
$(this).toggleClass("show");
$(this).siblings(".show").toggleClass("show");
return false;
});
css:
#headernav .navtop li.show ul
{
display: block;
}
I tried adding a 'return true' for $(".navtop li ul li a") but it didn't work.
Suggestions?
Why are you return false to the LI click? I believe that's the problem.
If you take that out, everything should work fine.
If that doesn't work, bear in mind you're attaching the click event to every LI instead of just the top level LIs. Try this instead:
$(".navtop > li").click(function(){
$(this).toggleClass("show");
$(this).siblings(".show").toggleClass("show");
});
Turns out this worked:
$(".navtop > li > a").click(function(){
$(this).parent('li').toggleClass("show");
$(this).parent('li').siblings(".show").toggleClass("show");
return false;
});

Categories

Resources