SOURCE

$(document).ready(function() {
    $('.icon.win').on('click', function() {
        var target = $(this).attr('data-target');
        $(target).toggleClass('open');
    });

    $('.icon.top.bars').on('click', function() {
        $('.startmenu .col.icons').toggleClass('open');
    });

    $('.desktop').on('click', function() {
        $('.startmenu, .icons, .icon.win').removeClass('open');
    });

    $('.tray .peek').on('mouseenter', function() {
        $('body').addClass('peek');
    });

    $('.tray .peek').on('mouseleave', function() {
        $('body').removeClass('peek');
    });
});

<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'>
<link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

<div class="desktop"></div>
<div class="taskbar">
    <div class="programs">
        <div data-target=".startmenu, .icon.win" class="icon win"><i class="fa fa-windows"></i>
        </div>
        <div title="Ask me anything" class="icon cortana"><i class="fa fa-circle-o"></i>
        </div>
        <div class="icon edge"><i class="fa fa-edge"></i>
        </div>
        <div class="icon skype"><i class="fa fa-skype"></i>
        </div>
    </div>
    <div class="tray">
        <div title="Show hidden icons" class="ico">
            <div class="fa fa-chevron-up"></div>
        </div>
        <div title="Speakers: 80%" class="ico"><i class="fa fa-volume-up"></i>
        </div>
        <div title="50% remaining" class="ico"><i class="fa fa-battery-half"></i>
        </div>
        <div class="ico time">
            <div class="clock">3:54 PM</div>
            <div class="date">11/28/2016</div>
        </div>
        <div title="No new notifications" class="ico"><i class="fa fa-commenting-o"></i>
        </div>
        <div class="peek"></div>
    </div>
    <div class="startmenu">
        <div class="container-fluid">
            <div class="row">
                <div class="col icons">
                    <div title="Expand" class="icon top bars"><i class="fa fa-bars"></i><span class="start">start</span>
                    </div>
                    <div class="bottom">
                        <div title="Andrew Ashley" class="icon profile"><img src="http://andrewashley.co.nz/media/1007/profile-photo.jpg" class="img-responsive" /><span>Andrew Ashley</span>
                        </div>
                        <div title="File Explorer" class="icon file-explorer"><i class="fa fa-folder"></i><span>File Explorer</span>
                        </div>
                        <div title="Settings" class="icon settings"><i class="fa fa-cog"></i><span>Settings</span>
                        </div>
                        <div title="Power" class="icon power"><i class="fa fa-power-off"></i><span>Power</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-xs-offset-2 programs">
                    <p class="title">Recently added</p>
                    <div class="item"><i class="fa fa-skype"></i><span>Skype</span>
                    </div>
                    <div class="item"><i class="fa fa-file-excel-o"></i><span>Excel</span>
                    </div>
                    <p class="title">Most used</p>
                    <div class="item"><i class="fa fa-chrome"></i><span>Google Chrome</span>
                    </div>
                    <div class="item"><i class="fa fa-firefox"></i><span>Mozilla Firefox</span>
                    </div>
                </div>
                <div class="col-xs-6 tiles">
                    <p class="title">Life at a glance
                        <div class="tile wide"><i class="fa fa-calendar"></i><span>Calendar</span>
                        </div>
                        <div class="tile medium"><i class="fa fa-file-pdf-o"></i><span>Adobe Acrobat</span>
                        </div>
                        <div class="tile medium photos"><span>Photos<i class="fa fa-picture-o"></i></span>
                        </div>
                        <div class="tile medium twitter"><span>Twitter<i class="fa fa-twitter"></i></span>
                        </div>
                        <div class="tile medium"><i class="fa fa-envelope"></i><span>Mail</span>
                        </div>
                        <div class="tile wide news"><span>News<i class="fa fa-newspaper-o"></i></span>
                        </div>
                        <div class="tile medium"><i class="fa fa-calculator"></i><span>Calculator</span>
                        </div>
                        <div class="tile medium"><i class="fa fa-camera"></i><span>Camera</span>
                        </div>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

.hover-state {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body,
html,
.desktop {
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
}
.desktop {
    background: url(/uploads/161201/windows_10_light_and_mirror_background_0.jpg) center right no-repeat;
    background-size: cover;
}
.taskbar {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    color: #fff;
}
.taskbar:before,
.taskbar:after {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
.taskbar .icon {
    display: inline-block;
    height: 50px;
    width: 50px;
    text-align: center;
    font-size: 2em;
    -webkit-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out;
}
.taskbar .icon:hover,
.taskbar .icon.open {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}
.taskbar .icon:hover .fa-windows,
.taskbar .icon.open .fa-windows {
    color: #aaa;
}
.taskbar .icon.edge {
    color: #5a93e8;
}
.taskbar > .programs,
.taskbar > .tray {
    height: 50px;
    line-height: 50px;
}
.taskbar > .programs {
    float: left;
    width: 50%;
}
.taskbar > .tray {
    float: right;
    width: 50%;
    text-align: right;
}
.taskbar > .tray .peek {
    display: inline-block;
    width: 10px;
    height: 50px;
    margin-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    float: right;
}
.taskbar > .tray .peek:hover {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}
.taskbar > .tray .ico {
    display: inline-block;
    font-size: 1.4em;
    width: 30px;
    height: 50px;
    text-align: center;
}
.taskbar > .tray .ico:hover {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}
.taskbar > .tray .ico.time {
    position: relative;
    top: 6px;
    height: auto;
    width: 60px;
    line-height: 20px;
}
.taskbar > .tray .ico.time .clock,
.taskbar > .tray .ico.time .date {
    text-align: center;
    height: auto;
    font-size: 0.8em;
    line-height: 1em;
}
.taskbar > .tray .ico.time .date {
    margin-top: 5px;
}
.taskbar > .tray .ico.time:hover {
    background: transparent;
}
.startmenu {
    overflow: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 50px;
    left: 0;
    height: 300px;
    width: 550px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.startmenu.open {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    height: 400px;
    opacity: 1;
}
.startmenu.open .icons .bottom {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
}
.startmenu.open .programs .item {
    margin-bottom: 1px;
    -webkit-transition: margin 0.5s ease-out;
    transition: margin 0.5s ease-out;
}
.startmenu.open .tiles .tile {
    margin-top: 0px;
    -webkit-transition: margin 0.5s ease-out;
    transition: margin 0.5s ease-out;
}
.startmenu .title {
    margin: 6px 0 0 0;
    padding: 8px 0 4px 10px;
}
.startmenu .title:hover {
    background: #333;
}
.startmenu > .container-fluid {
    padding: 0;
    height: 100%;
}
.startmenu > .container-fluid .row {
    margin-right: 0;
}
.startmenu > .container-fluid .row,
.startmenu > .container-fluid .programs,
.startmenu > .container-fluid .tiles {
    height: inherit;
    position: relative;
}
.startmenu .icons {
    position: absolute;
    z-index: 500;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 50px;
    overflow: hidden;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.startmenu .icons.open {
    width: 200px;
    background: #333;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.startmenu .icons .icon {
    position: relative;
    line-height: 50px;
    width: 100%;
    text-align: left;
}
.startmenu .icons .icon .fa {
    margin-left: 17px;
}
.startmenu .icons .icon img {
    max-width: 36px;
    margin-left: -4px;
}
.startmenu .icons .icon > span {
    position: absolute;
    left: 60px;
    font-size: 0.6em;
    line-height: 50px;
    width: 100px;
    height: 50px;
    text-align: left;
}
.startmenu .icons .icon > span.start {
    text-transform: uppercase;
    font-size: 1em;
    line-height: 2.5em;
}
.startmenu .icons .icon.top {
    position: absolute;
    z-index: 100;
}
.startmenu .icons .bottom {
    position: relative;
    bottom: 0;
    height: 100%;
    opacity: 0;
}
.startmenu .icons .bottom .icon {
    position: absolute;
}
.startmenu .icons .bottom .icon.power {
    bottom: 0;
}
.startmenu .icons .bottom .icon.settings {
    bottom: 50px;
}
.startmenu .icons .bottom .icon.file-explorer {
    bottom: 100px;
}
.startmenu .icons .bottom .icon.profile {
    bottom: 150px;
    padding: 0 12px;
}
.startmenu .icons .bottom .icon.profile img {
    display: inline;
    border-radius: 50%;
}
.startmenu .programs {
    overflow: hidden;
    overflow-y: auto;
    padding-left: 0;
    padding-right: 0;
}
.startmenu .programs .item {
    font-size: 20px;
    margin-bottom: 10px;
    padding: 2px 0 2px 10px;
}
.startmenu .programs .item:hover {
    background: #333;
}
.startmenu .programs .item .fa {
    background: #999;
    padding: 5px;
}
.startmenu .programs .item span {
    margin-left: 10px;
    font-size: 12px;
    line-height: 30px;
    vertical-align: bottom;
}
.startmenu .tiles {
    padding-right: 1px;
    overflow: hidden;
    padding-right: 12px;
}
.startmenu .tiles:hover {
    overflow-y: auto;
    padding-right: 0;
}
.startmenu .tiles .title {
    padding-left: 0;
}
.startmenu .tiles .title:hover {
    background: transparent;
}
.startmenu .tiles .tile {
    position: relative;
    background: #333;
    border: 2px solid #333;
    padding: 30px;
    min-height: 110px;
    margin-bottom: 4px;
    margin-top: 30px;
    text-align: center;
}
.startmenu .tiles .tile.photos {
    background: url(http://lorempixel.com/200/150/cats/) center no-repeat;
    background-size: cover;
}
.startmenu .tiles .tile.twitter {
    background: url(http://www.adweek.com/socialtimes/files/2011/08/twitter_icon_2011.png) center no-repeat;
    background-size: cover;
}
.startmenu .tiles .tile.news {
    background: url(http://lorempixel.com/400/150/business/) center no-repeat;
    background-size: cover;
}
.startmenu .tiles .tile:hover {
    border: 2px solid #eee;
}
.startmenu .tiles .tile .fa {
    font-size: 25px;
}
.startmenu .tiles .tile > span {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    text-align: left;
}
.startmenu .tiles .tile > span .fa {
    float: right;
    font-size: 14px;
}
.startmenu .tiles .tile.wide {
    width: 100%;
    clear: both;
}
.startmenu .tiles .tile.medium {
    width: 49%;
    float: left;
}
.startmenu .tiles .tile.medium:nth-child(odd) {
    margin-right: 4px;
}
.startmenu .tiles .tile.medium:nth-child(even) {
    float: right;
}
body.peek .startmenu.open,
body.peek .window,
body.peek .app {
    opacity: 0.1;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
    background: #c3c3c3;
}
::-webkit-scrollbar-button {
    background-size: 100%;
    height: 10px;
    width: 10px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button:vertical:increment {
    background-position: center top;
    background-image: url(/uploads/161201/downarrow0.png);
}
::-webkit-scrollbar-button:vertical:decrement {
    background-position: center bottom;
    background-image: url(/uploads/161201/uparrow0.png);
}