Trying to get my navbar to close when I click off it?

**mutfak** · 05-15-2016, 12:17 PM

This is the first time I'm doing anything with javascript. I currently have this code for my website:

html:

Code:

<head>
<title>My Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="navbar.css" rel="stylesheet" type="text/css" />
</head>

<body class="menu">
<header>
<a href="#" class="menu-toggle"><img src="http://i.imgur.com/p2Yxaex.jpg" onmouseover="this.src='http://i.imgur.com/Vrl4tBl.jpg'" onmouseout="this.src='http://i.imgur.com/p2Yxaex.jpg'" /></a>
<nav class="menu-side">
This is a side menu
</nav>
</header>

<br />


<center>Content here
</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script> 
(function() {
           var body = $('body');
           $('.menu-toggle').bind('click', function() {
                body.toggleClass('menu-open');
                return false;
                });
          })();
</script>
</body>
</html>

css:

Code:

.menu {
    overflow-x:hidden;
    position: relative;
    left: 0px;
}

.menu-open {
    left: 231px;

}

.menu-open .menu-side {
    left: 0;
}

.menu-side,
.menu {
    -webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
    transition: left 0.2s ease;

}

.menu-side {
    background-color:#333;
    border-right:1px solid #000;
    color:#fff;
    position:fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;


}

What can I do so that I don't need to re-click the menu icon but can simply click off the navbar to close it?

Thank you!

**DaveyErwin** · 05-15-2016, 07:23 PM

Originally Posted by mutfak

What can I do so that I don't need to re-click the menu icon but can simply click off the navbar to close it?

Thank you!

<nav class="menu-side menu-toggle">

Welcome to the Forum

Thread: Trying to get my navbar to close when I click off it?

Thread Tools

Rate This Thread

Trying to get my navbar to close when I click off it?

Tags for this Thread

Posting Permissions