LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Desktop System with Sidebar

This is the desktop 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum sem elit, vitae rutrum leo euismod vitae. Aliquam accumsan quam sit amet ultrices rhoncus. Proin diam diam, pellentesque et felis in, aliquam lacinia mauris. Sed euismod ipsum in feugiat sollicitudin. Praesent vel odio placerat, vehicula sapien eu, pellentesque dui. Praesent convallis augue non tristique lacinia. Quisque eu vulputate sem, vel commodo nisi. Nunc ullamcorper velit quis diam vulputate adipiscing. Mauris congue rhoncus fringilla. Phasellus porttitor purus neque, porttitor posuere nisl dictum eget. Duis pharetra augue leo, at sodales ipsum congue eu. Vestibulum eu justo erat. Nullam tempor varius mi, id placerat nisl pellentesque at. Quisque lacinia, nibh at viverra molestie, augue nunc commodo enim, euismod adipiscing eros mi nec nisl.

Desktop Two

This is the desktop 2

Sed egestas augue vitae enim elementum scelerisque. Morbi fermentum, ipsum sed vestibulum iaculis, diam tellus convallis nisi, in aliquam magna nisi quis felis. Quisque ac orci diam. Donec scelerisque lobortis scelerisque. Duis in tortor eget erat interdum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse suscipit, libero placerat adipiscing molestie, neque velit fringilla mauris, vitae ultrices lectus est non magna. Integer ultrices erat id massa porta, quis sagittis elit ornare. Praesent mollis sit amet dolor ac dignissim. Sed sed adipiscing dolor. Curabitur lacus ipsum, lacinia eu orci vitae, lobortis eleifend lorem. Duis molestie neque in lacinia consequat. Suspendisse pretium malesuada odio, in euismod tortor convallis bibendum.

Desktop Three

This is the desktop 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum sem elit, vitae rutrum leo euismod vitae. Aliquam accumsan quam sit amet ultrices rhoncus. Proin diam diam, pellentesque et felis in, aliquam lacinia mauris. Sed euismod ipsum in feugiat sollicitudin. Praesent vel odio placerat, vehicula sapien eu, pellentesque dui. Praesent convallis augue non tristique lacinia. Quisque eu vulputate sem, vel commodo nisi. Nunc ullamcorper velit quis diam vulputate adipiscing. Mauris congue rhoncus fringilla. Phasellus porttitor purus neque, porttitor posuere nisl dictum eget. Duis pharetra augue leo, at sodales ipsum congue eu. Vestibulum eu justo erat. Nullam tempor varius mi, id placerat nisl pellentesque at. Quisque lacinia, nibh at viverra molestie, augue nunc commodo enim, euismod adipiscing eros mi nec nisl.

Desktop Four

This is the desktop 4

Sed egestas augue vitae enim elementum scelerisque. Morbi fermentum, ipsum sed vestibulum iaculis, diam tellus convallis nisi, in aliquam magna nisi quis felis. Quisque ac orci diam. Donec scelerisque lobortis scelerisque. Duis in tortor eget erat interdum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse suscipit, libero placerat adipiscing molestie, neque velit fringilla mauris, vitae ultrices lectus est non magna. Integer ultrices erat id massa porta, quis sagittis elit ornare. Praesent mollis sit amet dolor ac dignissim. Sed sed adipiscing dolor. Curabitur lacus ipsum, lacinia eu orci vitae, lobortis eleifend lorem. Duis molestie neque in lacinia consequat. Suspendisse pretium malesuada odio, in euismod tortor convallis bibendum.

Desktop Five

This is the desktop 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum sem elit, vitae rutrum leo euismod vitae. Aliquam accumsan quam sit amet ultrices rhoncus. Proin diam diam, pellentesque et felis in, aliquam lacinia mauris. Sed euismod ipsum in feugiat sollicitudin. Praesent vel odio placerat, vehicula sapien eu, pellentesque dui. Praesent convallis augue non tristique lacinia. Quisque eu vulputate sem, vel commodo nisi. Nunc ullamcorper velit quis diam vulputate adipiscing. Mauris congue rhoncus fringilla. Phasellus porttitor purus neque, porttitor posuere nisl dictum eget. Duis pharetra augue leo, at sodales ipsum congue eu. Vestibulum eu justo erat. Nullam tempor varius mi, id placerat nisl pellentesque at. Quisque lacinia, nibh at viverra molestie, augue nunc commodo enim, euismod adipiscing eros mi nec nisl.

CSS
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  color: white;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Quicksand', 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
  background: -webkit-radial-gradient(bottom left ellipse, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -webkit-linear-gradient(315deg, #670d10, #092756);
  background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 100%;
  background: #2680F3;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0px 0px 10px #333;
}
nav:hover {
  width: 14rem;
}
nav * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
nav > ul {
  display: table;
  width: 14rem;
}
nav > ul > li {
  display: table-row;
  background: #0c66da;
  cursor: pointer;
}
nav > ul > li:hover {
  background: #569cf6;
}
nav > ul > li:active {
  background: #87b9f8;
}
nav > ul > li > div {
  height: 3.5rem;
  line-height: 3.5rem;
  display: table-cell;
}
nav > ul > li > div:nth-child(1) {
  width: 3.5rem;
  text-align: center;
}
nav > ul > li > div:nth-child(2) {
  width: 10.5rem;
  text-align: left;
  padding-left: 0.7rem;
}

.desktop {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  padding: 1rem 1rem 1rem 4.5rem;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  overflow: auto;
}
.desktop h1 {
  margin: 1rem 0;
  font-weight: 300;
}
.desktop h1:nth-child(1) {
  margin-top: 0;
}
.desktop p {
  font-weight: 300;
  text-align: justify;
  margin: 0 0 1rem 0;
}

#one {
  background: -webkit-radial-gradient(bottom left ellipse, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), -webkit-linear-gradient(315deg, #670d10, #092756);
  background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
}

#two {
  background: -webkit-linear-gradient(315deg, #723362, #9d223c);
  background: linear-gradient(135deg, #723362, #9d223c);
}

#three {
  background: -webkit-linear-gradient(315deg, #2c539e, #63967d);
  background: linear-gradient(135deg, #2c539e, #63967d);
}

#four {
  background: -webkit-linear-gradient(315deg, rgba(244, 226, 156, 0) 0%, #3b293a 100%), -webkit-linear-gradient(left, #f4e29c 0%, #826057 100%);
  background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, #3b293a 100%), linear-gradient(to right, #f4e29c 0%, #826057 100%);
}

#five {
  background: -webkit-linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), -webkit-linear-gradient(135deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
  background: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
}
JS
var desktops = document.querySelectorAll('.desktop');

function hide(element) {
  element.style.setProperty('left', '-100%', element.style.getPropertyPriority('left'));
}

function hideAll() {
  for (var i = 0; i < desktops.length; i++) {
    hide(desktops[i]);
  }
}

function show(element) {
  element.style.setProperty('left', '0', element.style.getPropertyPriority('left'));
}

document.getElementById('link-one').addEventListener('click', function () {
  hideAll();
  show(document.getElementById('one'));
}, false);

document.getElementById('link-two').addEventListener('click', function () {
  hideAll();
  show(document.getElementById('two'));
}, false);

document.getElementById('link-three').addEventListener('click', function () {
  hideAll();
  show(document.getElementById('three'));
}, false);

document.getElementById('link-four').addEventListener('click', function () {
  hideAll();
  show(document.getElementById('four'));
}, false);

document.getElementById('link-five').addEventListener('click', function () {
  hideAll();
  show(document.getElementById('five'));
}, false);

show(document.getElementById('one'));
Host Instantly Drag and Drop Website Builder

 

Description

A simple desktops system with an animated sidebar
Term
Mon, 11/27/2017 - 21:55

Related Codes

Pen ID
Pen ID
Pen ID