Close menu on lost focus or click on menu item

I have a menu bar that is working properly but I want to add a close feature in this menu.
As most of the menu bar I can see are getting auto close on lost focus and click on menu item.

HTML

<nav id="sidebar-wrapper" class="active">

    <a id="menu-close" target="_blank" rel="nofollow" href="#" class="close-btn toggle">Close <i class="ion-log-in"></i></a>
    <ul class="sidebar-nav">

        <li><a target="_blank" rel="nofollow" href="index.html" class="ng-binding"><font size="5"><i class="ion ion-ios-home-outline"></i> </font>Home</a></li> 

        <li><a target="_blank" rel="nofollow" href="logout.html" class="ng-binding"><font size="5"><i class="ion ion-android-exit"></i> </font>Logout</a></li> 

        <li><a target="_blank" rel="nofollow" href="settings.html" class="ng-binding"><font size="5"><i class="ion ion-gear-b"></i> </font>Settings</a></li> 

        <li><a target="_blank" rel="nofollow" href="contact_us.html" class="ng-binding"><font size="5"><i class="ion ion-help"></i> </font>Support</a></li> 

        <li><a target="_blank" rel="nofollow" href="tnc.html" class="ng-binding"><font size="5"><i class="ion ion-document-text"></i> </font>T&amp;C</a></li> 

        <li><a target="_blank" rel="nofollow" href="privacy_policy.html" class="ng-binding"><font size="5"><i class="ion ion-ios-locked-outline"></i> </font>Privacy Policy</a></li> 

    </ul>
</nav>

CSS

#sidebar-wrapper {
    z-index:1000;
    position:fixed;
    right:0;
    width:250px;
    height:100%;
    margin-right:-300px;
    overflow-x: hidden;
    overflow-y:auto;
    /*background:#41A1E1 url(../img/stripBG.png);*/
    background:#050433; 
    z-index:99999999;
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
}
.sidebar-nav {
    position:absolute;
    width:350px;
    margin:0;
    padding:0;
    list-style:none;
}
.sidebar-nav li {
    text-indent:4px;
    line-height:10px;
    border-bottom:1px dotted rgba(255,255,255,0.27);
}
.sidebar-nav li a {
    display:block;
    text-decoration:none;
    color:#FFF;
    font-family: sans-serif;
    letter-spacing: 0.0625em;
    font-size:9px;
    padding:10px 10px;
}
.sidebar-nav li a:hover {
    text-decoration:none;
    color:#81F89D;
}
.sidebar-nav li a:active,.sidebar-nav li a:focus {
    text-decoration:none;
}
.sidebar-nav>.sidebar-brand {
    height:55px;
    font-size:18px;
    line-height:55px;
}
.sidebar-nav>.sidebar-brand a {
    color:#999;
}
.sidebar-nav>.sidebar-brand a:hover {
    color:#fff;
    background:none;
}
#sidebar-wrapper.active {
    right:200px;
    width:260px; /*260 */
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
    box-shadow:0px 0px 15px rgba(0,0,0,0.49);
}

Please advise how I can close the div on lost focus and click on menu item.

Alright so if I’m right you want to close a menu on “blur” and on “click”. If this is what you are trying then the code should not be that hard. Just start by creating the base functionality of closing the menu. If you just want to hide it you can do $(“div.menu”).hide().

Now let’s assign it to the events by adding a blur:

$("nav#sidebar-wrapper").on("blur", function () {
    $(this).hide()
});

And a click on the buttons:

$("nav#sidebar-wrapper > ul > li").on("click", function () {
    $("nav#sidebar-wrapper").hide()
});

This should do the trick.