Desktop System with Animated Sidebar

desktop-system-with-animated-sidebar.markdown

Desktop System with Animated Sidebar

A simple desktops system with an animated sidebar

A Pen by Venerons on CodePen.

License.

index.pug

nav
  ul
    li#link-one
      div 1
      div One
    li#link-two
      div 2
      div Two
    li#link-three
      div 3
      div Three
    li#link-four
      div 4
      div Four
    li#link-five
      div 5
      div Five

#one.desktop
  h1 Desktop System with Sidebar
  p This is the desktop 1
  p 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.

#two.desktop
  h1 Desktop Two
  p This is the desktop 2
  p 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.

#three.desktop
  h1 Desktop Three
  p This is the desktop 3
  p 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.

#four.desktop
  h1 Desktop Four
  p This is the desktop 4
  p 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.

#five.desktop
  h1 Desktop Five
  p This is the desktop 5
  p 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.

script.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'));

style.scss

@import url(http://fonts.googleapis.com/css?family=Quicksand:400,300);
@import url(http://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: 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,.25), rgba(42,60,87,0.4)), linear-gradient(135deg, #670d10, #092756);
}

// SIDEBAR

$navW: 3.5rem;
$navColor: #2680F3;

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: $navW;
  height: 100%;
  background: $navColor;
  transition: all 300ms ease;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0px 0px 10px #333;

  // SIDEBAR EXPAND
  &:hover {
    width: $navW * 4;
  }

  * {
    user-select: none;
  }

  // SIDEBAR MENU
  > ul {
    display: table;
    width: $navW * 4;

    // SIDEBAR MENU ITEM
    > li {
      display: table-row;
      background: darken($navColor, 10%);
      cursor: pointer;

      &:hover {
        background: lighten($navColor, 10%);
      }

      &:active {
        background: lighten($navColor, 20%);
      }

      > div {
        height: $navW;
        line-height: $navW;
        display: table-cell;

        // ICON
        &:nth-child(1) {
          width: $navW;
          text-align: center;
        }

        // DESCRIPTION
        &:nth-child(2) {
          width: $navW * 3;
          text-align: left;
          padding-left: $navW / 5;
        }
      }
    }
  }
}

// DESKTOP

.desktop {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  padding: 1rem 1rem 1rem $navW + 1rem;
  transition: all 500ms ease;
  overflow: auto;

  // INSIDE STYLING
  h1 {
    margin: 1rem 0;
    font-weight: 300;

    &:nth-child(1) {
      margin-top: 0;
    }
  }

  p {
    font-weight: 300;
    text-align: justify;
    margin: 0 0 1rem 0;
  }
}
#one {
  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,.25), rgba(42,60,87,0.4)), linear-gradient(135deg, #670d10, #092756);
}
#two {
  background: linear-gradient(135deg, #723362, #9d223c);
}
#three {
  background: linear-gradient(135deg,  #2c539e, #63967d);
}
#four {
  background: linear-gradient(135deg, rgba(244,226,156,0) 0%,rgba(59,41,58,1) 100%), linear-gradient(to right, rgba(244,226,156,1) 0%,rgba(130,96,87,1) 100%);
}
#five {
  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%);
}