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">
  <title>JS Bin</title>
</head>
<body>
<ul id="doc">
            <li>
                <div id="menu_div">
                    &nbsp;
                </div>
            </li>
            <li>
                <div id="main_div">
                    <div id="menu_caller_div">
                        <img id="menu_button_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACdSURBVEhLxdExCsAwDEPRHL0H7V3SP0qg0VaHZ5AwOJBz7/1FLBti2eDFeZ81egcWWGAuYSoLLOTXTtA7sNAUy4ZYNniR/maK3oEFFphLmMoCC/m1E/QOLDTFsiGWDV6kv5mid2CBBeYSprLAQn7tBL0DC02xbIhlgxfpb6boHVhggbmEqSywkF87Qe/AQlMsG2LZEMuGWDbEct89H4c4AQeTn2/wAAAAAElFTkSuQmCC" >
                    </div>
                </div>
            </li>
        </ul>
</body>
</html>
 
* {
            margin: 0px;
            padding: 0px;
            position: relative;
        }
​
        ul {
            list-style: none;
        }
​
        #menu_div {
            background-color: #3B444B;
            width: 0%;
            float: left;
          transition: width 1s;
        }
​
        #main_div {
            background-color: white;
            transition: margin 1s;
        }
​
        #menu_caller_div {
            height: 5%;
            background-color: #9c27b0;
        }
​
        #menu_button_img {
        }
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers