Vertical CSS Menus

index.slim

.container
  h1 Vertical CSS Menu
  .overlay
  .container-header
    .container-header-items
      .container-items
        .logo
          .box-icon-logo
            - 3.times do
              .item-logo
        .btn-close
          - 3.times do
            .icon-item
        .item
          .menu-item
            svg.icon.icon-fly
              use(xlink:href="#icon-fly")
            .menu-text Strategy
        .item
          a.menu-item href="#team"
            svg.icon.icon-man
              use(xlink:href="#icon-man")
            .menu-text Team
        .item
          .menu-item
            svg.icon.icon-info
              use(xlink:href="#icon-info")
            .menu-text About
        .item
          .menu-item
            svg.icon.icon-star
              use(xlink:href="#icon-star")
            .menu-text Testimonials
        .item
          .menu-item
            svg.icon.icon-doc-menu
              use(xlink:href="#icon-doc-menu")
            .menu-text Odd Ends
        .item.item-footer
          .menu-item
            svg.icon.icon-email-menu
              use(xlink:href="#icon-email")
            .menu-text Info

| <svg data-duration="10" data-delay="45" display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>


    <symbol id="icon-heart-active" width="122px" height="224px" viewBox="0 0 122 224">

      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="direction202" sketch:type="MSLayerGroup" fill="#010002">
          <path d="M6.179,223.413 L0.224,217.276 L108.925,111.71 L0.224,6.127 L6.179,0 L121.189,111.71 L6.179,223.413 Z" id="Shape" sketch:type="MSShapeGroup"></path>
        </g>
      </g>
    </symbol>

    <symbol id="icon-heart" viewBox="0 0 512 512">
      <path id="favorite-6-icon" d="M256,462L53.676,284.644V130.646L169.034,50L256,104.977L342.965,50l115.359,80.646v153.998L256,462z
	 M93.801,266.457L256,408.64l162.198-142.183V151.553l-76.35-53.375L256,152.447l-85.849-54.27l-76.351,53.375V266.457z"></path>
    </symbol>

    <symbol id="icon-arrow" width="39" height="31" viewBox="0 0 39 31">
      <path class="cls-1" d="M3283.77,358h-14.79a1,1,0,0,1,0-2.007h14.79a10.493,10.493,0,0,0,0-20.982,1,1,0,0,1,0-2.007A12.5,12.5,0,0,1,3283.77,358Zm-0.75-23h-25.04a1,1,0,0,1,0-2h25.04A1,1,0,0,1,3283.02,335Zm-19.03,6a0.983,0.983,0,0,1-.7-0.293l-6-6a1,1,0,0,1,0-1.415l6-6a1,1,0,0,1,1.41,1.414L3259.41,334l5.29,5.294a1,1,0,0,1,0,1.414A0.989,0.989,0,0,1,3263.99,341Z" transform="translate(-3257 -327)"></path>
    </symbol>

    <symbol id="icon-book" width="94" height="132" viewBox="0 0 94 132">
      <path class="cls-1" d="M1905.27,1370a5.68,5.68,0,0,1-1.41-.18l-0.1-.02-50.42-15.55c-1-.27-9.34-2.85-9.34-15.16V1259.5l0.02-.15c0.06-.36,1.46-8.81,9.21-10.47,5.43-1.17,56.5-7.98,78.3-10.86a5.722,5.722,0,0,1,6.47,5.67v87.38a8.723,8.723,0,0,1-4.52,7.78c-2.16,1.16-5.32,1.15-8.52,1.15h-1.97v-78a1.965,1.965,0,1,1,3.93,0v73.92c1.68-.17,3.52.02,4.68-0.6a4.8,4.8,0,0,0,2.39-4.25v-87.38a1.714,1.714,0,0,0-.58-1.29,1.689,1.689,0,0,0-1.36-.41c-16.97,2.24-72.54,9.63-77.98,10.8-4.68,1-5.9,6.16-6.08,7.05v79.25c0,9.68,6.29,11.27,6.35,11.29l0.13,0.03,50.41,15.54a1.716,1.716,0,0,0,2.1-1.67V1280.3a1.7,1.7,0,0,0-1.22-1.64l-0.15-.06-38.07-15a3.856,3.856,0,0,1,.72-7.49l56.82-7.26a2,2,0,0,1,.5,3.97l-56.25,7.19,37.68,14.84a5.689,5.689,0,0,1,3.99,5.45v83.98a5.694,5.694,0,0,1-2.21,4.51A5.773,5.773,0,0,1,1905.27,1370Zm-6.48-66.26a2.111,2.111,0,0,1-.74-0.14l-43.29-17.18a2,2,0,0,1,1.47-3.72l43.3,17.18A2,2,0,0,1,1898.79,1303.74Zm0,17.75a1.907,1.907,0,0,1-.74-0.14l-43.29-17.18a2,2,0,1,1,1.47-3.71l43.3,17.18A2,2,0,0,1,1898.79,1321.49Zm0,17.76a2.111,2.111,0,0,1-.74-0.14l-43.29-17.18a2,2,0,0,1,1.47-3.72l43.3,17.18A2,2,0,0,1,1898.79,1339.25Z" transform="translate(-1844 -1238)"></path></symbol>

    <symbol id="icon-fin" width="88" height="131" viewBox="0 0 88 131">
      <path class="cls-1" d="M2262.81,1305.89A1.754,1.754,0,0,1,2261,1304v-48c0-5.2,3.76-10,9-10a10.415,10.415,0,0,1,10,10v34a2,2,0,1,1-4,0v-34a6.428,6.428,0,0,0-6-6c-3.03,0-5,3-5,6v47C2265,1304.1,2263.92,1305.89,2262.81,1305.89Zm44.18,2.12a2,2,0,0,1-2-2L2305,1256a6.428,6.428,0,0,0-6-6,1.676,1.676,0,0,1-1.92-1.67A2.242,2.242,0,0,1,2299,1246a10.415,10.415,0,0,1,10,10v50.01A2.008,2.008,0,0,1,2306.99,1308.01Zm13.93,25.98A1.906,1.906,0,0,1,2319,1332v-55c0-2.98-2.72-5.04-5.86-5.04a1.982,1.982,0,1,1,0-3.96c5.44,0,9.86,3.84,9.86,9v55.01A2.033,2.033,0,0,1,2320.92,1333.99ZM2283.94,1369c-19.43,0-36.05-13.58-38.67-31.59-0.61-4.23-1.31-9.03-2.33-13.6l-7.75-34.77a9.125,9.125,0,1,1,17.89-3.61l4.13,20.95a2.455,2.455,0,0,0,1.95,1.93c7.24,1.4,24.07,7.47,24.07,33.71a2,2,0,0,1-4,0c0-23.27-14.56-28.58-20.82-29.79a6.421,6.421,0,0,1-5.12-5.08l-4.13-20.95a5.064,5.064,0,0,0-2.65-3.53,5.124,5.124,0,0,0-7.41,5.54l7.74,34.73c1.06,4.72,1.76,9.59,2.39,13.9,2.33,16.05,17.26,28.17,34.71,28.17,19.31,0,35.03-14.62,35.03-32.58a2,2,0,0,1,4,0C2322.97,1352.59,2305.46,1369,2283.94,1369Zm-26.89-58.59a1.995,1.995,0,0,1-1.39-3.43c7.44-7.17,16.65-10.69,27.34-10.98,5.9,0,7.02-.23,6.87-0.1a0.328,0.328,0,0,0,.13-0.26V1248c0-4.11-2.68-6-5-6-2.39,0-5,1.61-5,6v8a1.983,1.983,0,0,1-2.19,1.76A1.653,1.653,0,0,1,2276,1256l-0.2-7.67c0-6.79,4.82-10.33,9.2-10.33,4.31,0,9,3.48,9,10v48a3.809,3.809,0,0,1-1.14,3.08,4.395,4.395,0,0,1-3.38,1.09c-2.24-.22-5.74-0.31-5.76-0.31a36.224,36.224,0,0,0-25.27,9.99A2.025,2.025,0,0,1,2257.05,1310.41Zm56.41-40.42M2305,1277c0-3.66,1.94-9,8.46-9a2,2,0,1,1,0,3.99c-4.73,0-4.46,4.49-4.46,5.01C2309,1279.21,2305,1279.21,2305,1277Zm-12.71-20.66h-0.02a1.987,1.987,0,0,1-1.99-1.98c0-2.77.96-8.36,8.72-8.36a2.384,2.384,0,0,1,2.09,2.33A1.825,1.825,0,0,1,2299,1250c-5.41,0-4.98,5.32-5,6C2293.97,1257.08,2293.37,1256.34,2292.29,1256.34Z" transform="translate(-2235 -1238)"></path></symbol>

    <symbol id="icon-speak" width="132" height="126" viewBox="0 0 132 126">
      <path class="cls-1" d="M2637,1336a3.993,3.993,0,0,1-4-4v-21a34.424,34.424,0,0,1-25-33.08,35.028,35.028,0,0,1,35-34.92h24a35,35,0,0,1,0,70h-6l-21,22A4.238,4.238,0,0,1,2637,1336Zm6-89a31.1,31.1,0,0,0-31,31c0,14.17,9.12,26.54,23,30h2v24l23-23h7a31,31,0,0,0,0-62h-24Zm68,122a3.709,3.709,0,0,1-2.7-1.18L2687,1346h-6a34.749,34.749,0,0,1-25.37-11.15,2,2,0,0,1,2.93-2.72A30.739,30.739,0,0,0,2681,1342h7l23,23v-24h2a30.567,30.567,0,0,0,23-29.98,31.09,31.09,0,0,0-22.26-29.7,1.994,1.994,0,1,1,1.11-3.83,35.092,35.092,0,0,1,25.15,33.53c0,15.48-10.28,28.57-25,32.98v21a3.869,3.869,0,0,1-2.34,3.69A4.6,4.6,0,0,1,2711,1369Zm-28.98-42a1.98,1.98,0,0,1-1.43-.59,2.025,2.025,0,0,1,0-2.87l24.93-24.97a2.029,2.029,0,0,1,2.87,2.87l-24.93,24.97A2.019,2.019,0,0,1,2682.02,1327Zm24,0a1.951,1.951,0,0,1-1.39-.57l-12.08-12.11a1.962,1.962,0,0,1,2.78-2.77l12.08,12.1A1.96,1.96,0,0,1,2706.02,1327Zm-55.5-33.01a3.932,3.932,0,0,1-2.82-1.18l-12.14-12.3a2.028,2.028,0,0,1,0-2.85,1.983,1.983,0,0,1,2.82,0l12.14,12.3,23.08-23.39a1.974,1.974,0,0,1,2.82,0,2.028,2.028,0,0,1,0,2.85l-23.08,23.39A3.966,3.966,0,0,1,2650.52,1293.99Z" transform="translate(-2608 -1243)"></path></symbol>

    <symbol id="icon-doc" width="98" height="132" viewBox="0 0 98 132">
      <path class="cls-1" d="M2126.77,1701h-90a3.683,3.683,0,0,1-3.77-3.85V1582.26a4.041,4.041,0,0,1,3.77-4.26h12.4a2,2,0,0,1,0,4H2037v115h90V1582h-23.56c-1.1,0-1.41-.9-1.41-2s0.31-2,1.41-2h23.33a4.43,4.43,0,0,1,4.23,4.26v114.89A4.077,4.077,0,0,1,2126.77,1701Zm-11.2-88h-67.89a2,2,0,0,1,0-4h67.89A2,2,0,1,1,2115.57,1613Zm0,18h-67.89a2,2,0,0,1,0-4h67.89A2,2,0,1,1,2115.57,1631Zm0,18h-67.89a2,2,0,0,1,0-4h67.89A2,2,0,1,1,2115.57,1649Zm0,18h-67.89a2,2,0,0,1,0-4h67.89A2,2,0,1,1,2115.57,1667Zm-9.57-80a4,4,0,0,1-4,4h-40a4,4,0,0,1-4-4v-14a4,4,0,0,1,4-4h40a4,4,0,0,1,4,4v14Zm-44-14v14h40.03v-14H2062Z" transform="translate(-2033 -1569)"></path></symbol>

    <symbol id="icon-atom" width="132.12" height="132" viewBox="0 0 132.12 132">
      <path class="cls-1" d="M2477.49,1702c-13.67,0-24.87-22.23-27.25-54.05a2,2,0,1,1,3.99-.3c2.15,28.7,12.15,50.35,23.26,50.35,12.84,0,23.69-28.39,23.69-62s-10.85-62-23.69-62c-7.63,0-15.14,10.56-19.59,27.56a2,2,0,1,1-3.87-1.02c5.01-19.12,13.78-30.54,23.46-30.54,15.53,0,27.69,28.99,27.69,66S2493.02,1702,2477.49,1702Zm-48.77-24.33c-7.31,0-12.58-1.78-15.3-5.33a10.638,10.638,0,0,1-1.69-8.98c2.63-12.85,23-31.94,50.68-47.5,31.45-17.68,69.66-28.58,79.15-16.2a10.441,10.441,0,0,1,1.78,8.51c-1.91,10.96-17.05,26.75-39.5,41.19a2,2,0,0,1-2.17-3.37c21.22-13.64,36.03-28.76,37.73-38.51a6.579,6.579,0,0,0-1.02-5.39c-6.3-8.22-37.54-3.24-74.01,17.26-26.31,14.79-46.34,33.22-48.72,44.81a6.77,6.77,0,0,0,.95,5.75c4.17,5.44,19.32,4.88,38.59-1.43a2,2,0,1,1,1.25,3.8C2445.47,1675.87,2436.06,1677.67,2428.72,1677.67Zm97.65,0.19c-16.46.01-41.96-9.21-64.09-21.8-27.56-15.68-47.81-34.85-50.38-47.71-0.71-3.56-.12-6.58,1.75-8.99,5.49-7.07,21.1-7,42.84.2a189.115,189.115,0,0,1,21.86,8.88,2,2,0,0,1-1.73,3.61,187.216,187.216,0,0,0-21.39-8.7c-19.15-6.33-34.22-6.94-38.42-1.54a6.771,6.771,0,0,0-.98,5.75c2.32,11.61,22.23,30.12,48.43,45.03,36.34,20.67,67.55,25.79,73.9,17.6,3.23-4.16-.26-12.44-9.34-22.14a2,2,0,1,1,2.93-2.73c10.84,11.6,14.25,21.3,9.58,27.32C2538.52,1676.26,2533.23,1677.86,2526.37,1677.86Zm-48.66-32.31a9.555,9.555,0,1,1,9.56-9.55A9.566,9.566,0,0,1,2477.71,1645.55Zm0-15.11a5.555,5.555,0,1,0,5.56,5.56A5.567,5.567,0,0,0,2477.71,1630.44Z" transform="translate(-2411.44 -1570)"></path>
    </symbol>

    <symbol id="icon-email" width="26px" height="21px" viewBox="0 0 26 21">
      <path class="cls-1" d="M3406.8,2205h-22.01a1.625,1.625,0,0,1-1.8-1.74V2192a1.01,1.01,0,0,1,2.02,0v11h21.79a1.248,1.248,0,0,0,.21-0.02V2192a1,1,0,1,1,1.99,0v11.26C3409,2204.3,3408.11,2205,3406.8,2205Zm-11.03-9.05a2.13,2.13,0,0,1-1.25-.39l-0.01-.01-10.69-7.85a1.954,1.954,0,0,1-.73-2.22,2.134,2.134,0,0,1,2.06-1.48h21.42a2.134,2.134,0,0,1,2.06,1.48,1.974,1.974,0,0,1-.73,2.23l-10.73,7.78A2.369,2.369,0,0,1,3395.77,2195.95Zm-0.09-2.02a0.7,0.7,0,0,0,.47-0.06l10.86-7.79v0.01a2.277,2.277,0,0,0-.44-0.09h-21.42a0.141,0.141,0,0,0-.17.1Z" transform="translate(-3383 -2184)"></path></symbol>

    <symbol id="icon-ipad" width="18px" height="26px" viewBox="0 0 18 26">
      <path class="cls-1" d="M3612,2207h-14a2.006,2.006,0,0,1-2-2v-22a2.006,2.006,0,0,1,2-2h14a2.006,2.006,0,0,1,2,2v22A2.006,2.006,0,0,1,3612,2207Zm-14-24v22h14v-22h-14Zm8.5,17.33a1.5,1.5,0,1,1-1.5-1.5A1.5,1.5,0,0,1,3606.5,2200.33Z" transform="translate(-3596 -2181)"></path></symbol>

    <symbol id="icon-map" width="23px" height="28px" viewBox="0 0 23 28">
      <path class="cls-1" d="M3936.5,2207a2.135,2.135,0,0,1-1.46-.58c-4.67-4.43-10.04-10.29-10.04-16.32a11.508,11.508,0,0,1,23,0c0,6.03-5.37,11.89-10.05,16.32A2.093,2.093,0,0,1,3936.5,2207Zm0-25.94a9.243,9.243,0,0,0-9.41,9.04c0,5.26,5.03,10.69,9.41,14.84v0.01h0c4.38-4.16,9.41-9.59,9.41-14.85A9.243,9.243,0,0,0,3936.5,2181.06Zm0,14.94a5.5,5.5,0,1,1,5.49-5.5A5.5,5.5,0,0,1,3936.5,2196Zm0-9.01a3.51,3.51,0,1,0,3.54,3.51A3.534,3.534,0,0,0,3936.5,2186.99Z" transform="translate(-3925 -2179)"></path></symbol>

    <symbol id="icon-info" width="24" height="24" viewBox="0 0 24 24">
      <path class="cls-1" d="M3142.01,162a12,12,0,1,1,12-12A12.01,12.01,0,0,1,3142.01,162Zm-0.02-21.989A9.992,9.992,0,1,0,3152,150,10,10,0,0,0,3141.99,140.011Zm1.02,15.994h-2v-8.014h2v8.014Zm0-10h-2v-2h2v2Z" transform="translate(-3130 -138)"></path></symbol>

    <symbol id="icon-fly" width="22" height="21" viewBox="0 0 22 21">
      <path class="cls-1" d="M3140.77,231a2.235,2.235,0,0,1-.4-0.046,1.819,1.819,0,0,1-1.07-.682A2.146,2.146,0,0,1,3139,229v-7h-7c-1.06,0-1.68-.05-1.95-1.23a1.918,1.918,0,0,1,.12-1.207,1.849,1.849,0,0,1,.87-0.9l18.25-8.474a1.9,1.9,0,0,1,2.18.37,1.834,1.834,0,0,1,.32,2.159l-9.36,17.24A1.777,1.777,0,0,1,3140.77,231Zm0.23-11v8l8.82-15.837L3133,220h8Z" transform="translate(-3130 -210)"></path></symbol>

    <symbol id="icon-man" width="21" height="22" viewBox="0 0 21 22">
      <path class="cls-1" d="M3141.5,290a5.5,5.5,0,1,1,5.51-5.5A5.517,5.517,0,0,1,3141.5,290Zm0-8.967a3.469,3.469,0,1,0,3.48,3.469A3.478,3.478,0,0,0,3141.5,281.03ZM3151.99,301h-20.98v-0.957c0-3.89,4.7-7.055,10.49-7.055s10.49,3.165,10.49,7.055V301ZM3133,299h17c-0.76-2.348-4.44-4.1-8.5-4.1S3133.76,296.652,3133,299Z" transform="translate(-3131 -279)"></path></symbol>

    <symbol id="icon-star" width="24" height="23" viewBox="0 0 24 23">
      <path class="cls-1" d="M3148.48,372.012a2.033,2.033,0,0,1-1.02-.29l-5.46-2.868-5.49,2.884a1.663,1.663,0,0,1-2.2-.326,1.751,1.751,0,0,1-.33-1.052,2.816,2.816,0,0,1,.04-0.411l1.05-6.135-4.45-4.328a1.993,1.993,0,0,1-.63-1.344,1.616,1.616,0,0,1,1.58-1.588l6.15-.894,2.75-5.565A1.653,1.653,0,0,1,3142,349a1.678,1.678,0,0,1,1.55,1.116l2.74,5.543,6.13,0.892a1.613,1.613,0,0,1,1.59,1.59,1.89,1.89,0,0,1-.63,1.335l-4.45,4.336,1.06,6.113c0.01,0.125.02,0.258,0.02,0.434a1.791,1.791,0,0,1-.32,1.048A1.455,1.455,0,0,1,3148.48,372.012Zm-6.48-5.395,5.95,3.127-1.14-6.621,4.8-4.689-6.63-.965-2.98-6.016-2.97,6.016-6.65.967,4.82,4.686-1.14,6.621Z" transform="translate(-3130 -349)"></path></symbol>

    <symbol id="icon-doc-menu" width="28" height="19" viewBox="0 0 28 19">
      <path class="cls-1" d="M3130.99,420v15.015L3133,435V422h20l0.01,14.154a0.8,0.8,0,0,1-.25.6,0.871,0.871,0,0,1-.62.252l-22.3,0a0.8,0.8,0,0,1-.6-0.264,0.862,0.862,0,0,1-.25-0.625L3129,422h-2l-0.01,14.436a2.547,2.547,0,0,0,2.56,2.545l22.85,0.032a2.588,2.588,0,0,0,2.59-2.593V420h-24ZM3151.01,425v2.009h-16.02V425h16.02Zm0,5.011v1.972h-16.02v-1.972h16.02Z" transform="translate(-3127 -420)"></path></symbol>

    <symbol id="icon-slider-arrow" width="15" height="36" viewBox="0 0 15 36">
      <path class="cls-1" d="M2857.04,442.987a1.031,1.031,0,0,1-.64-0.218,1.013,1.013,0,0,1-.17-1.426l12.19-16.3-12.21-16.412a1,1,0,0,1,.22-1.418,1.026,1.026,0,0,1,1.43.217L2871,425.09l-13.16,17.51A1.018,1.018,0,0,1,2857.04,442.987Z" transform="translate(-2856 -407)"></path></symbol>

    <symbol id="icon-in" viewBox="0 0 128 128">
      <g><rect height="62.915" width="20.914" x="16.452" y="47.708"></rect><path d="M27.048,17.377c-7.155,0-11.838,4.695-11.838,10.868c0,6.041,4.545,10.877,11.562,10.877h0.141   c7.293,0,11.832-4.836,11.832-10.877C38.607,22.072,34.206,17.377,27.048,17.377z"></path><path d="M88.706,46.229c-11.11,0-16.075,6.116-18.853,10.396v0.204h-0.135c0.039-0.064,0.096-0.138,0.135-0.204v-8.917H48.937   c0.279,5.904,0,62.915,0,62.915h20.917V75.486c0-1.884,0.141-3.754,0.693-5.1c1.515-3.761,4.954-7.65,10.734-7.65   c7.569,0,10.597,5.772,10.597,14.227v33.661h20.914V74.545C112.791,55.22,102.473,46.229,88.706,46.229z"></path></g></symbol>

    <symbol id="icon-tw" viewBox="0 0 56.693 56.693">
      <path d="M52.837,15.065c-1.811,0.805-3.76,1.348-5.805,1.591c2.088-1.25,3.689-3.23,4.444-5.592c-1.953,1.159-4.115,2-6.418,2.454  c-1.843-1.964-4.47-3.192-7.377-3.192c-5.581,0-10.106,4.525-10.106,10.107c0,0.791,0.089,1.562,0.262,2.303  c-8.4-0.422-15.848-4.445-20.833-10.56c-0.87,1.492-1.368,3.228-1.368,5.082c0,3.506,1.784,6.6,4.496,8.412  c-1.656-0.053-3.215-0.508-4.578-1.265c-0.001,0.042-0.001,0.085-0.001,0.128c0,4.896,3.484,8.98,8.108,9.91  c-0.848,0.23-1.741,0.354-2.663,0.354c-0.652,0-1.285-0.063-1.902-0.182c1.287,4.015,5.019,6.938,9.441,7.019  c-3.459,2.711-7.816,4.327-12.552,4.327c-0.815,0-1.62-0.048-2.411-0.142c4.474,2.869,9.786,4.541,15.493,4.541  c18.591,0,28.756-15.4,28.756-28.756c0-0.438-0.009-0.875-0.028-1.309C49.769,18.873,51.483,17.092,52.837,15.065z"></path>
    </symbol>

    <symbol id="icon-menu-logo" width="42" height="22" viewBox="0 0 42 22">
      <path id="Logo" class="cls-1" d="M1589,80V73h13V65h19V87h-42V80h10Z" transform="translate(-1579 -65)"></path></symbol>

    <symbol id="icon-logo" viewBox="0 0 194 103">
      <path id="Logo_copy" data-name="Logo copy" class="cls-1" d="M1750,949V916h59V880l87,0v100H1705V949h45Z" transform="translate(-1703.5 -878.5)"></path></symbol>

    <symbol id="icon-share" viewBox="0 0 17 26">
      <path id="share" class="cls-1" d="M4094,349.005a4.006,4.006,0,1,1,4.01-4.006A4.013,4.013,0,0,1,4094,349.005Zm0-6.123a2.117,2.117,0,1,0,2.08,2.117A2.106,2.106,0,0,0,4094,342.882Zm9-2.87a4.006,4.006,0,1,1,4.01-4.006A4.013,4.013,0,0,1,4103,340.012Zm0-6.123a2.118,2.118,0,1,0,2.07,2.117A2.1,2.1,0,0,0,4103,333.889ZM4103,358a4.006,4.006,0,1,1,4.01-4.006A4.013,4.013,0,0,1,4103,358Zm0-6.123a2.118,2.118,0,1,0,2.07,2.117A2.1,2.1,0,0,0,4103,351.877Zm-6.05-8.426-1.44-1.4,4.13-4.221,1.45,1.394Zm2.65,8.761-4.09-4.178,1.44-1.393,4.09,4.177Z" transform="translate(-4090 -332)"></path></symbol>

    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"></feColorMatrix>
      <feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
    </filter>

  </defs>
</svg>
a.box-item href="https://codepen.io/Anna_Batura/" target="_blank"
  svg class="rabbit" viewBox="0 0 600 600" version="1.2"
    path id="rabbit" d="m 335.94313,30.576451 c -9.79312,-0.146115 -17.39091,4.439466 -17.39091,13.789758 0,11.508038 -2.91019,60.415461 1.40532,76.238951 4.31553,15.82355 21.58583,38.97215 34.51834,54.67597 10.06946,12.22726 4.34772,41.69626 4.34772,56.0813 0,14.38499 -2.89751,25.9107 -8.65153,25.9107 -5.75402,0 -14.35971,5.75217 -20.11373,11.50612 -5.75395,5.75402 -11.51588,12.95631 -18.70841,7.20229 -7.19251,-5.75402 -20.15388,-11.49441 -43.16987,-15.80992 -23.01609,-4.31551 -61.84129,-0.0234 -86.29583,8.60763 -24.45458,8.63104 -76.25857,56.11061 -90.643535,77.6882 -14.385056,21.5775 -15.799189,87.73247 -14.36068,97.80193 1.438509,10.06953 -2.908267,17.28255 -10.100778,8.65153 -7.192459,-8.63104 -12.911438,-4.30381 -12.911438,-4.30381 0,0 -7.202292,14.37045 -7.202292,21.56298 0,7.19244 2.854564,14.36068 2.854564,14.36068 0,0 -11.506099,8.65056 -11.506099,14.40458 0,5.75397 11.515881,15.83044 18.708391,24.46146 7.192546,8.63097 31.651182,25.89997 41.720624,24.46148 10.069543,-1.43851 28.775063,-0.0121 35.967573,4.3038 7.19253,4.31551 24.44687,10.06761 46.02443,11.5061 21.57752,1.43851 81.97845,5.75307 97.80193,5.75307 15.82357,0 20.1675,-2.86435 27.35996,-10.05688 7.19253,-7.19245 -5.78527,-15.84115 -10.10079,-25.9107 -4.31551,-10.06946 14.40363,-7.16912 20.15765,-8.60763 5.75402,-1.43849 21.59424,-11.5061 31.66376,-11.5061 10.06953,0 8.6165,10.05589 21.56298,15.80993 12.94654,5.75393 31.63939,24.43902 46.02443,27.31602 14.38497,2.87695 47.47173,0.0121 58.97979,-4.30381 11.50797,-4.31551 10.06946,-14.37044 0,-21.56297 -10.06955,-7.19244 -34.50663,-20.16742 -38.82214,-27.35994 -4.31551,-7.19246 -5.74329,-15.81969 1.44924,-23.01224 7.19251,-7.19252 14.35876,-4.30292 25.86678,-10.05685 11.50806,-5.75402 15.80992,-23.04354 15.80992,-33.11301 0,-10.06953 1.36928,-21.01352 5.75307,-27.31602 3.67345,-5.28128 5.10015,-22.13212 5.30499,-33.64009 0.21874,-12.28864 -5.29329,-15.24871 -9.60881,-22.44122 -4.31543,-7.19246 4.30285,-17.25917 10.05687,-17.25917 5.75402,0 31.65108,-4.33602 41.72062,-8.65153 10.06946,-4.31546 20.16744,-23.03273 27.35995,-31.66377 7.19246,-8.63095 1.41799,-27.31512 -8.65154,-33.06907 -10.06954,-5.75402 -10.07746,-21.59431 -18.70841,-31.66377 -8.63103,-10.06953 -18.68507,-31.62961 -27.31604,-38.82213 -8.63101,-7.19253 -28.77502,-12.95535 -35.96755,-12.95535 -7.19253,0 -11.50612,9e-4 -11.50612,-5.75306 0,-5.75402 -1.44924,-12.9203 -1.44924,-25.86678 0,-12.94655 -16.24344,-68.464566 -37.3729,-102.149659 -4.40799,-7.027282 -11.5581,-5.405316 -20.15765,-2.898485 -5.69412,1.659863 -8.60761,4.35564 -8.60761,23.056136 0,18.700566 -11.50515,-0.03133 -17.25917,-10.100794 -5.75403,-10.069512 -15.86265,-21.58444 -28.80918,-24.461458 -2.42749,-0.539415 -4.76669,-0.800692 -7.02665,-0.834399 z"

style.sass

@import "compass/css3"
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto)
$color-white: #ffffff
$color-black-ux: #0e0f12
$color-black: #000
$color-blue: #198ada
$header-width: 70px
body
  margin: 0
  height: 100vh
  font-family: 'Roboto', sans-serif
  background: linear-gradient(5deg, #0e0f12, #198ada)
  @include background-size(cover)
  background-repeat: no-repeat
  background-position: center center
  .overlay
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: rgba(0,0,0,.1)
.container
  height: 100vh
h1
  position: fixed
  bottom: -7px
  right: 93px
  color: $color-white
  font-size: 34px
.container-header
  position: fixed
  width: $header-width
  height: 100%
  background: $color-black-ux
  z-index: 2
  .btn-close
    position: absolute
    top: 0
    right: 0
    margin: 20px
    width: 40px
    height: 40px
    background-color: $color-blue
    border-radius: 50%
    display: none
    &:before
      content: ""
      position: absolute
      display: block
      top: -20px
      right: -20px
      width: 90px
      height: 80px
    .icon-item
      display: block
      width: 23px
      height: 2px
      background-color: #fff
      position: absolute
      top: 13px
      right: 9px
      &:nth-child(2)
        top: 19px
      &:nth-child(3)
        top: 25px
  a
    color: #fff
  .logo
    cursor: pointer
    position: relative
    display: block
    height: 80px
    background: $color-blue
    .box-icon-logo
      position: absolute
      top: 30px
      left: 14px
      right: 14px
      height: 22px
      width: 42px
      .item-logo
        display: block
        height: 8px
        background-color: #fff
        float: right
        &:nth-child(1)
          width: 19px
        &:nth-child(2)
          width: 32px
        &:nth-child(3)
          width: 42px

  .menu-item
    cursor: pointer
    position: relative
    display: block
    width: 100%
    height: $header-width
    text-align: center
    line-height: 80px
    @include transition(all 0.3s)
    .icon
      fill: #878789
      @include transition(all 0.3s)
    .menu-text
      position: absolute
      top: 0
      left: -170px
      height: $header-width
      width: 170px
      background-color: $color-blue
      font-size: 24px
      text-align: center
      line-height: $header-width
      color: transparent
      @include transition(all 0.3s)
    &:hover
      background: $color-blue
      .icon
        fill: #fff
      .menu-text
        color: #124268
        left: $header-width
    &:focus
      color: $color-blue
  .item
    &.active
      .menu-item
        background: $color-blue
        .icon
          fill: #fff

.icon-info
  width: 24px
  height: 24px
.icon-fly
  width: 22px
  height: 21px
.icon-man
  width: 21px
  height: 22px
.icon-star
  width: 24px
  height: 23px
.icon-doc-menu
  width: 28px
  height: 19px
.icon-email-menu
  width: 27px
  height: 21px

.rabbit
  width: 50px
  height: 50px
  position: absolute
  bottom: 20px
  right: 20px
  z-index: 3
  fill: #fff

vertical-css-menus.markdown

Vertical CSS Menus

A Pen by @BrawadaCom on CodePen.

License.