sideBar-flat-componentForZK

by murgiaMarco

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

  <head>

  </head>

  <body>

<!-- Sidebar -->
 <div class="sideBar" style="display:block; top:51px; padding-bottom:102px;">
      <div class="clear sideBarInner">
        <div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
<div class="content">Link 1</div>
      </div>
    </div>
    <div onClick="toggle()" class="sideBarPop" style="top:10px">
<div class="arrow" id="arrow"></div>
</div>
<script type="text/javascript">

        function onLoadSet() {
        var elmnt = (document.getElementsByClassName("sideBarInner")[0].offsetHeight / 2) -
        (document.getElementsByClassName("sideBarPop")[0].offsetHeight / 2)+document.getElementsByClassName("sideBar")[0].offsetTop;
        document.getElementsByClassName("sideBarPop")[0].style.setProperty("top", elmnt + "px");
        document.getElementsByClassName("sideBarPop")[0].style.setProperty("right", "0px");
        document.getElementsByClassName("sideBar")[0].style.display = "none";
        }
        window.onload = onLoadSet;

        function toggle() {
        if (document.getElementsByClassName("sideBarPop")[0].style.right != "0px") {
        document.getElementsByClassName("sideBar")[0].style.display = "none";
        document.getElementsByClassName("sideBarPop")[0].style.setProperty("right", "0px");
	document.getElementsByClassName("arrow")[0].style.left = "8px";
        document.getElementsByClassName("arrow")[0].style.transform = "rotate(-45deg)";

        } else {
    ...

CSS

<style>
        .sideBar {
        display: block;
        position: fixed;
        top: 0px;
        right: 0px;
        width: auto;
        height: 100%;
        pointer-events: none;
        }

        .sideBarInner {
        display: block;
        overflow-y: auto;
        position: relative;
        max-height: 100%;
        top: 0px;
        left: 0px;
        pointer-events: all;
        /* box-shadow:#000000 0px 2px 6px, #000000 0px -2px 6px 0px, #000000 -2px 0px 6px 0px; */
        border: 4px #009688 solid;
        background-color: #009688;
        /* border-top-left-radius:10px; */
        /* border-bottom-left-radius:10px; */
        }

        .content {
        margin-right: 2px;
        display: block;
        position: relative;
        border: 4px #009688 solid;
        border-right: 0px;
        border-radius: 3px;
        width:300px;
        height: 80px;
        background-color: #ffffff;
        pointer-events: all;
        z-index: 99;
        }

        .sideBarPop {
        background-color: #009688;
        background-repeat: no-repeat;
        border: none;
        cursor: pointer;
        outline: none;
        display: inline-block;
        position: fixed;
        width: 20px;
        height: 30px;
        pointer-events: all;
        /* border-top-left-radius:2px; */
        /* border-bottom-left-radius:2px; */
        /* box-shadow:#000000 -2px 2px 2px, #000000 -2px -2px 2px; */
        z-index: 0;
        }

        .clear {
        clear: both;
        }

        .arrow {
        position: relative;
        left: 8px;
        top:8px;
        width: 12px;
        height: 12px;
        border: 3.5px solid;
        border-color: white transparent transparent white;
        transform: rotate(-45deg);
        }

        .sideBarInner::-webkit-scrollbar {
        width: 8px;
        }

        .sideBarInner::-webkit-scrollbar-track {
        border-left: 2px solid transparent;
        border-right: 2px solid transparent;
       ...