Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter Page
Youtube Channel
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Vertical Panel like Files

Written by @kerixa 26 May 2020

If you want to divide your page vertically, you can use this script. Your page will look like a file with various sections. by clicking on each section it gets almost all of the screen width. See below!

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #1C1F2B;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

/* LIST */
ul {
  list-style: none;
}

/* FORM */
input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: block;
  float: left;
  height: 100vh;
  width: 40px;
  overflow: hidden;
  background: #30354a;
  text-align: center;
  font-size: 14px;
  line-height: 50px;
  -webkit-transition: background 300ms ease;
  transition: background 300ms ease;
}

li:nth-child(even) > input + label {
  background: #3a4059;
}

label:hover,
li:nth-child(even) > input + label:hover {
  background: #2196f3;
  color: #fff;
  cursor: pointer;
}

input[type="radio"]:checked ~ label {
  background: #2196f3;
  color: #fff;
  cursor: default !important;
}

/* SLIDES */
.accslide {
  display: block;
  height: 100%;
  width: 0px;
  padding: 10px 0;
  float: left;
  overflow-x: hidden;
  font-sizes: 12px;
  line-height: 1.5;
  -webkit-transition: all 700ms ease;
  transition: all 700ms ease;
}
.accslide * {
  padding-left: 10px;
}
.accslide img {
  margin-top: 10px;
}

input[type="radio"]:not(:checked) ~ label > * {
  padding-left: 7px;
  font-size: 1.2em;
  white-space: nowrap;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

input[type="radio"]:checked ~ label > * {
  display: none;
}

li:nth-child(1):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 80px);
}

li:nth-child(2):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 80px);
}

li:nth-child(1):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(2):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(3):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(1):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(2):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(3):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(4):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(1):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(2):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(3):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(4):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(5):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(1):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(2):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(3):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(4):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(5):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(6):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(1):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(2):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(3):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(4):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(5):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(6):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(7):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(1):nth-last-child(8) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(2):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(3):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(4):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(5):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(6):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(7):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(8):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}
</style>
<ul>
<li>

<input id="rad1" type="radio" name="rad" checked="checked" />
<label for="rad1">
<div>Just keep going with longer text</div>
</label>
<div class="accslide">
<div class="content">
<h1>Just keep going with longer text</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</li>
<li>

<input id="rad2" type="radio" name="rad" />
<label for="rad2">
<div>Second panel</div>
</label>
<div class="accslide">
<div class="content">
<h1>Second panel</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</li>
<li>

<input id="rad3" type="radio" name="rad" />
<label for="rad3">
<div>Third panel</div>
</label>
<div class="accslide">
<div class="content">
<h1>Third panel</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</li>
<li>

<input id="rad4" type="radio" name="rad" />
<label for="rad4">
<div>Fourth panel</div>
</label>
<div class="accslide">
<div class="content">
<h1>Fourth panel</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</li>
</ul><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
advertisement 2