I need help in automatically closing a toggle-nav menu on mobile. Right now it doesn't close when a menu is selected.
HTML:
<!-- fixed header -->
<header id="navbar-top">
<div class="pt_navbar">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- start menu-->
<div id="main-nav">
<i class="fa fa-bars"></i> Miracle Trainer
<ul class="pt_nav nav">
<li class="active">
Welcome
</li>
<li>
Training Videos
</li>
<li>
Pricing
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- end menu-->
</div>
</div>
</div>
</div>
</header>
JS:
I need a way to close the toggle-nav when a menu is selected.
$("body").on('click', '#toggle-nav', function(e){
e.preventDefault();
var nav_menu = $("#navbar-top .pt_navbar ul");
if( nav_menu.height() < 10 ){
nav_menu.addClass('open_menu');
}else{
nav_menu.removeClass('open_menu');
}
});
I am currently using this for a slide-out menu:
$('.slideout-menu-toggle, .select').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
right: "0px"
});
} else {
slideoutMenu.animate({
right: -slideoutMenuWidth
}, 400);
}
});
Some adjustments might work for you.
EDIT: with the above working code in mind, I think your first jQuery line should be like this:
$('#toggle-nav, .select').on('click', function(e){
and add the "select" class to your list items.
Related
I have two seperate dropdowns, whose hover states can't be target by css based on the html markup. I tried to solve this by jQuery and I am halfway done. One problem still exists all the time and I am trying to solve this by days now.
If I hover the link of the second dropdown and moves the mouse really fast to the link of the first dropdown and then move the mouse immediately into the container of the displayed first dropdown, this dropdown menu disappears. It seems that my script removes the adding css classes in this case. This situation only appears with fast mouse movement but it drives me crazy. I am unable to figure out why this happens. I include a jsfiddle demo, where you can see the problem by yourself.
jQuery
jQuery(document).ready(function($) {
var $body = $('body'),
$tg_header = $('#main-header'),
$tg_top_menu = $('ul.nav'),
/*$tg_submenu_link = $('.tg-submenu__link'),*/
$tg_submenu_link_tg = $('.tg-submenu__link--tg'),
$tg_submenu_link_abteilungen = $('.tg-submenu__link--abteilungen'),
$tg_submenu = $('.tg-submenu'),
$tg_submenu_tg = $('.tg-submenu__tg'),
$tg_submenu_abteilungen = $('.tg-submenu__abteilungen'),
et_menu_hover_triggered = false;
/* General Hiding Function for first mega menu */
function tg_hide_tg() {
setTimeout( function () {
if ($tg_top_menu.find('.tg-submenu__link--tg:hover').length == 0 && $('.tg-submenu__tg:hover').length == 0) {
$body.removeClass('tg-submenu__tg--active')
};
}, 50);
}
/* General Hiding Function for second mega menu */
function tg_hide_abteilungen() {
setTimeout( function () {
if ($tg_top_menu.find('.tg-submenu__link--abteilungen:hover').length == 0 && $('.tg-submenu__abteilungen:hover').length == 0) {
$body.removeClass('tg-submenu__abteilungen--active')
};
}, 50);
}
/* Mouse Hover Mega Link 1 and Leave Link */
$tg_submenu_link_tg.mouseenter(function() {
$body.addClass('tg-submenu__tg--active');
}).mouseleave(function() {
tg_hide_tg();
});
/* Mouse Leave Mega Menu Container 1 */
$tg_submenu_tg.mouseleave(function () {
setTimeout(function () {
if ($('.tg-submenu__link--tg:hover').length == 0 && $('.tg-submenu__tg:hover').length == 0 ) {
$body.removeClass('tg-submenu__tg--active');
};
},50)
});
/* Mouse Hover Mega Link 2 and Leave Link */
$tg_submenu_link_abteilungen.mouseenter(function() {
$body.addClass('tg-submenu__abteilungen--active');
}).mouseleave(function() {
tg_hide_abteilungen();
})
/* Mouse Leave Mega Menu Container 2 */
$tg_submenu_abteilungen.mouseleave(function () {
setTimeout(function () {
if ($('.tg-submenu__link--abteilungen:hover').length == 0 && $('.tg-submenu__abteilungen:hover').length == 0 ) {
$body.removeClass('tg-submenu__abteilungen--active');
};
},50)
});
});
HTML-Markup
<body>
<header id="main-header">
<div class="container">
<div id="et-top-navigation">
<div class="tg-mainMenu__left">
<nav id="top-menu-nav">
<ul id="top-menu" class="nav">
<li id="menu-item-154" class="tg-submenu__link tg-submenu__link--tg menu-item">MEGA LINK 1</li>
<li id="menu-item-156" class="tg-submenu__link tg-submenu__link--abteilungen menu-item">MEGA LINK 2</li>
<li id="menu-item-166" class="menu-item menu-item">Normal Link 3</li>
</ul>
</nav>
</div><!-- TG-mainMenu__left-->
<div class="tg-mainMenu__right">
<nav id="top-menu-nav">
<ul id="top-menu" class="nav">
<li id="menu-item-154" class="menu-item menu-item">Normal Link 4</li>
<li id="menu-item-154" class="menu-item menu-item">Normal Link 5</li>
<li id="menu-item-154" class="menu-item menu-item">Normal Link 6</li>
</ul>
</nav>
</div> <!-- tg-mainMenu__right -->
</div> <!-- #et-top-navigation -->
<!-- TG Mega 1 -->
<div class="tg-submenu tg-submenu__tg">
<div class="container tg-submenu__content">
<h1>
MEGA MENU 1
</h1>
</div>
</div>
<!-- Abteilungen Mega -->
<div class="tg-submenu tg-submenu__abteilungen">
<div class="container tg-submenu__content">
<h1>
MEGA MENU 2
</h1>
</div>
</div>
</div> <!-- .container -->
</header>
</body>
My fiddle: https://jsfiddle.net/hfammzce/
I dont know why this is happening. But you can use jQuery .show() and .hide() instead of using add/remove class and opacity.
Here is the updated fiddle: https://jsfiddle.net/1dzyszdq/
/* General Hiding Function for first mega menu */
function tg_hide_tg() {
setTimeout( function () {
if ($tg_top_menu.find('.tg-submenu__link--tg:hover').length == 0 && $('.tg-submenu__tg:hover').length == 0) {
$(".tg-submenu__tg").hide();
};
}, 50);
}
/* Mouse Hover Mega Link 1 and Leave Link */
$tg_submenu_link_tg.mouseenter(function() {
$('.tg-submenu__tg').show();
}).mouseleave(function() {
tg_hide_tg();
});
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");
});
Trying to find a way to set a link as active for a navbar when a certain area of the webpage is scrolled to in a one page site.
I have this working for my main menu that is seen by larger resolution displays, however I also have a secondary menu for mobile devices and despite all attempts it seems to never work. I have tried setting both or just setting the mobile by itself to no avail. Any help is appreciated below is a copy of my navbar code along with the java script to set active that I've used.
<!-- Start Header Section -->
<div class="hidden-header"></div>
<header class="clearfix">
<!-- Start Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Start Contact Info -->
<ul class="contact-details">
<li><i class="fa fa-phone"></i> +1 (000) 000 0000</li>
<li><i class="fa fa-envelope-o"></i> email#domain.com</li>
</ul>
<!-- End Contact Info -->
</div>
<!-- .col-md-6 -->
<div class="col-md-6">
<!-- Start Social Links -->
<ul class="social-list">
<li><a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="google itl-tooltip" data-placement="bottom" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<!-- End Social Links -->
</div>
<!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</div>
<!-- .top-bar -->
<!-- End Top Bar -->
<!-- Start Logo & Naviagtion -->
<div class="navbar navbar-default navbar-top">
<div class="container">
<div class="navbar-header">
<!-- Stat Toggle Nav Link For Mobiles -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<!-- End Toggle Nav Link For Mobiles -->
<a class="navbar-brand" href="index.html">
<img alt="AltTxt" src="images/logo.svg">
</a>
</div>
<div id="menu-center" class="navbar-collapse collapse">
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- End Navigation List -->
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="wpb-mobile-menu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- Mobile Menu End -->
</div>
<!-- End Header Logo & Naviagtion -->
</header>
<!-- End Header Section -->
And here is the javascript I've been using to modify the primary menu:
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('#menu-center a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('#menu-center ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
Edit: Here's the new code I'm working with which is working for both menu's but not all sections.
var navItems = jQuery('.menu-item a');
var win = jQuery(window);
var items = jQuery('.item');
navItems.click(function(e){
var item = jQuery(this);
jQuery('.menu-item a.active').removeClass('active');
item.addClass('active');
});
win.scroll(function(e){
jQuery.each(items, function(key, value){
var item = jQuery(value);
console.log(win.scrollTop(), item.offset().top);
if(win.scrollTop() >= item.offset().top){
jQuery('.menu-item a.active').removeClass('active');
var id = item.attr('id');
jQuery.each(navItems, function(key, value){
var navItem = jQuery(value);
if(navItem.attr('href') == '#'+id) navItem.addClass('active');
});
}
});
});
Ok found the error that was causing the new code to not entirely work. Go figure use another persons code and accidentally had a repeat class. For anyone else trying to do this the following works for me:
var navItems = jQuery('.nav-item a');
var win = jQuery(window);
var items = jQuery('.segment');
navItems.click(function(e){
var segment = jQuery(this);
jQuery('.nav-item a.active').removeClass('active');
segment.addClass('active');
});
win.scroll(function(e){
jQuery.each(items, function(key, value){
var segment = jQuery(value);
console.log(win.scrollTop(), segment.offset().top);
if(win.scrollTop() >= segment.offset().top){
jQuery('.nav-item a.active').removeClass('active');
var id = segment.attr('id');
jQuery.each(navItems, function(key, value){
var navItem = jQuery(value);
if(navItem.attr('href') == '#'+id) navItem.addClass('active');
});
}
});
});
Make sure to set any menu item's <li> to class="nav-item" and set any <section> to class="segment"
I have a single page site with content placed inside an accordion. I need to both open and scroll to the accordion item when a user clicks on my nav at the top of the page. I found a couple similar functions, this being the closest (Open JQuery accordion when link with an id of element within the accordion is clicked) but unfortunately the jsfiddle links are no longer working.
Right now I just have thecode to get the accordion working...Need to get the scroll to part in there somehow...Thanks!
Code
var accordion_head = $('.accordion > li > .toggle-bar');
accordion_head.on('click', function (event) {
var $a = $(this);
event.preventDefault();
if ($a.hasClass('active')) {
$a.removeClass('active').siblings('.content-wrapper').slideUp();
}
else {
$a.addClass('active').siblings('.content-wrapper').slideDown();
}
});
.accordion li .content-wrapper {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li id="1">
<a class="toggle-bar" href="#one"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="2">
<a class="toggle-bar" href="#two"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="3">
<a class="toggle-bar" href="#three"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
</ul>
I have a side menu that displays offcanvas. When you click the button, the canvas pushes left and opens the menu. I would like the menu to collapse and not remain open when a link is selected.
Here is the HTMl:
<header>
<nav class="menu" id="theMenu" ng-controller="MenuCtrl">
<div class="menu-wrap">
<a ng-href="/"><img src="/images/zj-logo.png" alt="Zach Janice" class="logo"></a>
<i class="fa fa-times menu-close"></i>
<a ng-href="/">Home</a>
<a ng-href="#/about">About</a>
<a ng-href="#/projects">Projects</a>
<a ng-href="#/services">Services</a>
<a ng-href="#/contact">Contact</a>
</div><!-- menu-wrap -->
<div id="menuToggle" class="active">
<i class="fa fa-bars"></i>
</div><!-- menuToggle -->
</nav>
</header>
jQuery:
(function(jQuery){
// Menu settings
jQuery('#menuToggle, .menu-close').on('click', function(){
jQuery('#menuToggle').toggleClass('active');
jQuery('body').toggleClass('body-push-toleft');
jQuery('#theMenu').toggleClass('menu-open');
});
})(jQuery);
Any Help is greatly appreciated. Thanks in advance.
-Z
Since you're using toggleClass, you can just add .menu-wrap a to your selector which should toggle it off when clicked. The links won't be in view unless the classes are added, so you won't get any mis-clicks.
jQuery('#menuToggle, .menu-close', '.menu-wrap a').on('click', function(){
jQuery('#menuToggle').toggleClass('active');
jQuery('body').toggleClass('body-push-toleft');
jQuery('#theMenu').toggleClass('menu-open');
});