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.
Related
I have created responsive navbar with bootstrap but the problem is when i click on a single dropdown link all dropdown links open at the same time.
HTML
<div id="inner-navbar">
<nav>
<ul>
<li>Home</li>
<li>Template</li>
<li class="inner-link" data-target="1">Schedule <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li>People</li>
<li class="inner-link">Location <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li class="inner-link">Admin <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li class="inner-link">Reports <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
</ul>
</nav>
</div>
i think the issue is with the jquery class i have called it with every single dropdown.
jquery
$(document).ready(function(){
$(".inner-link").click(function(){
$(".inner-bar").toggle();
});
});
it is working fine i have almost completed it but it stuck at where i think is an issue for user.if user to select a dropdown, all dropdown will open at the same time.
I know there are lot's of different navbar out there to use but i wanted to learn by my own because im new to jquery and in learning phase of it.
Try
$(this) will point to the current element.
$(this).find(".inner-bar") find the element with class .inner-bar inside the current element and perform the toggle operation.
$(document).ready(function(){
$(".inner-link").click(function(){
$(this).find(".inner-bar").toggle();
});
});
Docs :- https://api.jquery.com/
Try with this and .find() to refer the current drop dwon
$(this).find(".inner-bar").toggle();
$(document).ready(function(){
$(".inner-link").click(function(){
$(this).find(".inner-bar").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div id="inner-navbar">
<nav>
<ul>
<li>Home</li>
<li>Template</li>
<li class="inner-link" data-target="1">Schedule <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li>People</li>
<li class="inner-link">Location <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li class="inner-link">Admin <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
<li class="inner-link">Reports <i class="fas fa-caret-down"></i>
<ul class="inner-bar">
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</li>
</ul>
</nav>
</div>
This code is written for navbar using Uikit Css Framework.In navbar there is one dropdown list. when i clicked dropdown list it only show the content of middle section.but i want to show that dropdown list content with full container.
What would be the best possible method to show the dropdown list with full container.
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-card uk-card-default " style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-container uk-container-expand uk-box-shadow-medium" id="nav-wrapper">
<nav class="uk-navbar-container" uk-navbar id="navbar">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle uk-hidden#l" href="#" uk-toggle="target: #offcanvas-nav">
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left"></span>
</a>
<ul id="menu1" class="uk-navbar-nav">
<a class="uk-navbar-item uk-logo" href="#"><img src="{{asset('img/logo.png')}}" alt=""></a>
<li class="uk-active">link</li>
<!-- This is the dropdown -->
<li class=""><a class="menu-full-width" href="#">dropdown</a>
<div class=" uk-dropdown uk-dropdown-navbar uk-dropdown-width-4" data-uk-dropdown="{justify:'#menu2'}">
<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar uk-container uk-container-expand">
<li class="uk-parent">Showcase Grid
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Showcase Masonry
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Portfolio Grid
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Portfolio Mosaic
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- end dropdown -->
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</nav>
</div>
</div>
The important part here is the uk-drop="boundary: #navbar;".
You can find the example with justified dropdown in the docs.
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet" />
<nav class="uk-navbar-container" uk-navbar id="navbar">
<div class="uk-navbar-left">
<ul id="menu1" class="uk-navbar-nav">
<li class="uk-active">link</li>
<!-- This is the dropdown -->
<li class="">
<a class="menu-full-width" href="#">dropdown</a>
<div class="uk-dropdown uk-dropdown-navbar" uk-drop="boundary: #navbar; boundary-align: true; pos: bottom-justify;">
<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar uk-container uk-container-expand">
<li class="uk-parent">Showcase Grid
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Showcase Masonry
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Portfolio Grid
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Portfolio Mosaic
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- end dropdown -->
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</nav>
I have tried this CSS, but when you click on the fist link the other two will move at the bottom, same for the other links.
I have tried to change the initial code and put the links in one class, but I don't know that much JavaScript, so probably my modifications are very wrong.
How can I move the links on one line ? So that when you click on one link the toggled list appears without affecting the link position, so all the links will still be on one line.
HTML
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Javascript
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
CSS
.dropdown{
display:inline-block;
}
Initial code
http://jsfiddle.net/6t6BP/4/
Modified by me code
https://jsfiddle.net/Lavi2/yyfhrss0/
One solution would be to make the dropdown-container to not push elements down. You can do that, in your case, with position:absolute and position it relative to the link that triggers it.
P.S. that is not just javascript, it's jQuery.
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
position:relative
}
.dropdown-container {
position:absolute;
left:0;
top:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Full code example
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
vertical-align:top;
}
.dropdown-container ul{
list-style:none;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
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>
I'm trying to set this up so that "Click me 1" only shows "Expand me 1", "Click me 2" only shows "Expand me 2", etc. What I have now makes each one toggle everything. I think I need to use $(this) but nowhere I've put it has worked.
Markup
<div class="submission">
<ul>
<li class="click">Click me 1</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 1</li>
</ul>
</div>
<div class="submission">
<ul>
<li class="click">Click me 2</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 2</li>
</ul>
</div>
<div class="submission">
<ul>
<li class="click">Click me 3</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 3</li>
</ul>
</div>
Jquery
$(document).ready(function() {
$(".submission").find(".click").click(function() {
$(".expand").slideToggle();
});
});
CSS
.expand {display: none;}
http://jsfiddle.net/4k9uukL8/
You can use .parent() selector
FIDDLE
$(document).ready(function() {
$(".submission .click").click(function() {
$(this).parent().find(".expand").slideToggle();
});
});
More information in documentation
You want to target one of the following sibling element so
$(document).ready(function() {
$(".submission .click").click(function() {
$(this).nextAll(".expand").slideToggle();
//or $(this).siblings(".expand").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="submission">
<ul>
<li class="click">Click me 1</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 1</li>
</ul>
</div>
<div class="submission">
<ul>
<li class="click">Click me 2</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 2</li>
</ul>
</div>
<div class="submission">
<ul>
<li class="click">Click me 3</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 3</li>
</ul>
</div>
Try utilizing Next Siblings Selector ("prev ~ siblings") selector $("~ .expand", this) within click handler to call .slideToggle()
$(".submission .click").click(function() {
$("~ .expand", this).slideToggle()
})
.expand {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="submission">
<ul>
<li class="click">Click me 1</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 1</li>
</ul>
</div>
<div class="submission">
<ul>
<li class="click">Click me 2</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 2</li>
</ul>
</div>
<div class="submission">
<ul>
<li class="click">Click me 3</li>
<li>foo</li>
<li>bar</li>
<li class="expand">Expand me 3</li>
</ul>
</div>
Pekka's answer is probably the simplest (and therefore best).
An alternate could be to use "closest" when not addressing the immediate parent.
$(this).closest(".submission").find(".expand").slideToggle();