I've created a navigation bar with sub menus, using Bootstrap v4.2.1. Hovering OnClick are implemented through Javascript. Problem is whenever I load the page and hover over a submenu item, the menu opens up but appears right below the item. When I click the menu, it disappears and reappears on the right side of the submenu. Ideally, I'd want to have the submenu appear at the right side of the dropdown menu, not appear at the bottom upon initial hover. I'm suspecting that there might be something I might've missed in my Javascript but I could be wrong. Any help/advice would be greatly appreciated.
Here's my fiddle: https://jsfiddle.net/fzev07tb/
//Script to toggle navbar dropdown
$(document).ready(function() {
$('.navbar .dropdown-item').on('click', function(e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({
"top": -999,
"left": -999
});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({
"top": $el[0].offsetTop,
"left": $parent.outerWidth() - 4
});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function() {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
//Script for OnHover OnClick NavBar Item -->
jQuery(function($) {
if ($(window).width() > 769) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
});
Related
I am using appme theme on wordpress and everything is working good except for the active menu.
https://themes.athenadesignstudio.com/?theme=appme_wp
if you click on the link and click on the menu, you can see that it's not syncing with what it is clicked. For ex: if you click on feature, home will be active, if you click on screen shot, feature will be active and behaves different on different browser as well.
In the main.js file of appme folder, go to this line and as you can see the scrollTop: h-offset, so for a work around, i have changed it to scrollTop: (h-offset)+10. This will scroll the section a little more and we are set like this untill fix.
//Menu
menu:function() {
//Slick nav
jQuery(".main-navigation").slicknav({
prependTo:"#responsive-menu",
label:"",
closeOnClick:true
});
//Submenu
jQuery(".nav li").on("mouseenter", function() {
jQuery(this).children("ul").stop().slideDown(200);
});
jQuery(".nav li").on("mouseleave", function() {
jQuery(this).children("ul").stop().slideUp(200);
});
//Header menu
jQuery(document).on("click", "#navigation ul li a, #responsive-menu ul li a", function() {
try {
var id = jQuery(this).attr("href");
var h = parseFloat(jQuery(id).offset().top);
var offset = parseInt(jQuery("body").data("offset"), 10);
jQuery("body, html").stop().animate({
scrollTop:(h-offset)+10
}, 800);
return false;
} catch(err) {}
});
//Sticky navigation
if (AppMeOptions.navigation==="sticky") {
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop()>200) {
jQuery(".navbar").addClass("sticky-header");
} else {
jQuery(".navbar").removeClass("sticky-header");
}
});
}
},
I have been working on navigation bar and the strangest issue is occurring.
Please use the JSFiddle link to see what I mean.
To duplicate the error:
Run the code when the desktop view is active i.e. when the navigation links are in a line.
Then resize the screen till the "click me" is displayed.
Then press it.
Now run the code while you see the "click me" and press it again.
JS information
jQuery(document).ready(function($) {
// UserCP
$('.rotate').on('click', function() {
$(this).toggleClass("down");
});
$('.nav-start').on('click', function() {
$("#nav2").removeClass("hidden");
$('#nav2 li a').stop().slideToggle('100');
return false;
});
$(document).ready(function() {
$('#nav2 li a').stop().slideToggle('100');
});
$('body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length) {
if ($('#nav2 li a').is(":visible")) {
$('html, body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
};
};
});
});
FIXED - UPDATED JSFiddle! Thanks #Louys Patrice Bessette #Titus #Rick
You are using two click events on this "Click me" li...
(One on .navstart and one on .rotate)
It may not be an issue, but this make the code harder to read.
Then, when you slideToggle(), if you want the submenu to slide down, it has to be hidden.
Because, since you remove the hidden class (probably usefull on load), the submenu is visible.
A Toggle hides it.
I simplified your script to this.
Have a look at this updated Fiddle.
$(document).ready(function() {
// Show submenu on "Click me"
$('.nav-start').on('click', function() {
$('.rotate').toggleClass("down");
$("#nav2").removeClass("hidden");
var subNav = $('#nav2 li a');
if(subNav.css("display")=="block"){
subNav.stop().slideUp('100');
}else{
subNav.stop().slideDown('100');
}
return false;
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
// Hide submenu on document click
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
$('#nav2 li a').stop().slideUp('100');
};
});
});
EDIT: I'm not trying to be pushy but if someone knows how to help me with this, I'd really appreciate it.
www.kwpei.com is the site I'm working on, the issue I'm having is with the responsive menu not closing after a menu or submenu item is chosen. Ive been told the place to make the change needed is in global.js which I've included here in its current state. Could someone show me how to fix the issue?
jQuery(function( $ ){
$('.site-header').addClass('front-page-header');
$('.footer-widgets').prop('id', 'footer-widgets');
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 800) {
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});
$(".responsive-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});
// Local Scroll Speed
$.localScroll({
duration: 750
});
// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;
$(window).scroll(function(){
if ($(document).scrollTop() > abovenavHeight){
$('.nav-primary').addClass('fixed');
} else {
$('.nav-primary').removeClass('fixed');
}
});
});
You can slide up the menu again on clicking any of the menu items. Try adding this bit of jquery:
$('.menu-item a').click(function () {
$('.responsive-menu').stop(true, true).slideUp();
});
EDIT:
$('.menu-item a').click(function () {
if ($(window).width() < 800) {
$('.sub-menu').stop(true, true).slideUp();
$('.responsive-menu').stop(true, true).slideUp();
$('.menu-item').removeClass('menu-open');
}
});
If 800px is your breakpoint in the media query
I have a little function that makes my headerbar class fixed after i click on the menu button.
It works but when i click on the button again the headerbar stays fixed.
Here is my javascript:
// menu animation
$(window).load(function() {
$('.menuBtn').click(function(e) {
e.preventDefault();
(this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
$('nav').slideToggle();
});
});
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
This code makes the headerbar class fixed:
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
So basically I want it to change back to normal when I click the button again.
Try this:
JavaScript
$(function () {
$('.menuBtn').click(function (e) {
e.preventDefault();
$(this).toggleClass('is-active').toggleClass('fixed-position');
$('.headerBarm').toggleClass('fixed-position');
$('nav').slideToggle();
});
});
CSS
.fixed-position {
position: fixed;
}
I am using a jQuery Accordion for my sidebar navigation. Currently I have 2 links which both have 'children' beneath them.
Here is my jsFiddle: http://jsfiddle.net/6Eh8C/
You'll notice that when you click 'About Us', the Gallery closes. This shouldn't happen. Gallery should only close when I click 'Gallery'.
How do I fix this?
Here is my jQuery:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
$('.slides_item').children('div').css('background','#ededed')
});
Many thanks for any pointers :-)
I think you just want to remove one line:
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
// Remove this line, you don't want to slide up other uls.
// $(this).siblings('ul').slideUp("slow");
});
Example: http://jsfiddle.net/6Eh8C/1/