I recently bought a website and am having trouble with editing it to make it fit to my needs. The thing I'm trying to achieve is that making the side navbar toggle to hide the nav list when the window size gets smaller than 800 px. I'm sure this must be a ludicrously easy task to complete for many of you but I'm quite new in playing around with such codes. I hope you can take time to help with it.
Thanks in advance,
Here is the jQuery code needs to be edited.
$(document).ready(function() {
"use strict";
$("nav ul li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("nav ul").slideToggle(200);
});
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("nav ul").show();
} else {
$("nav ul").hide();
}
$("nav ul li").unbind('mouseenter mouseleave');
$("nav ul li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
});
if ($(window).width() < 800) {
$("nav ul li a").click(function() {
"use strict";
$("nav ul").slideToggle(200);
});
}
Related
I have an onepage site with a responsive navigation script. Works great.
When you click on the Navigation button the "subnav" links show up. (These are anchors).
I need to toggle/close the subnav when clicking on a link/anchor.
Made an example here:
https://jsfiddle.net/fourroses666/jcj0kph2/
The script:
$(document).ready(function(){
$('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>');
$('.responsive-nav').on('click',function(){
$('nav ul').slideToggle()
});
$(window).resize(function(){
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display','block');
$('nav ul').hide()
$('.responsive-nav').show()
} else {
$('nav ul li').css('display','inline-block');
$('nav ul').show()
$('.responsive-nav').hide()
}
});
$(window).resize();
});
You may tidy up your code a bit by doing the prepend and attaching the click handler all in one statement as below.
var $nav = $('#nav').
prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
on('click', '.responsive-nav, ul a', function() {
$nav.find('ul').slideToggle()
});
Updated fiddle
Note: I used $nav.find('ul') to target the specific nav in question as opposed to other navs that may exist on the page.
Edit: To make it not disappear when on >= 768, replace $nav.find('ul').slideToggle() with the following.
if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) {
return;
}
$nav.find('ul').slideToggle()
Updated fiddle
I'm assuming you want the Nav to hide when you click on a link?
/* This executes when the nav or li (inside #nav) is pressed */
$('#nav').on('click', 'li, .responsive-nav', function(){
$('nav ul').slideToggle()
});
https://jsfiddle.net/jcj0kph2/1/
I am working on a dot navigation for sections in a one page layout. It currently will go to the sections on click. I also have been able to get the labels and dot change to show on hover. But I am struggling to have the navigation reflect the section when scrolling. I have added bootstrap to jsfiddle external resources and added the recommended body code, but something is still apparently missing. Any assistance would be greatly appreciated.
http://jsfiddle.net/carincamen/ram0Ly92/27/
<body data-spy="scroll" data-target=".Vnav">
$(document).ready(function($){
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
$('.vNav a').hover(function() {
$(this).find('.label').show();
}, function() {
$(this).find('.label').hide();
});
});
With lots of research, I was able to get all the functions working properly. The final key was using parPosition. Here is the final code.
http://jsfiddle.net/carincamen/ram0Ly92/
$(document).ready(function($){
var parPosition = [];
$('.par').each(function() {
parPosition.push($(this).offset().top);
});
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
$('.vNav a').hover(function() {
$(this).find('.label').show();
}, function() {
$(this).find('.label').hide();
});
$(document).scroll(function(){
var position = $(document).scrollTop(),
index;
for (var i=0; i<parPosition.length; i++) {
if (position <= parPosition[i]) {
index = i;
break;
}
}
$('.vNav ul li a').removeClass('active');
$('.vNav ul li a:eq('+index+')').addClass('active');
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(this).addClass('active');
});
});
I'm developing a horizontal menu with submenus. I need to use Javascript to show the submenu when the user hovers over the parent menu.
I wrote an example in JSFiddle, but it appears to fail in FireFox! In Chrome, IE and Safari is running!
Here's the test page:
www.andreferreira.eu5.org
Here's the code:
jsfiddle.net/R2ySL/
<script>
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function() {
$('li', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#FFF", "color":"#debe65"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"", "color":"#FFF"});
}
);
});
</script>
You can make that without changing css rules via javascript just add the following to your stylesheet
#menu li:hover > a {
color: #debe65;
background-color: #FFF;
text-decoration:none;
}
and javascript should looks like
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function () {
$('li', this).stop(true, true).slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
});
});
I was able to achieve a content switcher with the block of code below but I'm looking for a way to simplify it. There are up to 10 or more topics to switch between, how do I simplify it so that the code wouldn't be too large, instead of having a block of code per DIV.
jQuery(document) .ready(function () {
$('.topic-intro:not(:nth-of-type(1))') .hide();
$('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
$('#mid-nav-in ul li a:nth-of-type(1)') .click(function () {
$('.topic-intro:not(:nth-of-type(1))') .hide();
$('.topic-intro:nth-of-type(1)') .show();
$('#mid-nav-in ul li:not(:nth-of-type(1))') .removeClass('active');
$('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
});
});
jQuery(document) .ready(function () {
$('#mid-nav-in ul li:nth-of-type(2) a') .click(function () {
$('.topic-intro:not(:nth-of-type(2))') .hide();
$('.topic-intro:nth-of-type(2)') .show();
$('#mid-nav-in ul li:nth-of-type(2)') .addClass('active');
$('#mid-nav-in ul li:not(:nth-of-type(2))') .removeClass('active');
});
});
It appears from your code that you are using the links in #mid-nav-in to show the corresponding .topic-intro and then hiding all others. It also appears that the code depends on the .topic-intro elements being in the same order as the links in the #mid-nav-in. If this is the case something like to following would work:
$('#mid-nav-in li a').on('click', function(){
// Remove 'active' Class from all <li/>
$('#mid-nav-in li').removeClass('active');
// Add 'active' Class to <li/> of Clicked Link
$(this).closest('li').addClass('active');
// Hide All .topic-intro elements
$('.topic-intro').hide();
// Show .topic-intro element at the Same index of Clicked Link
$('.topic-intro').eq($(this).closest('li').index()).show();
return false; // prevent default action
});
// Automatically Select the First Link
$('#mid-nav-in li a').eq(0).trigger('click');
Here is a fiddle as an example: http://jsfiddle.net/6hd97/2/
I hope this helps.
I'm not that good with js. How do I get this to work with hoverIntent?
$(document).ready(function () {
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp(800);
$(this).next().slideToggle(800);
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
return false;
});
I have try searching around, but just not too sure how to do it. It's basically working now with hover. but how do I add in .hoverIntent into the code.
This is the Fiddle.
I can't just change .hover to .hoverIntent right?
For hoverIntend, see jQuery plugin:
http://cherne.net/brian/resources/jquery.hoverIntent.html
(You just have to download the minified version and import it to your application: http://cherne.net/brian/resources/jquery.hoverIntent.minified.js).
Here the jsFiddle: http://jsfiddle.net/Fmu8Y/1/
Also a helpful link: Delay jquery hover event?
$(document).ready(function () {
$('#nav > li > a').hoverIntent(function(){
if (!$(this).hasClass('active')){
$('#nav li ul').slideUp(800);
$(this).next().slideToggle(800);
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
}, function() {
if ($(this).hasClass('active')){
$(this).next().slideUp(800);
$(this).removeClass('active');
}
});
return false;
});