Develop Reference

how to detect click outside of push menu and close menu

I'm using javascript to open a push menu.But, I'd like to add the feature that if the mouse clicks outside of the push menu, it will close the menu. I've never coded this before so really unsure of where to begin.
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="pushmenu pushmenu-left">
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>

Add event to trigger click operation and follow if it contains your menu or not.
I am giving an example, I hope it will help you with solving your issue. 
html
<nav class="pushmenu pushmenu-left" id='menuBar'>
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>
Javascript
window.addEventListener('click', function(e){
if (document.getElementById('menuBar').contains(e.target)){
console.log('clicked inside');
// toggle your menu according to your requirements
} else{
// toggle your menu according to your requirements
console.log('clicked outside');
}
});

Use this Jquery
$(document).click(function () {
//Write your code here
});
it means when you are clicked outside that part your respective code will run

Try this. I added an initial style to hide menu. You can then display the menu using the menu button or clicking on the document.
$(document).ready(function() {
$('#menu').click(function() {
if($('nav').is(':visible')) {
hideMenu();
}
else {
$('nav').show(function() {
$(this).animate({left:'0'});
$('#menu').html('hide menu');
});
}
});
$(document).click(function(e) {
if(!$(e.target).closest('#menu').length && $('nav').is(':visible')) {
hideMenu();
}
});
});
function hideMenu() {
$('nav').animate({left:'-100px'}, function() {
$(this).hide();
$('#menu').html('show menu');
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="menu">show menu</button>
<nav class="pushmenu pushmenu-left" style="display:none; left:-100px; position: relative">
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>

Adding an active class to menu using jquery problem

I'm new to Jquery/JS and still learning. I need to add an "active" class to my menu. I know there are already many similar questions across this forum and web as well but nothing works. It had bugged me for days and I still couldn't figure out the problem.
Here is my HTML :
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav><!-- #nav-menu-container -->
Here is my code to add the class:
$('.nav-menu a, #mobile-nav a').on('click', function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
if ($(this).parents('.nav-menu').length) {
$('.nav-menu .menu-active').removeClass('menu-active');
$(this).closest('li').addClass('menu-active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').fadeOut();
}
return false;
}
});
I'm sorry I didn't explain it in detail before. I want the link menu to be redirecting to another page. The code originally came from a one page-web theme I use, but I customize it to fit my multi-page web application.
Thanks again.

You can do:
$('.nav-menu').on('click', function (e) {
e.preventDefault();
$('.nav-menu .menu-active').removeClass('menu-active');
$(e.target).parent('li').addClass('menu-active');
});
li.menu-active a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>

<div id="side-bar">
<ul>
<li>Home</li>
<li>Who we are</li>
<li>Services</li>
<li>What to expect</li>
<li>Representative clients</li>
<li>Success stories</li>
<li>Current litigation</li>
<li>What if you could not be a doctor?</li>
</ul>
</div>
script
$(document).ready(function () {
alert(localStorage.getItem("selectedolditem"));
$("#side-bar a").click(function () {
var id = $(this);
$(".active").removeClass("active");
$(id).addClass("active");
localStorage.setItem("selectedolditem", $(id).text());
alert(localStorage.getItem("selectedolditem"));
});
var selectedolditem = localStorage.getItem('selectedolditem');
if (selectedolditem !== null) {
$("a:contains('" + selectedolditem + "')").addClass("active");
}
});
css
.active {color:red;}

If you have multiple pages try with this. the below code activate the menu with the current page
when you have like this.
<nav id="nav-menu-container">
<ul class="nav-menu">
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav><!-- #nav-menu-container -->
<script>
$(function() {
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('menu-active');
});
</script>

Here is how it can work with localStorage.
I am afraid the snippet tool does NOT allow localStorage so you will have to see it working here:
https://repl.it/#PaulThomas1/BraveOffbeatByte
document.addEventListener('DOMContentLoaded', () => {
// try and load
if (localStorage) {
let active = localStorage.getItem('activeMenu');
if (active) document.querySelector(`a[class="${active}"]`).classList.add('active');
}
});
document.addEventListener('click', (e) => {
// try and save
if (e.target.matches('a') && localStorage) {
localStorage.setItem('activeMenu', e.target.className);
}
});
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>
<!-- #nav-menu-container -->

HTML JS - sub menu is not working?

I'm trying to achieve this. But I could not succeed so far. My code is given below. What is wrong with it?
html:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu
<ul >
<li style="text-align:center;"><span>DashBoard</span></li>
<li style="text-align:center;"><span>User </span></li>
<li style="text-align:center;"><span>Candidates</span></li>
<li style="text-align:center;"><span>Partylist</span></li>
<li style="text-align:center;"><span>Position</span></li>
<li style="text-align:center;"><span>Program</span></li>
<li style="text-align:center;"><span>Department</span></li>
<li style="text-align:center;"class="active"><span>School-Year</span></li>
<li style="text-align:center;"><span>Reports</span></li>
<li style="text-align:center;"><span>Logs</span>
<ul class="sub-menu" style="text-align:right">
<li>Submenu</li>
</ul></li>
</ul>
</nav>
Javascript:
<script type="text/javascript">
$('li a').click(
function() {
$(this).next().slideToggle();
})
</script>

Firstly correct your markup ,some tags are not properly closed.
Second, you need to use preventDefault() to disable the default action of the a tag.
Third,
$('li a').click(
function() {
$(this).next().slideToggle();
})
this code will toggle you menu only if next element is the menu itself.
so use this
$('li a').click(function(e) {
e.preventDefault();
$('a:contains(Submenu)').slideToggle();
});
https://jsfiddle.net/uc3hp4o5/

JQuery - Make .slideToggle specific to each list

I have a .slideToggle making a list dropdown, but unfortunately it makes all lists dropdown, I need to make it only dropdown the list below the a that I'm clicking on. Sure this is a simple issue, still pretty new to jquery.
Jsfiddle: http://jsfiddle.net/darcyvoutt/shErA/

The following finds the next ul element and runs slideToggle() on it.
$(document).ready(function () {
$('.nav-filters-list-item a').click(function () {
$(this).next('ul').slideToggle(70);
});
});
See this jsFiddle

Try adding an id for each dropdown like this:
<ul class="nav-filters-list">
<li class="nav-filters-list-item" id="genre">Genre
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item" id="tags">Tags
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item">Date
</li>
<li class="nav-filters-list-item">Order
</li>
</ul>
Javascript:
$(document).ready(function () {
$('#genre a').click(function () {
$('#genre ul').slideToggle(70);
});
$('#tags a').click(function () {
$('#tags ul').slideToggle(70);
});
});

What's wrong with this? Load Pages when links are clicked

I am using Ajax for a website I am in the process of developing and something is wrong with this code... When the URL is something like mywebsite.com?about I want the about page to be displayed.
Here is the HTML portion of the code (NOTE: When a link is pressed Text is to be inserted into the DIV 'content'):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="script/open_page.js"></script>
<div id="wrapper">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
</div>
Here is a portion of the JavaScript:
var currentpage;
function load_about() { // Loads About Us
if ($current_page == "about") {
$(document).ready(function(){
$("#content").load("contents/about.html");
});
}
}
Thanks for any suggestions or answers...

Since you are calling load_about on click of home page link, I don't think the if condition is necessary. Also the use of dom ready is wrong in this case
It should be
function load_about() { // Loads About Us
$("#content").load("contents/about.html");
}
If it is upto me, I may do it slightly differently
<div id="wrapper">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
And
$(document).ready(function(){
$('#header ul.nav li').click(function(){
$("#content").load($(this).find('a').attr('href'));
return false;
})
});

<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
$(function() {
$('.nav').on('click', 'a', function(e) {
e.preventDefault();
var pageToLoad = $(this).data('page');
$.get('contents/' + pageToLoad + '.html'), null, function(response) {
$("#content").html(response);
});
});
});