asked on 4/19/2020

CSS Only Sidebar

Hi Experts,
I would like to create a CSS Only side bar, which looks exactly the same as the image below:

The 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>

Last Comment

4/19/2020

4/19/2020

Angular uses javascript, and without javascript your button won't work!

I am not sure to guess your need.

Stefan Motz

4/19/2020

ASKER

I’d rather say that I don’t know how to use it with Angular. If I paste the JavaScript in the .html component, the script is not working. That’s why I was curious if it’s possible do do it with CSS only.

Louis LIETAER

4/19/2020

After a few search its seem to be possible : http://jsfiddle.net/AA4aK/2/

Louis LIETAER

4/19/2020

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>test</title>
    <style>
html,
body {
  height: 100%
}

body {
  position: relative;
}

header {
  width: 30%;
  height: 100%;
  background-color: #def;
}

article {
  height: 80%;
  background-color: #fde;
}

h1 {
  font-size: 150%;
}

input[type=checkbox] {
  display: none;
}

#header:checked+header {
  display: none;
}

#header:checked~article {
  height: 100%;
}

article label[for=header] {
  display: none;
}

#header:checked~article label[for=header] {
  display: inline-block;
}

#overlay:checked+.overlay {
  display: block;
}

p {
  text-align: center;
  padding: 10px;
}

label {
  display: inline-block;
  padding: 2px 4px;
  border: 1px solid #333;
  background-color: rgba(32, 32, 32, 0.9);
  border-radius: 6px;
  font-size: 80%;
  font-weight: bold;
  color: #fff;
}

#all:checked~header {
  background-color: #fde;
}

#all:checked~article {
  background-color: #def;
}

</style> </head>
  <body> <input id="header" type="checkbox">
    <header>Logo
      <h1>Title</h1>
      <label for="header">Hide header</label></header>
    <article> <label for="header">Show header</label> </article>
  </body>
</html>

Open in new window

Here something close to what you asked for but not finished

Stefan Motz

4/19/2020

ASKER

Thank you for your quick response. I've just tried to use your examples in Angular and it's working fine.
I'm trying to make it look like my example, but as I'm not too good at CSS, I'm having difficulties.This is how far I could go, I'm not sure how to make the tabs appear in the desired position:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>test</title>
    <style>
html,
body {
  height: 100%
}

body {
  position: relative;
}

        #collapsed {
         margin-top: 30px;
            margin-left: -12px;
          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: #000080;
            background-color: #FFFFFF;         
        }
      
              #expanded {
         margin-top: 30px;
            margin-left: 450px;
          border-bottom-color: black;
            border-width: 1px;
          border-style: double;
            border-color: #CCCCCC;
            border-width: 1px;
            width: 20px;
         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: #000080;   
         background-color: #FFFFFF;
        }

header {
  width: 30%;
  height: 100%;
  background-color: #def;
}

article {
  height: 80%;
  background-color: #FFDDEE;
  width: 450px;
}

input[type=checkbox] {
  display: none;
}

#header:checked+header {
  display: none;
}

#header:checked~article {
  height: 100%;
}

article label[for=header] {
  display: none;
}

#header:checked~article label[for=header] {
  display: inline-block;
}

#overlay:checked+.overlay {
  display: block;
}

p {
  text-align: center;
  padding: 10px;
}

label {
  display: inline-block;

}

#all:checked~header {
  background-color: #FFDDEE;

}

#all:checked~article {
  background-color: #def;
  width: 450px;
}

</style> </head>
  <body> 
  <input id="header" type="checkbox">
    <header>
   <label for="header"><div id="collapsed" class="">Closed</div></label>
    </header>
    <article> <label for="header"><div id="expanded" class="">&gt;</div></label> </article>
   
  </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Louis LIETAER

4/19/2020

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Stefan Motz

4/19/2020

ASKER

Thank you very much, I think I will be able to finish from here.