If you're looking for a slide-in effect from the left using CSS, you can achieve this by applying hover styles. Check out this JSFiddle to see it in action.
#holder {
width: 200px;
height: 100%;
background-color: yellow;
position: relative;
left: -170px;
-webkit-transition: left 1s;
transition: left 1s;
cursor:pointer;
}
#holder:hover {
left: 0;
-webkit-transition: left 1s;
transition: left 1s
}
.select {
font-size: 175%;
background-color: clear;
width: 15%;
padding: 5px;
}
.catselect {
text-decoration: none
}
#categories {
font-weight: 800;
top: .25%;
left: 2%;
}
#myHeader1 {
top: 7%;
left: 3%;
}
#myHeader2 {
top: 11.5%;
left: 3%;
}
#myHeader3 {
top: 16%;
left: 3%;
}
<div id="holder">
<h1 id="categories">Categories</h1>
<div class="select"> <a id="myHeader1" class="catselect" href="#">Comedy</a>
</div>
<div class="select"> <a id="myHeader2" class="catselect" href="#r">Horror</a>
</div>
<div class="select"> <a id="myHeader3" class="catselect" href="#">Action</a>
</div>
</div>
Based on a comment, an updated version is available:
To achieve a more dynamic sliding effect as requested, take a look at this updated JSFiddle. By combining both CSS and JavaScript, you can create a seamless sliding animation when interacting with different links.
$('.catselect').on('click', function(e){
e.preventDefault();
var type = $(this).attr('href');
$('.data-div').removeClass('slide-in').addClass('slide-out');
$(type).removeClass('slide-out').addClass('slide-in');
});
.menu-icon {
width:30px;
height:30px;
background-image:url('https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/menu_hamburger-128.png');
background-size:30px 30px;
display:inline-block;
position:relative;
left:10px;
top:5px;
cursor:pointer;
}
#holder {
border-right:10px maroon solid;
width: 200px;
height: 100%;
background-color:#999;
position:relative;
left:-170px;
-webkit-transition: left 1s;
transition: left 1s;
z-index:10;
box-shadow:1px 3px 5px rgba(0, 0, 0, 0.7);
}
#holder:hover {
left:0;
-webkit-transition: left 1s;
transition: left 1s
}
#holder h1 {
margin-left:10px;
}
#categories {
font-weight: 800;
top: .25%;
left: 2%;
}
#holder .select {
width:100%;
margin-right:5px;
font-size: 175%;
border-bottom:dotted #888 1px;
}
#holder .select a {
color:#222;
left: 3%;
text-align:center;
display:block;
padding:3px 0;
text-decoration:none;
}
#holder .select a:hover {
color:#E0E0E0;
background-color:maroon;
}
.data-div {
width:calc(100% - 80px);
height:auto;
padding:5px;
position:absolute;
top:22px; /* enter this manually because it depends on the #holder menu height */
left:-100%;
transition: left 1s ease-in;
background-color:#EEE;
}
.data-div h2{text-align:center;}
.slide-in{
left:50px;
-webkit-transition:left .7s ease-in;
transition:left .7s ease-in;
}
.slide-out{
left:-100%;
-webkit-transition:left .5s ease-out;
transition:left .5s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="holder">
<h1 id="categories">Categories<i class="menu-icon"></i></h1>
<div class="select"> <a class="catselect" href="#comedy">Comedy</a>
</div>
<div class="select"> <a class="catselect" href="#horror">Horror</a>
</div>
<div class="select"> <a class="catselect" href="#action">Action</a>
</div>
</div>
<div id="data-container"></div>