Expandable menu exploration

Design by Robin Kylander https://dribbble.com/shots/1614557-Menu-Exploration-Dashboard?list=users&offset=0

by katalin_2003

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Menu Exploration - Dashboard</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
   <aside>
     <header><span class="ico">
       <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="30px" height="30px" viewBox="0 0 126 126" enable-background="new 0 0 126 126" xml:space="preserve">
<path fill="#fff" d="M67.528,4.054c-2.197-2.672-6.845-2.686-9.072,0.016c-3.983,4.883-38.92,48.414-38.92,72.626
	c0,26.057,19.496,47.258,43.463,47.258c23.968,0,43.464-21.201,43.464-47.258C106.463,52.483,71.526,8.952,67.528,4.054z
	 M62.999,116.141c-19.655,0-35.648-17.695-35.648-39.445c0-16.841,22.51-49.354,35.648-65.813
	c13.152,16.475,35.65,48.977,35.65,65.813C98.649,98.445,82.655,116.141,62.999,116.141z"/>
</svg>
     </span>
     </header>
     <nav>
       <ul class="main-menu">
         <li><a href="#"><span class="ico">          

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="64px" height="64px" preserveAspectRatio="xMinYMin" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path fill="#231F20"...

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
body {
  background: #16191f;
  padding: 50px 0;
  font-size: 13px;
  font-weight: 400;
  font-family: Tahoma "PT Sans" sans-serif; }
  body aside {
    width: 50px;
    min-height: 400px;
    background: #383e49;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    transition: all 0.2s ease-in;
    margin: 0 auto; }
    body aside:hover {
      width: 200px;
      transition: all 0.3s ease-in; }
    body aside header {
      height: 60px;
      background: #4c515d;
      text-align: center;
      border-bottom: 1px solid #232831;
      box-shadow: 0 1px 1px 0 #353b45; }
      body aside header .ico {
        display: inline-block;
        margin-top: 15px; }
    body aside nav ul {
      list-style: none;
      margin: 0;
      padding: 0; }
      body aside nav ul li {
        height: 50px;
        display: block;
        border-bottom: 1px solid #232831;
        line-height: 50px;
        position: relative; }
        body aside nav ul li a {
          width: 200px;
          color: white;
          text-decoration: none;
          display: block;
          position: relative;
          color: #cfd2d9;
          border-left: 2px solid transparent;
          transition: all 0.2s ease-in; }
          body aside nav ul li a button {
            width: 20px;
            height: 20px;
            background: none;
            border: none;
            font-weight: bold;
            font-size: 15px;
            color: #fff568;
            transform: rotate(0deg);
            transition: all 0.3s ease-in;
            position: absolute;
            left: 95px;
            top: 15px;
            outline: none;
            text-align: center;
            line-height: 20px;
            padding: 0; }
            body aside nav ul li a button:hover {
              transform: rotate(135deg);
              transition: all 0.2s ease-in;
              color: #cfd2d9; }
          body...

JavaScript

$(document).ready(function(){
  $("button").on("click", function(){
    $(this).parents("li").slideUp("normal", function(){$(this).remove();});
  });
});