Develop Reference

I'm trying to make my navigation responsive

Either the toggle or the links aren't working. Currently it's the
toggle and I've tried everything.
<div class="navbar">
<nav>
<ul id="menulist">
<li>HOME</li>
<li>CV</li>
<li>PAINTINGS</li>
<li>DIGITAL</li>
<li>WEB DESIGN</li>
</ul>
</nav>
<img src="images teodora/Vector.png" class="menu-icon" onclick="togglemenu()">
</div>
The script for the dropdown toggle function
<script>
var menulist= document.getElementById("menulist");
menulist.style.maxHeight="0px";
function togglemenu()
{
if (menulist.style.maxHeight=="0px")
{
menulist.style.maxHeight="130px";
}
else
{
menulist.style.maxHeight="0px";
}
}
</script>
<Cannot make it work, I really don't have enough knowledge, I would
appreciate the help.

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>

I have an unordered list and i want to scroll to clickable element

This list is horizontal in the mobile view - using display:inline-block and its scrollable.
<ul>
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li>About us</li>
<li>Last button</li>
</ul>
You can't see the last button because you need to scroll to it, what I want to happen is when you click on " About US " it scrolls to its location and then you will see " Last Button "
Basically scroll in the X axis to the element clicked.

You can use an anchor to "focus" the div. I.e:
<ul id="ulList">
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li id="about">About us</li>
<li>Last button</li>
</ul>
and then use the following javascript:
location.href = "#";
location.href = "#about";
You can use a library if needed Check jQuery.ScrollTo,
Edited :
var about= document.getElementById('about');
var top = about.offsetTop;
// Now we tell the div to scroll to that position using scrollTop:
document.getElementById('ulList').scrollTop = top;

Try using bootstrap scrolling Nav module:
JavaScript
<script>
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
}); </script>
<ul id="ulList" class="navbar-nav ml-auto" style="z-index:1;">
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li id="about">About us</li>
<li>Last button</li>
</ul>
<div class="about" id="ulList">
<div class="container">
test
</div>
</div>

Swipe of Side Menu Bar using Jquery

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()?

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/