Open Different DIV Panel In A Page With Sliding Effect

There are many ways to make your web page stylish and awesome so you can find many over internet having stylish features and functions but you have to see what ever it will effect others also.

Now check out our Open Different DIV Panel In A Page With Sliding Effect using simple CSS and little JavaScript to make multi tabs in new way. Check out the DEMO of Open Different DIV Panel In A Page With Sliding Effect and garb the code from below.

Features:

1.) No JQuery File Added.
2.) JavaScript Code Added.
3.) CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style>
body{
overflow:hidden;
}
#main{
width:1000px;
margin:0 auto;
}
ul{
width:300px;
background:black;
z-index:999;
color:white;
}
.page{
width:650px;
height:100vh;
margin:0 100vw;
background:#2d3e50;
color:#73d9dd;
position:absolute;
top:0;
float:left;
-webkit-transition:0.8s ease-out;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: 0.8s ease-out;
}
#div1{background:orange;}
#div2{background:yellow;}
#div3{background:green;}
#div4{background:blue;}
#div0{background:red;}
</style>

JavaScript:

<script>
function pageSlider(pageNum){
for(i=0; i<5; i++){
if(i==pageNum){
var j='div'+i;
document.getElementById(j).style.cssText='margin-left:350px;opacity:1;z-index:0;';
}
else{
var k='div'+i;
document.getElementById(k).style.cssText='margin-left:100vw;opacity:0;z-index:-1;';
}
}
}
</script>

HTML:

<div id='main'>
<ul>
<li onclick="pageSlider('0')">Home</li>
<li onclick="pageSlider('1')">About</li>
<li onclick="pageSlider('2')">Gallery</li>
<li onclick="pageSlider('3')">Reservation</li>
<li onclick="pageSlider('4')">Contact</li>
</ul>
<div class='page' id='div0'>Home</div>
<div class='page' id='div1'>About</div>
<div class='page' id='div2'>Gallery</div>
<div class='page' id='div3'>Reservations</div>
<div class='page' id='div4'>Contact</div>
</div>

Customization:

1.) You can change the CSS if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…