Since I'm completely new to JavaScript and JQuery, I have some problems creating dropdown menus starting from a HTML document structured in this way:
<h2>Type 1</h2>
<h3>Model 1</h3>
link 1
link 2
link 3
<h3>Model 2</h3>
link 1
link 2
<h2>Type 2</h2>
<h3>Model 1</h3>
link 1
<h3>Model 2</h3>
link 1
link 2
link 3
and so on.
What I want is a first dropdown menu which shows my types, and a second one in which, after a type is selected, the models appear. When the model is selected too, the links should appear below the dropdown menus (also a third dropdown menu with the link texts and a "go" button is OK).
It should be simple but I can't get to it! I've tried different ways but nothing :-(.
Anyone has hint for me?
P.S. Sorry for my bad English.
#Zapp: am I missing something or the code should be so?
<ul>
<li>
<h2>Type 1</h2>
<ul>
<li>
<h3>Model 1</h3>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
</li>
<li>
<h3>Model 2</h3>
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</li>
</ul>
</li>
<li>
<h2>Type 2</h2>
<ul>
<li>
<h3>Model 1</h3>
<ul>
<li>link 1</li>
</ul>
</li>
<li>
<h3>Model 2</h3>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
</li>
</ul>
</li>
</ul>
Anyway, thanks for all the help you are giving me! I'm near the result I want :)
Here is the basic structure. Copy it and try it. Then modify it to what you need:
<style>
li {list-style:none;}
ul li ul li { display:none; }
ul li:hover ul li {display:block; }
</style>
<ul>
<li><h2>Type 1</h2></li>
<li><h3>Model 1</h3></li>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li><h3>Model 2</h3></li>
<li>link 1</li>
<li>link 2</li>
<li><ul><h2>Type 2</h2></li>
<li><h3>Model 1</h3></li>
<li>link 1</li>
<li><h3>Model 2</h3></li>
<li>link 1</li>
<li>link 2</li>
<li>link 3</ul></li>
</ul>
Related
I am trying to make a sub-menu toggle on mobile but it keeps on redirecting to the parent menu link and adding event.preventDefault(); making entire sub-menu links unclickable. Any idea how to make only first .has-childern a link unclickable?
Markup
<div class="menu-container">
<ul class="nav-menu">
<li class="menu item"> Home </li>
<li class="menu-item has-childern"> About
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu-item has-childern"> Services
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu item"> Contact </li>
</ul>
</div>
jQuery
jQuery(document).ready(function(){
jQuery('.menu-container .submenu').hide();
jQuery('.menu-container .has-childern a').click(function() {
event.preventDefault();
jQuery(this).parent().children('.submenu').toggle();
});
});
JsFiddle https://jsfiddle.net/p5fLsvcq/
You code affect all nested children instead just direct child
use '>' for select just a direct first level child in selector:
jQuery('.menu-container .has-childern > a').click(/*...*/)
I have a large number of DIVs on a page. Each being a container for an Unordered List. Above each DIV is a header text which consists of an element with an anchor.
e.g.
<h2><a id="header1" href="#" > Header 1 </a></h3>
<div id="container1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2><a id="header2" href="#" > Header 2 </a></h3>
<div <div id="container2">>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I need to have all these DIVs hidden until the header (anchor) is clicked. If the user clicks header it should toggle show/hide DIV
How can I accomplish this in JQUERY in a way that I can have one onClick function for all the DIVS, possibly using an id to differentiate between divs?
<h2> Header 1 </h3>
function toggleDiv(id) {
}
but in JQUERY ?
SOLVED!!!!
<script>
$(function(){
$('.toggle-link').on('click', function() {
var linkId = $(this).attr('data-div-id');
$('#' + linkId).toggle();
});
});
</script>
<h2> Header 1 </h2>
<div id="div1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2> Header 2 </h2>
<div id="div2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You can use .toggle() in jQuery
toggle() method toggles between hide() and show() for the selected
elements.
function toggleDiv(id) {
$('#'+id).toggle();
}
where id is the parameter you pass
I have a menu with a sub menu, when the sub menu is visible I want to add a class to parent list element.
<ul class="upper-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="parent-li">Item 3
<ul class="lower-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 4</li>
</ul>
Basically, when the "lower-menu" is visible, I want to add another class to the list element "parent-li". Also when the lower-menu is not visible, I want to the remove the class from "parent-li". Is this possible in JQuery?
Thanks
You can do by following jquery script
if($('.lower-menu').is(':visible')){
$(this).parent().addClass("YourClass");
}
You can select the desired element by :visible pseudo class and then assign your class to its parent:
$(".lower-menu:visible").closest('.parent-li').addClass("test");
.test {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="upper-menu">
<li>Item 1</li>
<li>Item 2</li>
<li class="parent-li">Item 3
<ul class="lower-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 4</li>
</ul>
Could someone help me with a javascript that add a hyperlink to a list class? i.e. if class="backTo" then add href="index" to that class.
Current HTML
<div class="secondary-nav">
<ul class="secondary-nav">
<li class="backTo">Campaign</li>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
<li>title 4</li>
</ul>
</div>
So the javascript does this:
<div class="secondary-nav">
<ul class="secondary-nav">
<li class="backTo">Campaign</li>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
<li>title 4</li>
</ul>
</div>
Add this at any place below the navigation, or include it in an external script:
<script>
var backListItem = document.querySelector('.backTo');
backListItem.innerHTML = ''+backListItem.innerHTML+'';
</script>
I am building a mega menu and would like for it to be at lightweight as possible.
HTML:
<div id="menu-wrapper">
<ul class="nav">
<li>Category A
<div class="block">
<h3>Category A</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
<li>Category B
<div class="block">
<h3>Category B</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
<li>Category C
<div class="block">
<h3>Category C</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
</ul>
</div>
Of course there are many more nested onordered lists, but that is your basic heirarchy.
What I'm trying to do is create a jQuery function that will perform a height check:
When you HOVER on a .nav > li > a, the jQuery checks the heights of ALL .sub-columns AND .home that fall under it, and ONLY THOSE, when you roll off, the height check resets, so you can check the next .nav > li > a.
I was recently pointed to THIS possible solution, but it was checking ALL of the .sub-columns and not just the .sub-columns that fall under the .nav > li > a I was hovering over.
I feel that I'm 90% of the way there, but I'm just not pointing or reference the correct parent-child-sibling elements to make it work properly.
Thanks in advance.
If i understood right you want something like the following.
$(".nav > li > a").hover(function(){
var subColumns = $(this).next().find(".sub-column");
});
The next() function gets the div block(nav-column) which contains all the sub-columns for that link. Then i did a find() since it's several elements nested under that.
Here's a fiddle that alerts out the number of sub-columns it finds.