Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
    <div id="verticalMenu" class="vMenu">
        <a href="javascript:void(0)" class="toggleIcon" onclick="closeTab()">X</a>
        <a href="#">Main</a>
        <a href="#">Shop</a>
        <a href="#">Products</a>
        <a href="#">Contact</a>
        <a href="#">Carier</a>
    </div>
    
    <div id="manage" onclick="openTab()">
        <!-- <button class="openBtn" onclick="openTab()">☰Toggle SideBar</button>-->
        <div class="tab1"></div>
        <div class="tab2"></div>
        <div class="tab3"></div>
        <p>Click in this icon on top to active menu on the left side</p>
    </div>
    
    <script>
        
        function openTab()
        {
        
        var toggleStatus = false;
        
        if(toggleStatus === false)
        {
        document.getElementById("manage").classList.toggle("change");
        document.getElementById("verticalMenu").style.width = "250px";
        document.getElementById("manage").style.marginLeft = "250px";
        
        var toggleStatus = true;
        }
        
        else if(toggleStatus === true)
        {
        document.getElementById("change").classList.toggle("manage");
        document.getElementById("verticalMenu").style.width = "0px";
        document.getElementById("manage").style.marginLeft = "0px";
        
        var toggleStatus = false;
        }
        }
        
        /*
        function closeTab()
        {
        document.getElementById("verticalMenu").style.width = "0";
        document.getElementById("manage").style.marginLeft = "0";
        }
*/
</script>
​
​
</body>
</html>
 
​
body
{
    font-family: Arial;
}
​
.vMenu
{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #6495ED;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 60px;
}
​
.vMenu a
{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}
​
.vMenu a:hover
{
    color: #808080;
}
​
.vMenu .toggleIcon
{
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px; 
    margin-left: 50px;
}
/*
.openBtn
{
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
}
*/
#manage
{
    transition: margin-left .5s;
}
​
@media screen and (max-height: 450px)
{
    .sideBar
    {
        padding-top: 15px;
    }
    
    .sideBar a
    {
        font-size: 18px;
    }
    
}
​
.tab1, .tab2, .tab3
{
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}
​
​
/* Style dla transformacji buttona kanapki */
​
.change .tab11 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
​
.change .tab2 {opacity: 0;}
​
.change .tab3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers