Swipe of Side Menu Bar using Jquery - javascript

Hi I am trying to add a swipe for my side menu bar,
In my code I have a click method along with that I need a swipe technique too.
I need to remove the inside image of the side bar when it is opened and on click of document it should close the side menu bar and the list icon should appear back again.
Javascript:
$("#openMenuLayout").click(function(e){
debugger;
if ($('#menuLayout').hasClass('open-menu')){
$('#menuLayout').removeClass('open-menu');
$('#openMenuLayout').find('img').removeClass().addClass('open');
} else {
$('document, #menuLayout').addClass('open-menu');
$('#openMenuLayout').find('img').removeClass();
}
e.preventDefault();
});
$(document).click(function(e){
if (!$("#menuLayout").is(e.target) && $("#menuLayout").has(e.target).length === 0) {
// Clicked outside, close menu
$("#menuLayout").removeClass('open-menu');
}
});
Html:
<div id="menuLayout">
<a href="#menuLayout" id="openMenuLayout">
<img class="open" src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' />
<img class="close" src="http://seotobiz.com/images/icon_close.png" style='display:none;'/></a>
<nav id="menuLayoutList">
<ul>
<li>
<form id="search">
<input type="search" placeholder="Search...">
</form>
</li>
<li>Home</li>
<li>About Us</li>
<li>Key Facts</li>
<li>Team</li>
<li>Register</li>
<li>Contact</li>
</ul>
</nav>
</div>
Here is the demo Link that I have tried so far:
Demo Link

It will definitely be easier to use a swipe plugin like touchswipe http://labs.rampinteractive.co.uk/touchSwipe/demos/
As for the image, why don't you simply use a .hide() or .show()?

Related

How to close a Full Screen menu when clicked on any of the links inside the menu?

I want to implement https://codepen.io/brenden/pen/VLjKMQ/ this menu in my project/website but I can't get the menu to close after I click any link or even navigate it to my desired section(of my one-page website).
<h1>Your Content</h1>
<div class="outer-menu">
<input class="checkbox-toggle" type="checkbox" />
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>About</li>
<li>Products</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
// bind a click listener to the entire menu
document.querySelector('.menu').addEventListener('click', function(e){
// check to see if the element clicked was a link
if (e.target.tagName === 'A') {
// set the checkbox to checked false
document.querySelector('.checkbox-toggle').checked = false;
}
});

Close responsive menu after click on menu item

I have this custom js code for basic (open/close) menu movement that was great when I used it on multi page websites, but it only closes the menu when you click the menu symbol. Now I need to implement it into a one page website and I need it to close after a user clicks on a menu item. I have very little experience in javascript so I need help solving this problem.
The js:
$(document).ready(function() {
var n = '#nav', no = 'nav-open';
$('#nav-menu').click(function() {
if ($(n).hasClass(no)) {
$(n).animate({height:0},300);
setTimeout(function() {
$(n).removeClass(no).removeAttr('style');
},320);
}
else {
var newH = $(n).css('height','auto').height();
$(n).height(0).animate({height:newH},300);
setTimeout(function() {
$(n).addClass(no).removeAttr('style');
},320);
}
});
});
The HTML:
<!-- Navigation Bar -->
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">☰<!-- menu symbol --></a>
<a class="nav-menu">Menu</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
change
$('#nav-menu').click(function() {
if you want that your menu close only by clicking on the li element
$('#nav li').click(function() {
or if you want to close menu with both li and menu icon
$('#nav-menu, #nav li').click(function() {
That's because you only bind the click function to the menu symbol. I'm not sure why you separate the symbol and text, but I would prefer to wrap it in single element. Also you can use jQuery slideToggle() to slide down or up on click. Example:
$(document).ready(function() {
$('#nav-menu').click(function() {
$('#nav').slideToggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">
<span>☰</span>
<span>Menu</span>
</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

JQuery click function not firing off

The problem I am running into is that I have this responsive navigation built. I only want it to dropdown when the hamburger icon is clicked, but it will not work if I try targeting it. It only works if I target the entire navbar it is nested in.
Here is a link to a local jsFiddle here
HTML Code
<div class="toggleMenu">
<button type="button" class="navbar-toggle" id="toggle-btn"></button>
</div>
<nav class="level-nav hidden-md">
<ul>
<li>About Me</li>
<li>Pulses</li>
<li>Kudos</li>
<li>Blogs</li>
<li>
Resources <b class="caret"></b>
<div class="level-inner">
<span class="split"></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</li>
</ul>
</nav>
JQuery Code
$(document).ready(function(){
var mobileMenu = $(".level-nav li a");
$(mobileMenu).each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
/* Defined variables for main and sub multi-level navigations */
var subNav = $("#toggle-btn");
/* Function that activates the sub-navigation bar to toggle the sibiling which is the .level-nav */
$(subNav).click(function (e){
e.preventDefault();
$(this).siblings(".level-nav").toggle(175, "easeInQuad");
});
});
The button is not a sibling of the navigation, it's wrapped in a DIV that is a sibling of the navigation
$(this).closest('.toggleMenu').siblings(".level-nav").toggle(175, "easeInQuad");
And to use toggle() like that, you'll have to include jQuery UI as well
FIDDLE

Smooth Scroll to Top & Hide <div> Upon Click

So I have it working perfectly when you click the "back to top" arrow, it hides the menu, but I just want it to do a smoothscroll to the top of the page upon click in addition to that. You can test out what I currently have at http://rac.site44.com just readjust the width so you are in a mobile view (its responsive) and click the top-right "menu" icon to see the arrow.
Here is the HTML
<div class="col_4 no-padding">
<a href="/">
<img class="logo" src="img/clear.gif" alt="RAC-Engineering - Structural Engineer Buffalo NY">
</a>
<a class="nav-toggle"><span class="mobile-nav-toggle mobile-only"></span></a>
<a class="nav-toggle2 hidden"><span class="mobile-nav-toggle mobile-only"></span></a>
</div>
<div class="col_8 no-padding last">
<nav id="nav" class="nav mobile-hide">
<ul>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
<li>Estimate</li>
<li class="top mobile-only"></li>
</ul>
</nav>
</div>
and the JS: (Obviously I'm assuming you just need a line of code telling it to scroll to top after the $("li.top").click(function(e) { but I can't seem to figure it out)
$(function() {
$("li.top").click(function(e) {
$("#nav").addClass('mobile-hide');
$(".nav-toggle").removeClass('hidden');
$(".nav-toggle2").addClass('hidden');
e.preventDefault();
});
});
Thanks for the help!
I just tested this on your site:
$("html, body").animate({ scrollTop: "0px" });
You can read about .animate() here: http://api.jquery.com/animate/

How to hide sub-menu when other menu clicked JQuery

I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked http://jsfiddle.net/kuuwj/15/
HTML
<ul id="navbar">
<li>Home</li>
<li>Portfolio
<div class="portfolio-apps">
<section id="website">
<span class="button">AAAAAAAAAAAAAAAAAAAAAA</span>
</section>
<section id="gterminal">
<span class="button">BBBBBBBBBBBBBBBBBBBBBB</span>
</section>
<section>
<span class="button">CCCCCCCCCCCCCCCCCCCCCC</span>
</section>
</div>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS
$(document).ready(function () {
var portf_apps = $('.portfolio-apps');
portf_apps.hide();
$('#nav-portfolio').click(function() {
portf_apps.show();
});
});
Change your Javascript to this:
$('#navbar > li > a').click(function(){
portf_apps.hide();
});
$('#nav-portfolio').unbind('click').click(function() {
portf_apps.show();
});
Bind another click event to the other navbar elements before the portfolio showing one:
$("#navbar a").on('click', function () {
$(".portfolio-apps").hide();
});
var portf_apps = $('.portfolio-apps');
...
This will cause the portf_apps method to trigger afterwards which will show its children even if it's clicked. I suggest updating this to work with parent-child relationships generally, though.
http://jsfiddle.net/jWujm/

Categories

Resources