troubleshooting Question

CSS Only Sidebar

Avatar of Stefan Motz
Stefan MotzFlag for United States of America asked on
7 Comments1 Solution36 ViewsLast Modified:
Hi Experts,
I would like to create a CSS Only side bar, which looks exactly the same as the image below:
Drawer collapsed and drawer expandedThe code below uses JavaScript, and I'm not able to use it in my Angular project, that's why I would like to eliminate the JavaScript. I would appreciate your help.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
        .buttonset {
            height: 16px;
            margin-top: 30px;
            margin-left: -12px;
        #nav_list {
		    border-bottom-color: black;
            border-width: 1px;
		    border-style: double;
            border-color: #CCCCCC;
            border-width: 1px;
            width: 80px;
			height: 30px;
            border-radius: 0 10px 10px 0;
            padding-left: 10px;
			padding-bottom: 0px;
			box-shadow: inset 0 0 0 1px #AAAAAA;
			box-shadow: 3px 3px #AAAAAA;  
			font: bold 16px/1.5em "Arial, ", sans-serif;
			padding-top: 8px;			
			padding-bottom: 0px;	
			color: #BAAED9;			
        } {
            width: 20px;
			color: #BAAED9;
			font-weight: bold%;
        .pushmenu {
            background: #eee;
			border-right: 1px solid #CCCCCC; 
            text-align: center;
            font-family: Tahoma, Geneva, sans-serif;
            width: 300px;
            height: 100%;
            top: 0;
            z-index: 1000;
            position: fixed;

        .pushmenu-left { left: -300px; }

        .pushmenu-left.pushmenu-open { left: 0; }

        .pushmenu-push {
            overflow-x: hidden;
            position: relative;
            left: 0;

        .pushmenu-push-toright { left: 300px; }
        .pushmenu, .pushmenu-push {
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            transition: all 0.5s ease;
        window.addEventListener("DOMContentLoaded", function(event) {
            var menuLeft = document.getElementsByClassName('pushmenu-left')[0];
            var nav_list = document.getElementById('nav_list');
            nav_list.addEventListener("click", function() {
                var pushmenuPush = document.getElementsByClassName('pushmenu-push')[0];
                setTimeout(function() {
                    nav_list.innerText = nav_list.className.indexOf("active")>=0 ? "<" : ">" ;
<body class="pushmenu-push">
<section class="buttonset">
    <div id="nav_list" class="">Open</div>
<nav class="pushmenu pushmenu-left">

<br /><br /><br />Some content comes here


Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 7 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros