Develop Reference

My (hidden) tab doesn't want to open when clicking on the hamburger button

I am having trouble with my responsive navbar, I've hidden the inside-menu(li's) and want it to open when I click on the menu(hamburger) but it's not working. Can someone please help me?
const menuButton = document.getElementById('menu-button');
const insideMenu = document.getElementById('inside-menu');
menuButton.addEventListener('click', () => {
insideMenu.classList.menuButton('active');
});
<div class="nav-bar">
<div class="menu" id="menu-button">
<a href="#" class="Menu">
<img src="menu.png" alt="menu"></a>
<ul id="inside-menu">
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>

Classlit has methods: add(), remove(), replace(), and toggle().
classList.menuButton does not exist, that's where the error comes from.
To solve your problem you can use the toggle() method like this:
const menuButton = document.getElementById('menu-button');
const insideMenu = document.getElementById('inside-menu');
menuButton.addEventListener('click', () => {
insideMenu.classList.toggle('hidden');
});
.hidden {
visibility: hidden;
}
<div class="nav-bar">
<div class="menu" id="menu-button">
<a href="#" class="Menu">
<img src="menu.png" alt="menu"></a>
<ul id="inside-menu" class="hidden">
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>

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>

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>

How to check if subMenu is shown without setInterval function?

I've got a problem. I have some submenus on my website that i show and hide with jQuery.
The #Sekundar is the submenu, but what i want to ask about is, Is there a better way to check if the menu is shown or not shown?
I couldn't get it make it work unless i put a setInterval on it, and that isn't the best way of doing it i think? Any suggestions?
Here is the JS code:
function sekundarmenu() {
$('#sekundar').fadeToggle();
$('#sekundar2').hide();
$('#sekundar3').hide();
$('#sekundar4').hide();
$('#sekundar5').hide();
}
setInterval(function () {
if ($("#sekundar").is(":visible") || $("#sekundar").css("display")== "block") {
$("#li1").css("background-color", "#24ac5f");
}
else {
$("#li1").css("background-color", "transparent");
}
}, 1);
And the HTML:
<nav id="primar">
<ul>
<li id="li1"><a onclick="sekundarmenu()" class="pointer">Indhold</a></li>
<li id="li2"><a onclick="sekundarmenu2()" class="pointer">Nyheder</a></li>
<li id="li3"><a onclick="sekundarmenu3()" class="pointer">Billeder</a></li>
<li id="li4"><a onclick="sekundarmenu4()" class="pointer">Bruger</a></li>
<li id="li5"><a onclick="sekundarmenu5()" class="pointer">Diverse</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>

Since there are many ways to solve similar problems you have to choose the one that best suits your case.
in this Fiddle
i thought to solve the problem in another way by adding some classes in your html code. In this way the jQuery code is drastically reduced.
I also added the ability to disappear the submenu on mouseleave, if you don't like this solution you can easily delete the lines of code highlighted in the fiddle.
If you like this solution remember to flag in green my answer ;)
all jQuery code you need is:
<script type="text/javascript">
$(document).ready(function(){
$('li.principal').click(function(){
var whatSubmenu=$(this).attr('id').slice(1)
$('li.principal').css("background-color", "transparent")
$(this).css("background-color", "#24ac5f")
$('div.sekundar').hide()
$('.'+whatSubmenu).fadeIn()
})
/*IF you don't want the submenu disappear on mouseleave comment these lines of code*/
$('div.sekundar').on('mouseleave',function(){
$(this).hide()
$('li.principal').css("background-color", "transparent")
})
})
</script>
html:
<header>
<nav id="primar">
<ul>
<li class="principal" id="li1"><a class="pointer">Indhold</a></li>
<li class="principal" id="li2"><a class="pointer">Nyheder</a></li>
<li class="principal" id="li3"><a class="pointer">Billeder</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar i1">
<nav class="nav2">
<ul>
<li>Osadff</li>
<li>Rwefewg</li>
<li>Reehjy</li>
</ul>
</nav>
</div>
<div id="sekundar2" class="sekundar i2">
<nav class="nav2">
<ul>
<li>dgdgdg</li>
<li>sdfdfdg</li>
</ul>
</nav>
</div>
<div id="sekundar3" class="sekundar i3">
<nav class="nav2">
<ul>
<li>defdgdgdg</li>
</ul>
</nav>
</div>

In this simple example, you have a button that displays or hides your sub menu.
To verify if the menu is visible just give it a class using the toggleclass method and then check for the presence of that class.
<!DOCTYPE HTML>
<html>
<head>
<style>
#sekundar{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').click(function(){
$('#sekundar').toggleClass('visible')
if($('#sekundar').hasClass('visible')){
alert('not visible')
$('#sekundar').show()
}else{
alert('visible')
$('#sekundar').hide()
}
})
})
</script>
</head>
<body>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
<input name="" type="button" value="check" id="test">
</body>
</html>

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);
});
});
});