Slide Out Box

Web Stuff
03.10.2015
658

tutorial html5 css3 css javascript vanilla jquery box slide-out

Our goal today is to create a slide out box with either jQuery or plain Javascript. We need a div with two sub div's a little bit of css and Javascript or jQuery for the click event, with hover you could build it only with html and css3 however in this article we will use the click event.

As always you can download the tutorial with all files here or checkout the demo in your browser.

Download Demo

But let's go through step by step.

The HTML Markup

<div id="jak_boxchanger">

<div id="jak_boxcontent">

<h3>jQuery</h3>
<p>Slide out box based on jQuery</p>
<p>Lorem ipsum dolor sit amet, odio cetero deseruisse qui ex, ad eum nostro verear eripuit. Ea est aliquip voluptatum, vis at primis impedit. No has tritani disputando. At virtute hendrerit liberavisse qui, epicurei petentium molestiae per cu, eius vocibus omittam vix ut. Has at euripidis comprehensam. Verear neglegentur theophrastus sea ex.</p>

</div>

<div id="jak_boxbutton">
<img src="jquery.png" alt="leaf" width="25" height="25" />
</div>

</div>

jQuery

<div id="jak_boxchanger">

<div id="jak_boxcontent">

<h3>Vanilla Javascript</h3>
<p>Slide out box based on Javascript</p>
<p>Lorem ipsum dolor sit amet, odio cetero deseruisse qui ex, ad eum nostro verear eripuit. Ea est aliquip voluptatum, vis at primis impedit. No has tritani disputando. At virtute hendrerit liberavisse qui, epicurei petentium molestiae per cu, eius vocibus omittam vix ut. Has at euripidis comprehensam. Verear neglegentur theophrastus sea ex.</p>

</div>

<div id="jak_boxbutton">
<img src="jquery.png" alt="leaf" width="25" height="25" />
</div>

</div>

Vanilla Javascript

As you can see there is no different in the HTML markup, sweet!

The CSS Markup

#jak_boxchanger {
position: fixed;
top: 145px;
left: -305px;
z-index: 9998;
}

#jak_boxbutton {
float: left;
text-align: center;
cursor: pointer;
padding: 10px;
background-color: #ffffff;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
width: 30px;
height: 25px;
}

#jak_boxcontent {
float: left;
background-color: #ffffff;
width: 280px;
height: 450px;
padding: 10px;
-webkit-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
overflow: auto;
-webkit-box-shadow: 2px 2px 10px 1px #333333;
box-shadow: 2px 2px 10px 1px #333333;
}

jQuery

#jak_boxchanger {
position: fixed;
top: 145px;
right: -305px;
z-index: 9998;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}

#jak_boxbutton {
float: right;
text-align: center;
cursor: pointer;
padding: 10px;
background-color: #ffffff;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
width: 30px;
height: 28px;
}

#jak_boxcontent {
float: right;
background-color: #ffffff;
width: 280px;
height: 450px;
padding: 10px;
-webkit-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
overflow: auto;
-webkit-box-shadow: -2px 2px 10px 1px #333333;
box-shadow: -2px 2px 10px 1px #333333;
}

.moveboxchanger {
right: 0 !important;
}

Vanilla Javascript

Here we will use some CSS3 for the pure Javascript version plus an extra class we will use later in the Javascript markup.

The Javascript Markup

<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
$(document).ready(function(){

$('#jak_boxbutton').on('click',function(e) {
e.preventDefault();
if ($('#jak_boxchanger').css('left') == '0px') {
$('#jak_boxchanger').animate({left: '-305px'}, 300);
} else {
$('#jak_boxchanger').animate({left:0}, 300);
}
});

});

jQuery

var boxclosed = true;
var el = document.getElementById("jak_boxbutton1");
var el1 = document.getElementById("jak_boxchanger1");
el.addEventListener("click", function() {

if (boxclosed) {
// add class
if (el1.classList) {
el1.classList.add("moveboxchanger");
} else {
el1.className += ' ' + "moveboxchanger";
}
boxclosed = false;
} else {
// remove class
if (el1.classList) {
el1.classList.remove("moveboxchanger");
} else {
el1.className = el.className.replace(new RegExp('(^|\b)' + className.split(' ').join('|') + '(\b|$)', 'gi'), ' ');
}
boxclosed = true;
}

});

Vanilla Javascript

Both are very simple and easy to understand the code for Vanilla Javascript is slightly longer however you don't need to implement the jQuery library and rendering pure Javascript is way faster than doing it with jQuery. Which one you use for your project is up to you...


Comment(s) (0)

Hey, leave a comment...