JSFiddle - React, Tailwind, and code Playground

Responsive Vertical Navigation

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css">
<div class="content">
    <ul class="vertical-nav dark red">
        <li class="active"><a href="#"><i class="icon-home"></i> Home</a>

        </li>
        <li><a href="#"><i class="icon-cogs"></i>Services <span class="submenu-icon"></span></a>

            <ul>
                <li><a href="#">Second level</a>

                </li>
                <li><a href="#">Second level</a>

                </li>
                <li><a href="#">Second level</a>

                </li>
                <li><a href="#">Second level</a>

                </li>
                <li><a href="#">Second level</a>

                </li>
                <li><a href="#">Second level</a>

                </li>
            </ul>
        </li>
        <li><a href="#"><i class="icon-briefcase"></i>Projects <span class="submenu-icon"></span></a>

            <ul>
                <li><a href="#">Second level</a>

                </li>
                <li><a href="#">Second level</a>

                </li>
                <li><a href="#">Second level<span class="submenu-icon"></span></a>

                    <ul>
                        <li><a href="#">Third level</a>

                        </li>
                        <li><a href="#">Third level</a>

                        </li>
                        <li><a href="#">Third level <span class="submenu-icon"></span></a>

                            <ul>
                                <li><a href="#">Fourth level</a>

                                </li>
                                <li><a href="#">Fourth level</a>

                                </li>
                                <li><a href="#">Fourth level</a>

                                </li>
                                <li><a href="#">Fourth level</a>

                                </li>
                            </ul>
                        </li>
              ...

CSS

.vertical-nav {
    width: 200px;
    margin:0;
    padding:0;
    float: left;
    font-family: Segoe UI, Arial;
    position:relative;
    list-style: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #fff;
}

.vertical-nav li {
    display: block;
    width: 100%;
    padding:0;
    float:left;
    font-size:14px;
    position:relative;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.vertical-nav li a {
    width: 100%;
    display:block;
    padding:15px 20px 15px 19px;
    color: #888;
    text-decoration:none;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.vertical-nav li:hover > a > i, .vertical-nav > li.active a > i {
    background: #95a5a6;
    color: #fff;
}

.vertical-nav ul, .vertical-nav ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 999;
    width:100%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.vertical-nav ul {
    top: 0;
    left: 100%;
}

.vertical-nav ul li ul {
    top: 1px;
}
.vertical-nav ul li {
    clear: both;
    width: 100%;
}
.vertical-nav ul li a {
    padding: 15px 20px;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
}

.vertical-nav .submenu-icon {
    font-family:'FontAwesome';
    font-size: 10px;
    float: right;
    margin-right: -10px;
    line-height: 24px;
}
.vertical-nav > li > a > .submenu-icon:before {
    content:"\f0c9";
}
.vertical-nav > li ul a .submenu-icon:before {
    content:"\f0c9";
    float: right;
    line-height: 23px;
}

.vertical-nav > li i {
    line-height: 24px !important;
    margin: -16px 14px 0 -20px;
    font-size: 25px;
    float: left;
    border-right: solid 1px...

JavaScript

$['fn']['verticalnav'] = function (_0xe4a7x1) {
    var _0xe4a7x2 = {
        speed: 300,
        align: 'left'
    };
    $['extend'](_0xe4a7x2, _0xe4a7x1);
    $('.vertical-nav')['prepend']('<li class=\'showhide\'><span class=\'title\'>MENU</span><span class=\'icon\'><em></em><em></em><em></em><em></em></span></li>');
    if (_0xe4a7x2['align'] == 'right') {
        $('.vertical-nav')['addClass']('right');
    };
    _0xe4a7x3();
    $(window)['resize'](function () {
        _0xe4a7x3();
    });

    function _0xe4a7x3() {
        $('.vertical-nav')['find']('li')['unbind']();
        $('.vertical-nav')['find']('ul')['hide'](0);
        if (window['innerWidth'] <= 768) {
            _0xe4a7x6();
            _0xe4a7x5();
        } else {
            _0xe4a7x7();
            _0xe4a7x4();
        };
    };

    function _0xe4a7x4() {
        $('.vertical-nav li')['bind']('mouseover', function () {
            $(this)['children']('ul')['stop'](true, true)['fadeIn'](_0xe4a7x2['interval']);
        })['bind']('mouseleave', function () {
            $(this)['children']('ul')['stop'](true, true)['fadeOut'](_0xe4a7x2['interval']);
        });
    };

    function _0xe4a7x5() {
        $('.vertical-nav > li')['bind']('click', function () {
            if ($(this)['children']('ul')['css']('display') == 'none') {
                $(this)['find']('ul')['stop'](true, true)['slideDown'](_0xe4a7x2['interval']);
            } else {
                $(this)['children']('ul')['stop'](true, true)['slideUp'](_0xe4a7x2['interval']);
            };
        });
    };

    function _0xe4a7x6() {
        $('.vertical-nav > li:not(.showhide)')['hide'](0);
        $('.vertical-nav > li.showhide')['show'](0);
        $('.vertical-nav > li.showhide')['bind']('click', function () {
            if ($('.vertical-nav > li')['is'](':hidden')) {
                $('.vertical-nav > li')['slideDown'](300);
            } else {
                $('.vertical-nav > li:not(.showhide)')['slideUp'](300);
  ...