sliding menu

by techsin

HTML

<div id="nav">
<ul id='menu'>
    <li>Home</li>
    <li>Categories
    <ul class='cat'>
        <li>Educational</li>
        <li>Gaming</li>
        <li>Vlog</li>
        <li>Recent News</li>
        <li>Back</li>
    </ul>
    </li>
    <li>Search</li>
    <li>History</li>
    <li>Settings
    <ul class='cat'>
        <li>Profile
            <ul class='cat'>
        <li>Photos</li>
        <li>Messages</li>
        <li>Contacts</li>
        <li>Account</li>
        <li>Back</li>
    </ul>
        </li>
        <li>Data</li>
        <li>Favs</li>
        <li>Messages</li>
        <li>Back</li>
    </ul></li>
</ul></div>

CSS

* {padding: 0; margin: 0;}
#nav { width: 170px; background-color: rgb(228, 245, 252); position: relative;  overflow: hidden;}
#menu { position: relative;  left: 0; transition:left .4s;}
#menu li { 
    list-style-type: none;
    color:rgb(112, 130, 161); font-family: sans-serif; 
    width: 150px; line-height:35px ; padding-left: 20px;}

#menu li:hover {background-color:rgb(205, 224, 228); }

.cat {position: absolute; left:170px; top:0; display: none;}

JavaScript

$("#menu li:has(ul.cat)").click(function(e){
    if(!($(this).is(e.target))) return;
    $(this).siblings().children('ul.cat').hide();
    $(this).children('ul.cat').show();
    $("#menu").css('left','-=170');
}).find('.cat>li:last-of-type').click(function(){
    $("#menu").css('left','+=170');
});