troubleshooting Question

CSS Only Sidebar

Avatar of Stefan Motz
Stefan MotzFlag for United States of America asked on
CSSHTML
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>
<html>
<head>
<title>Sidenav</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
        .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;			
        }
		
		#nav_list.active {
            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;
        }
</style>
<script>
        window.addEventListener("DOMContentLoaded", function(event) {
            var menuLeft = document.getElementsByClassName('pushmenu-left')[0];
            var nav_list = document.getElementById('nav_list');
            nav_list.addEventListener("click", function() {
                this.classList.toggle('active');
                var pushmenuPush = document.getElementsByClassName('pushmenu-push')[0];
                pushmenuPush.classList.toggle('pushmenu-push-toright');
                menuLeft.classList.toggle('pushmenu-open');
                setTimeout(function() {
                    nav_list.innerText = nav_list.className.indexOf("active")>=0 ? "<" : ">" ;
                },100);
            });
        });
		</script>
</head>
<body class="pushmenu-push">
<section class="buttonset">
    <div id="nav_list" class="">Open</div>
</section>
<nav class="pushmenu pushmenu-left">

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

</nav>


</body>
</html> 
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