I have a accordian menu in my asp.net page. The menu is working good but some times it's automatically collapsing. If I reload the page it's some times working but most of the time problem exist. Please find my html and jquery code from jfiddle. Here
$('.loc').click(function () {
$('#sidewrapper ul ul').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
}
});
Edit:
my problem is, If I click one list that would be active others should collapse. My code is working fine. But some time(most of the time!) if I click one list that slide is just showing and collapsing automatically without clicking other list.
Thats because your trying to slide up all the unordered list present on your page, if you can just try to slide up the list which your currently clicking on, it will work fine.
JS CODE:
$('.loc').click(function () {
//$('#sidewrapper ul ul').slideUp();
$(this).closest('li').find('ul').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
}
});
Live Demo # JSFiddle
Related
I found code for a navigation menu on codepen which I would like to use found here
https://codepen.io/Jamwal/pen/OxgymX
(I have to post code to publish the codepen link, so this is the JS for the navigation. Please visit link to see full code)
$(document).ready(function(){
/*mega menu*/
$('#mega-menu-fresher li').on('hover', function(){
if ($(this).siblings().children().hasClass('active-mega-menu')) {
$(this).siblings().children().removeClass('active-mega-menu');
}
$(this).children().addClass('active-mega-menu');
});
$('#mega-menu-fresher').on('mouseleave', function(){
$('#mega-menu-fresher li').children().removeClass('active-mega-menu');
$('#mega-menu-fresher li:first-child').children().addClass('active-mega-menu');
});
$('.navigation-bar ul.menu-list li#mega-menu-parent').on('hover',function(){
$('#mega-menu-fresher').toggle();
});
$('#mega-menu-fresher ul li.vegies').on('mouseenter', function(){
$(this).children('a.active-mega-menu').css('color','#fff');
});
$('#mega-menu-fresher ul li.vegies').on('mouseleave', function(){
$(this).children('a.active-mega-menu').css('color','#000');
});
});
I am only interested in using the dropdown content setup under the "Home" section, but I want to add more menu items with unique content, but following the same format. For example - Home, Page1, Page2, Page3 and have each one with it's own set of sections and links following the same format.
On my end, I have created multiple menu items and unique content similar to what is in "Home". But, when I hover over any of the other navigation items (Page1, Page2, Page3), they all trigger the first "Home" menu dropdown.
How do I trigger the dropdown for Page 1 when I hover over Page 1 menu item, Page2 when hovering over Page2, etc.. Currently all trigger Home. I am not very fluent with JS, and I can't seem to figure it out. If you can help me solve this it would be very very helpful!
Please let me know if you need any more clarification.
You must use $ to enter the function
$(document).ready(function($){
// code here
}
I need to have some of my navbar buttons redirect for instance back to my start page. It seems the smooth-scroller coding needs the menu items to direct to hashtag anchors for the menu items to function and this does work, but when I try to redirect to another page entirely, nothing happens. There is no error and there is no div covering the button.
A solution I saw on here involved adding a statement to the scroller code to disable the need for hashtags for specific external links, but I don't know how to code this and my template's code is dissimilar to the one mentioned in the thread. I would in other words need a code that states to do the regular actions onclick, as long as the button does not have the class "ext-link". See the link below for more specific details. One page theme Bootstrap Navigation Link does not direct to another page, while it works for anchors inside the page
I'm not entirely sure the below is the right code, but it seems like it. How would I rewrite it to include an "if click and not class=ext-link" case so that I could enable external links from my site-root for my navbar?
jQuery('#scrollToContent').click(function(e){
e.preventDefault();
jQuery.scrollTo("#portfolio", 1000, { offset:-(jQuery('#header .top').height()), axis:'y' });
});
jQuery('.nav > li > a').click(function(e){
e.preventDefault();
jQuery.scrollTo(jQuery(this).attr('href'), 400, { offset:-(jQuery('#header .top').height()), axis:'y' });
})
jQuery(window).scroll( function() {
//setHeaderBackground();
});
If I got this right you can modify the second click even handler with this code and it should work:
jQuery('.nav > li > a').click(function(e){
var $this = jQuery(this);
if (!$this.hasClass('ext-link')) {
e.preventDefault();
jQuery.scrollTo($this.attr('href'), 400, { offset:-(jQuery('#header .top').height()), axis:'y' });
}
})
Hope this helps. :)
here's my codepen http://codepen.io/anon/pen/GZWPrj
I know it's been answered few times, but it's too difficult for me to translate it to my code.
So I have a second off-canvas menu which is working as intended.
One thing I want to add is the ability to close this menu, by clicking anywhere outside the off-canvas menu - so clicking inside the canvas.
I found a good working example like
$(window).on("click", function(e) {
if (
$(".wrapper").hasClass("nav-open") &&
!$(e.target).parents(".side-nav").hasClass("side-nav") &&
!$(e.target).hasClass("toggle")
) {
$(".wrapper").removeClass("nav-open");
}
});
here Close off-canvas menu on window click but I'm too dumb to figure out how to implement it to my version of code.
Your html structure is different to the linked example. Below is some code that will work for your example:
$(window).on("click", function(e) {
if (!$(e.target).hasClass('menu-link') && !$(e.target).closest('.nav-stacked').hasClass('active')) {
//Revert the menu
$('#menu').removeClass('active');
//Revert the main content
$('.container').removeClass('active');
}
});
Updated Codepen
I am making a menu and have ran in to some jQuery issues.
I want my toggles to stay up once they have been clicked but instead they are sliding up but then straight back down again.
I have managed so far to have one close and another open simultaneously. Any thoughts?
Here is the current JS :
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function(){
jQuery(".menu-container, .full-menu-container").siblings().find('.food-content').slideUp();
jQuery(this).find('.food-content').slideDown();
});
I have made a JS Fiddle:
https://jsfiddle.net/marmaaduke/uyb4Lzuy/
Just exclude the current item clicked from the slideUp (with not) and use slideToggle for the current item.
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function () {
jQuery(".menu-container, .full-menu-container").siblings().not(this).find('.food-content').slideUp();
jQuery(this).find('.food-content').slideToggle();
});
https://jsfiddle.net/TrueBlueAussie/uyb4Lzuy/1/
I've been struggling to get this code to work for the whole day now..
I have a (content) slider (using the Coda Slider plugin) which contains more tabs then visible by default. Basically what I'm trying to achieve is to make the tabs scrollable, meaning when you arrived at the last visible tab and click next, it should become visible. Exactly the same as the jQuery UI scrollable plugin does (Demo and documentation).
I could switch to this but unfortunately I need to stick with the Coda slider plugin..
I've tried to use the code of the scrollable jQuery UI but without success.
Basically I need to write 2 functions (see my code below), one when you click directly on the tab (which changed to current state) and another one when you click prev/next.
DEMO
Any ideas?
Function when user clicks prev/next
$('.coda-nav-left, .coda-nav-right').click(function(e) {
if ($(this).hasClass('coda-nav-left')) {
$('.coda ul li').remove('.coda ul li:first');
} else {
$('.coda ul li'). remove('.coda ul li:last');
}
});
Function when user clicks on a tab and class changes to current
function current() {
var $current = $('.coda-nav ul li a.current');
if (current) {
//show next/prev tab next to and sibling from current..
}
}