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
Related
When in mobile view, the hamburger menu appears and the user clicks the icon it opens, when you click the close icon. its closes.
I'm attempting to allow users to click outside of the menu to close the menu. Unfortunately the JS code provided above, Allows users to click Anywhere on the site, to Open & close the menu. I Don't want this, I just want the menu to be closed when a user clicks outside of it.
How can I achieve this? Any help is appreciated.
document.querySelector('#bg-close').addEventListener('click', function() {
document.querySelector('.nav').classList.toggle('nav-container')
})
The issue I'm attempting to solve is on my website
Summary:
Hamburger menu is being activated with a click anywhere on the site.
You can implement something like below:
It uses an if statement to see if the .nav-open class is active, in case is not there, nothing will happen. In opposite case it will be removed.
$('#bg-close').on('click', function() {
let nav = $('#navElement-id');
if(nav.attr('class') == 'nav-container nav-open'){
nav.attr('class','nav-container');
}
});
*{padding:0;margin:0}
#bg-close{height:100vh;width:100vw;background-color:blue}
.nav-container{color:blue; padding:10px;position:absolute;top:10px; left:0;}
.nav-open{color:black!important;background-color:grey;width:300px;height:200px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg-close">
</div>
<div id="navElement-id" class="nav-container nav-open">Click on the blue</div>
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 have an issue with jQuery Popup Drop down. My Issue is When I click the drop down its Opening . Under the Drop Down there are parent and child lists . But when I click on any of the child list its sliding upwards. Again when i try to open the Drop down for the First time is not getting slide down. But second time its getting Slide down. Can anyone Help me out plz ? Here is My Code :
<script>
function test()
{
jQuery("div[class^='dropDownButton']").slideUp();
}
function test1()
{
jQuery("div[class^='dropDownButton']").slideDown();
}
I developed a sample website . But i need to add a feature that when i click and drag horizontally the page will turn to next page ( menu2 page on menulist ). It should happen on click and drag. When i drag reverse (left to right) page turns to previous. and also on clicking in menu button, when i click to menu 4 . the page turns to forth page on horizontal move just like on mobile devices moving on swap.
I dont know how to implement it.I am new to this field. ;-(
If you're new you need to learn rather than implementing the technology!
However, all you need is to use mousedown and dragstart events.
If you're using jQuery then try to learn about onDrag event and set a function to change the page to the next menu item.
Finally i created it.
Click to see fiddle for slide and menu scrolling
JQuery for scrolling by menu click:
var total=$(window).width()*4;
$('.color').css({'width':''+$(window).width()+''});
$('.1').css({'position':'absolute','left':'0px'});
$('.2').css({'position':'absolute','left':''+$(window).width()+'px'});
$('.3').css({'position':'absolute','left':''+$(window).width()*2+'px'});
$('.4').css({'position':'absolute','left':''+$(window).width()*3+'px'});
$('a').click(function(){
var num=$(this).attr('id');
$('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
$('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});
JQuery for scrolling by slide(double-click and drag for touchpads) on screen:
var downX;
$('body').mousedown(function(event){
downX=event.clientX;
});
$('body').mouseup(function(event){
var s=$('html').scrollLeft();
var p=$('body').scrollLeft();
var upX=event.clientX;
var diff=downX-upX;
if(diff<0)
{
$('html').animate({'scrollLeft':''+s-$(window).width()+''});//For mozilla
$('body').animate({'scrollLeft':''+p-$(window).width()+''});//For other browsers
}
if(diff>0)
{
var g=s+$(window).width();
var k=p+$(window).width();
$('html').animate({'scrollLeft':''+g+''});//For mozilla
$('body').animate({'scrollLeft':''+k+''});//For other browsers
}
});
Click to see fiddle for menu click scrolling without animation
Changed ->
$('a').click(function(){
var num=$(this).attr('id');
$('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
$('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});
To ->
$('a').click(function(){
var num=$(this).attr('id');
$('html').scrollLeft($(window).width()*num);
$('body').scrollLeft($(window).width()*num);
});
I found this topic: How to link directly to an FAQ option expanded and used this script in my website:
$(window).load(function(){
$('.expand_text').each(function() {
$(this).css("display", "none");
});
$('.treenode').click(function() {
$(this).next('.expand_text').slideToggle("fast")
return false;
});
(function(hash){
if (hash !== undefined && hash.substring(0,1) === "#") {
$(hash).slideToggle("fast");
}
})(window.location.hash);
});
So now I can provide a link to a particular page which opens with one of the menu items automatically expanded. For example: http://drgiannopoulos.com/estheticdentistry.html#bleach It is in Greek, but its obvious that you can land on the page with the first menu item expanded. However, if you scroll down a bit you'll notice two three lettered underlined words (sorry again its Greek!). These are links and they don't work! You can right click and select "open in a new tab / window" which will work fine, but the simple left click has been rendered inactive. I think this has to do with the above mentioned script and since I am totally new to all this I would like your help.
Thanks