I have created a Jquery drop down which adds and removes class when selected.
JSFIDDLE
Inside the hidden menu is a nav bar with links. I am trying to create a function when you select one of the links the name of the link replaces the text on the menu button.
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">sector</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->
For example if the button menu one is selected, the text 'menu 1' replaces the text 'sector'
Add a class to all hidden menu <a> say class="links" and write an event to capture click as below:
$(".links").on('click',function(){
$(this).closest('article').siblings('.no-text-trans').text($(this).text());
});
Updated html
<article class="pane inactive">
<nav>
<ul>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
DEMO
UPDATE
Add an extra data-* attribute to your 'no-text-trans' anchor like one below:
<a class="inline-block btn no-text-trans" data-original="products">products</a>
to store its original text and then write a document click event to capture all other clicks and check whether the target was anchor or its children and if yes do the default action else replace the text, as below:
$(document).on('click',function(e){
//check if targeted element is link or its children
if($(e.target).hasClass('links') || $(e.target).hasClass('no-text-trans'))
return;
//if not replace each anchor with its original text taking from its `data-original` attribute
$('.no-text-trans').each(function(){
$(this).text($(this).data('original')).siblings('article').addClass('inactive');
});
});
Updated DEMO
You can try
$(document).click(function(e) {
var $target = $(e.target),
$ct = $target.closest('.btn-container'),
$pane = $ct.find('.pane.inactive');
$pane.add($('.pane:not(.inactive)')).toggleClass('inactive');
if ($target.closest('.pane a').length) {
$ct.find('.btn').text($target.text())
}
});
.inactive {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">sector</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">products</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li><p>Menu 1</p></li>
<li><p>Menu 2</p></li>
<li><p>Menu 3</p></li>
<li><p>Menu 4</p></li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->
Related
Basically, I want on the click event to remove the class active form the current element and move it the clicked one. I wrote the following code and in the desktop mode it work just fine but in the mobile version it doesn't remove the class from the "old active" element BUT if I click on the already active element the behaviour of my function goes back to normal.
HTML
<header>
<!-- the ul in the is visible untill 1200px, after that the "mobile-mene" make visibile a hamburger icon and the "menu" is invisible untill the hamburger is clicked -->
<nav>
<a href="#home">
<span class="logo">
Ernesto Dovizioso
</span>
</a>
<ul>
<li class="active">home</li>
<li>chi sono</li>
<li>servizi</li>
<li>galleria</li>
<li>contatti</li>
</ul>
<div class="mobile-menu">
<i class="fas fa-bars"></i>
</div>
</nav>
<!-- this is invisible untill the hb menu il clicked -->
<div class="menu">
<ul>
<li class="active">home</li>
<li>chi sono</li>
<li>servizi</li>
<li>galleria</li>
<li>contatti</li>
</ul>
</div>
</header>
JS
const ul = document.querySelectorAll("header ul li");
ul.forEach(li => {
li.addEventListener("click", activeLiChange);
});
function activeLiChange(){
let activeLi = document.querySelector("li.active");
console.log(this.innerHTML);
console.log(activeLi.innerHTML);
if(!this.isEqualNode(activeLi)){
this.classList.add("active");
activeLi.classList.remove("active");
}
}
The reason it isn't working on mobile is because you are using querySelector which only returns the first instance of .active which is in your non-mobile menu. You'll need to use querySelectorAll('li.active') and iterate over the resulting NodeList.
Using your code as is here is a fix:
const ul = document.querySelectorAll("header ul li");
ul.forEach(li => {
li.addEventListener("click", activeLiChange);
});
function activeLiChange(){
const activeLi = document.querySelectorAll("li.active");
activeLi.forEach(li => {
if(!this.isEqualNode(li)){
this.classList.add("active");
li.classList.remove("active")
}
});
}
.active {
color: tomato;
}
<header>
<nav>
<a href="#home">
<span class="logo">
Ernesto Dovizioso
</span>
</a>
<ul>
<li class="active">home</li>
<li>chi sono</li>
<li>servizi</li>
<li>galleria</li>
<li>contatti</li>
</ul>
<div class="mobile-menu">
<i class="fas fa-bars"></i>
</div>
</nav>
<!-- this is invisible untill the hb menu il clicked -->
<div class="menu">
<ul>
<li class="active">home</li>
<li>chi sono</li>
<li>servizi</li>
<li>galleria</li>
<li>contatti</li>
</ul>
</div>
</header>
But you can simplify this by attaching the listener to each ul element instead of every li. Then in your activeLiChange() function use target (the li) and currentTarget (the ul) to address the relevant menu list.
const ul = document.querySelectorAll("header ul");
ul.forEach(list => {
list.addEventListener("click", activeLiChange);
});
function activeLiChange(e){
const activeLi = e.currentTarget.querySelector("li.active");
if(!e.target.isEqualNode(activeLi)){
e.target.classList.add("active");
activeLi.classList.remove("active");
}
}
.active {
color: tomato;
}
<header>
<nav>
<a href="#home">
<span class="logo">
Ernesto Dovizioso
</span>
</a>
<ul>
<li class="active">home</li>
<li>chi sono</li>
<li>servizi</li>
<li>galleria</li>
<li>contatti</li>
</ul>
<div class="mobile-menu">
<i class="fas fa-bars"></i>
</div>
</nav>
<!-- this is invisible untill the hb menu il clicked -->
<div class="menu">
<ul>
<li class="active">home</li>
<li>chi sono</li>
<li>servizi</li>
<li>galleria</li>
<li>contatti</li>
</ul>
</div>
</header>
Actually I have a slider to display my menu, this menu slide from right to left to go to next level and left to right to return, but when I clicked on "return", yes, go back but at the same time return to the actual div, below is my code.
<div class="total">
<div class="slidepanel">
<center>
<button id="sleft">«</button>
<button id="sright">»</button>
</center>
<div class="box-wrapper">
<div class="block" id ="block1">
<ul id="mm-1" class="mm-list visible">
<li><a class="mm-next" href="#" data-target="#parent-1">parent 1</a></li>
<li><a class="mm-next" href="#" data-target="#parent2">parent 2</a></li>
<li><a class="mm-next" href="#" data-target="#parent-3">parent 3</a></li>
</ul>
</div>
<div class="block" id ="block2">
<ul id="women" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i> Return Home</a></li>
<li class="menu-title"><span>title parent 1</span></li>
<li><a class="mm-next" href="#" data-target="#women-features">sub parent 1</a></li>
</ul>
<ul id="men" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i>Return Home</a></li>
<li class="menu-title"><span>title parent 2</span></li>
<li><a class="mm-next" href="#" data-target="#men-features">sub parent 2</a></li>
</ul>
<ul id="hilfiger" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i>Return Home</a></li>
<li>title parent 3</li>
<li>Hombre</li>
</ul>
</div>
<div class="block" id ="block3">
<!-- women -->
<ul id="women-features" class="mm-list subCat-Mobile mm-listView">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#women">
<i class="glyphicon glyphicon-triangle-left"></i>Return previous parent</a></li>
<li class="menu-title"><span>title subcat 1</span></li>
<li>subcat 1</li>
<li>subcat 2</li>
</ul>
<!-- men -->
<ul id="men-features" class="mm-list subCat-Mobile mm-listView">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#men">
<i class="glyphicon glyphicon-triangle-left"></i>Return previous parent</a></li>
<li class="menu-title"><span>title subcat 2</span></li>
<li>subcat 1</li>
</ul>
</div>
</div>
</div>
</div>
my script is the next.
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
$(target).show();
return false;
});
$(document).ready(function() {
var cur = 1;
var max = $(".box-wrapper div").length;
$("#sright, li.backMenu a.mm-next.icon").click(function(){
if (cur == 1 && cur < max)
return false;
cur--;
$(".block").animate({"left": "+=24.9%"}, "slow");
});
$("#sleft, li a.mm-next").click(function(){
if (cur+1 > max)
return false;
cur++;
$(".block").animate({"left": "-=24.9%"}, "slow");
});
});
How can I prevent hide/show the container the same container? you can check the issue when you clicked on the option "return"?
here is my fiddle
If I understand your question correctly, why not just change the class names of your 'Return Home' options to something like mm-previous instead of mm-next? Then you can do the following:
$("#sright, li.backMenu a.mm-previous.icon").click(function(){
$(".block").animate({"left": "+=24.9%"}, "slow")
})
$("#sleft, li a.mm-next").click(function(){
$(".block").animate({"left": "-=24.9%"}, "slow")
})
Fiddle here.
The reason why it is going both ways for you, is that your selections trigger in both cases. So you need to setup a naming convention that helps you distinguish elements better.
I am using Bookblock jQuery plugin as a transition effect between divs (consists of image and text) whenever the user clicks the link on the navigation bar.
Somehow, when the nav is at the top of the div, the links won't work.
<div class="container">
<ul class="bb-custom-grid" id="bb-custom-grid">
<li>
<ul id="services-submenu">
<li class="bb-current">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
<div class="bb-bookblock">
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
</div>
</li>
</ul>
</div>
You need to add class for next, and previous in your
<li class="next"></li><li class="previous"></li>
to render from page 1 to page 5.
Example:
<ul class="services-submen" >
<li class="previous">
<a id="bb-nav-prev" data-toggle="popover" href="#"><i class="fa fa-chevron-left"></i> </a>
</li>
<li class="next">
<a id="bb-nav-next"data-toggle="popover" href="#"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
Can you please tell me how to make a nested list in slide panel in jQuery?
I am able to make a slide panel, but I want to make nested list in left panel in jQuery.
http://jsfiddle.net/qUMbC/31/
can we make nested list in slide panel ?
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth"> Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h2>Menu</h2>
<ul data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu 1</a>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
<!-- submenu -->
</div>
Assuming you want the inner list to remain hidden until its parent is clicked, something like this might give you an idea:
HTML:
<ul id="myList" data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu1</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
CSS:
#myList ul {
display: none;
}
JavaScript:
$('#myList > li').click(function() {
var subList = $(this).children('ul');
if (subList.is(":hidden"))
subList.slideDown(200);
else
subList.slideUp(200);
});
JSFiddle demo
I need a little assistance in modifying the javascript that controlls bootstrap dropdowns.
What i need to happen is when you click on a dropdown, it shows. On the top level that works fine, but if i want to go into a dropdown within a drop down
Example:
<ul>
<li>Dropdown 1
<ul>
<li>Dropdown 2
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
</ul>
</li>
</ul>
When i click on dropdown 1, I can see the list item called dropdown 2 but when i click on it, it closes the whole list item again. When you click on dropdown 2 i need it to show up.
I found a hover method to open the second nested dropdown but i need it to show on click.
And help is much appreciated. Here is a fiddle: http://jsfiddle.net/raDUC/1/
try this:
HTML:
<div class="navbar navbar-fixed-top span2">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="#">Project Name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
Dropdown 1
<ul class="dropdown-menu">
<li class="dropdown dropdown-nested"> Dropdown 2
<ul class="dropdown-menu">
<li>Living and Nonliving things</li>
</ul>
</li>
<li> Another action
</li>
</ul>
</li>
<li> Link
</li>
<li> Link
</li>
<li> Link
</li>
<li class="dropdown"> Dropdown
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
JS:
$(function(){
$('.dropdown-nested').click(function(event){
event.stopPropagation();
var dropdown = $(this).children('.dropdown-menu');
dropdown.toggle();
});
});
Side Note...
I recommend adding the following css to your nav menus in bootstrap:
ul.nav a {
outline: none;
}
it keeps that ugly blue outline from showing up if you click on a main menu item to close it.