There is multilevel menu where each <li> contains <a>. On desktop the submenu is opened with :hover and all is good.
On mobile I want to replace :hover with click on the font awesome caret-down icon click to open the submenu. However in below html the <a>
captures the touchstart.
How to capture click on icon that is inside the link and have rest of the link still clickable?
$(document).ready(function () {
$('.hover').bind('touchstart', function (e) {
e.preventDefault();
$(this).parent().toggleClass('hover_effect');
});
});
This is the menu structure:
<li class="hover">WordPress Development<i class="fa fa-caret-down hover" aria-hidden="true"></i>
<ul>
<li>Themes</li>
<li>Plugins</li>
<li class="hover">Custom Post Types<i class="fa fa-caret-down hover" aria-hidden="true"></i>
<ul>
<li class="hover">Portfolios</li>
<li class="hover">Testimonials</li>
</ul>
</li>
<li>Options</li>
</ul>
</li>
So what you need is event or function which will work not on link clicked but on your fontawesome icon. And because in yur navigation you have only one tag, you don't need to provide it id or class, just replace ".hover" to ".hover i":
`
$(document).ready(function () {
$('.hover i').bind('touchstart', function (e) {
e.preventDefault();
$(this).parent().toggleClass('hover_effect');
});
});
`
Related
I have created a burger menu using jQuery. And I have also created another jQuery function that automatically scrolls down the page to the anchor position when a link is clicked. Now what I need the burger menu function to do is close when one of the auto_close class links is clicked.
<nav>
<img class="logo_animated" src="images/popsies.svg">
<ul id="height">
<li class="auto_close">Welcome</li>
<li class="auto_close">Menu</li>
<li class="auto_close">Opening Times</li>
<li id="mob_icons">
<i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
</li>
<li class="mob_contact">Tel: 0113 0000000</li>
<li class="mob_contact">Email: example#yahoo.co.uk</li>
</ul>
</nav>
my burger menu function:
$(document).ready(function(){
$(".burger-button").click(function(){
$("nav").toggleClass("show");
$("body").toggleClass("no_scroll");
});
});
Assuming that the show class reveals the burger menu, remove it if any of the a elements was clicked.
$("#height li a").click(function() {
$(".burger-button").removeClass("show");
});
since you are using toggle you can just add a reference to the .auto_close a links like so:
$(document).ready(function(){
$(".burger-button,.auto_close a").click(function(){
$("nav").toggleClass("show");
$("body").toggleClass("no_scroll");
});
});
the simplest way, if your burger is always open, when one of your links is clicked.
$('.auto_close').click(function(){
$(".burger-button").trigger('click')
})
else if it isnt sure the burger is always open, just remove the classes
$('.auto_close').click(function(){
$("nav").removeClass("show");
$("body").removeClass("no_scroll");
});
My list looks like this;
<ul id="SiteNav" class="Mail New">
<li class="Send">Send</li>
<li class="Insert">
Insert <i class="fa fa-angle-down"></i>
<ul>
<li>Files as attachments</li>
<li>Pictures inline</li>
<li>Share from BananzaCloud</li>
</ul>
</li>
And then my script starts with;
$(document).on('mousedown', function(e) {
On all links clicked on this menu, I want to check if the $(e.target) is a child of id="SiteNav"
You can listen all document mouse down events, and filter those based on event target.
$(document).on('mousedown', function(e) {
if ($(e.target).parents('#SiteNav').length){
//your code
}
})
or a better approach to listen directly on the menu container
$('#SiteNav a').on('mousedown', function(e) {
console.log('test');
})
I have a mobile menu button that has an animation, the class changes on click of the menu and click backs to normal when clicked again. A menu also pops out on click.
I want the animation end state to also click back to normal when I click one of the pop out menu anchor links.
Here is my HTML code:
<div class="o-grid__item">
<button id="menu" class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
</div>enter code here
<nav class="main-menu">
<ul>
<li>
<a href="#welcome">
<i class="fa"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#portfolio">
<i class="fa"></i>
<span class="nav-text">Work</span>
</a>
</li>
<li>
<a href="#about">
<i class="fa"></i>
<span class="nav-text">About</span>
</a>
</li>
<li>
<a href="#contact">
<i class="fa"></i>
<span class="nav-text">Contact</span>
</a>
</li>
</ul>
</nav>
Here is the script I'm using to toggle the menu
$(document).ready(function(){
$(".c-hamburger").click(function(){
$(".main-menu").toggleClass("expand-menu");
});
});
Here is the code for the remove/add class for animating the button.
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
I need to know how to add remove this class for the menu button, on click of one of my list items in my list? any help much appreciated.
to remove a class from an element instead of just toggling it, use the .removeClass extension for the JQuery element selector. Add this to the anchor links
If you are using jquery anyways, then use this for the class toggling logic
$(".main-menu ul li a").click( function(){
e.preventDefault();
$(this).closest("li").toggleClass("is-active").siblings().removeClass("is-active");
});
I have one button and bootstrap tab.
on click of button want to add class active to first tab element.
I'm generating all tab elements dynamically , and want to active only very first tab element on button click.
MyButton
<ul class="nav nav-tabs">
<li>div1<i class="fa"></i></li>
<li>div2 <i class="fa"></i></li>
</ul>
Here is a JSFiddle, clicking the button you have the first tab with class active:
HTML:
<ul class="nav nav-tabs">
<li>div1<i class="fa"></i>
</li>
<li>div2 <i class="fa"></i>
</li>
</ul>
<button class="btn btn-default clickme">Click</button>
JS:
$(document).ready(function () {
$('.clickme').click(function () {
$('.nav-tabs li:first').addClass('active');
});
});
try this:
$('#MyButton').click(function() {
$('.nav-tabs a:first').tab('show');
});
I am using bootstrap and in that I am using side nav to serve collapsible list on the left side of the page. Below is my code.
<ul class="nav navbar-nav side-nav">
<li>
<a class="active" href="#" onclick="loadelementsonpage(); return false" data-toggle="collapse" data-target="#licomp1">
<i class="fa fa-fw fa-arrow-v"></i>Parent1
</a>
<ul id="licomp1" class="collapse">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
</ul>
Instead of fixed <i class="fa fa-fw fa-arrow-v"></i> I want to use toggle plus and minus. As it is shown in code, I am calling one function when parent1 is clicked. But when I try to expand the ul, the function loadelementsonpage() is called everytime. So, I want list to collapse only when that toggle image is clicked. In the same way I want to call loadelementsonpage() only when the outer area of that toggle image is clicked. I changed this data-toggle and data-target to i class, but the problem is the function is still getting called and if I move the i class out of a tag, the style is messed up.
So can someone please shed some light on how to have different click areas on the parent li? One is for collapse and another is for calling function to load right side content page.
P.S: Trying to implement this http://cssmenumaker.com/menu/modern-jquery-accordion-menu kind of side nav list where + or - should be clickable for only expanding and collapsing. Please click on build online in that link to see the side nav. Other area(apart from + and - icons) should act as link href to load the page.
Instead of giving the data-toggle attribute to the anchor, give it to the icon element so that toggle works only for the icon. You can use the classes here for plus and minus and toggle between the classes glyphicon-plus and glyphicon-minus
<a class="active" href="#">
<span data-toggle="collapse" class="glyphicon glyphicon-plus" data-target="#licomp1"></span>Parent1
</a>
$('.side-nav a span').on('click', function () {
$(this).toggleClass('glyphicon-plus glyphicon-minus');
});
Now on click of the anchor you can check if the element is A and if true then only call the custom function loadelementsonpage.
$('.side-nav a').on('click', function (e) {
console.log(e.target.tagName);
if (e.target.tagName == "A") {
loadelementsonpage();
return true;
}
})
function loadelementsonpage() {
alert('Load elements on page');
}
See fiddle
jsbin demo
Remove the inline JS you have in your HTML:
<a class="active" href="#" data-toggle="collapse" data-target="#licomp1">
<i class="fa fa-fw fa-arrow-v"></i>Parent1
</a>
And simply add this to your jQuery:
function loadelementsonpage(){
alert("LOADED ELEMENTS! YIIHA"); // Or whatever goes here
}
$(".side-nav").on("click", "a[data-target]", function(e) {
e.preventDefault(); // Prevent default Browser anchor-click behavior
if( !$(e.target).hasClass("fa") ){ // If the clicked el. target was not `.fa`
// means it was the parent `a` to get the click event. Therefore...
e.stopPropagation(); // prevent the click to propagate
// to underneath layers triggering stuff and...
return loadelementsonpage(); // execute (return) our desired function.
}
});
(Make sure you have it in document.ready function)
What the above does
Proof of concept:
function loadelementsonpage(target) {
// example stuff
$(target).toggle();
}
$(".side-nav").on("click", "a[data-toggle]", function(event) {
event.preventDefault(); // Prevent default Browser anchor-click behavior
var icon = $(event.target).find('.collapseIcon');
if (icon.text() === '+') {
icon.text('-');
} else {
icon.text('+');
}
loadelementsonpage(event.target.getAttribute('data-target'));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav">
<li>
<a class="active" href="#" data-toggle="collapse" data-target="#licomp1">
<span class="collapseIcon">-</span> Parent1
</a>
<ul id="licomp1" class="collapse">
<li>Child1
</li>
<li>Child2
</li>
<li>Child3
</li>
</ul>
</li>
</ul>