Slide out side toolbar

Question

I have seen on some websites now there is a small strip down the side of the page and when you hover over the strip it slides out and shows more information.

Here is where I have seen the bar in action:

http://kabx.net/uk/

On the left hand side when you hover, it will expand out.

I wanted to see what this is called and how I can achieve this effect?

I have searched for different things like 'Slideing Toolbar' and other things but i cant seem to find the name.

EDIT:

                <hr class="line" />
                <hr class="line1" />
                <hr class="line1" />

                <asp:Image runat="server" ImageUrl="~/Images/Tick.png" ID="IMG_Tick" />
                <asp:Image runat="server" ImageUrl="~/Images/Cross.png" ID="IMG_Cross" />
                <asp:Image runat="server" ImageUrl="~/Images/Text.png" ID="IMG_Text" />

            </div>

This is my div is it possible to say when its on hover to delete these images and when its not to brring them back?

Answer 1

Demo

HTML

<nav>
  <ul>
    <li id="link-one">
      <div>1</div>
      <div>One</div>
    </li>
    <li id="link-two">
      <div>2</div>
      <div>Two</div>
    </li>
    <li id="link-three">
      <div>3</div>
      <div>Three</div>
    </li>
    <li id="link-four">
      <div>4</div>
      <div>Four</div>
    </li>
    <li id="link-five">
      <div>5</div>
      <div>Five</div>
    </li>
  </ul>
</nav>
<div id="one" class="desktop">
  <h1>Sidebar Example</h1>
  <p>This is 1</p>
  <p>Something here.</p>
</div>
<div id="two" class="desktop">
  <h1>Two</h1>
  <p>This is 2</p>
  <p>Some texts.</p>
</div>
<div id="three" class="desktop">
  <h1>Three</h1>
  <p>This is 3</p>
  <p>Some more texts here.</p>
</div>
<div id="four" class="desktop">
  <h1>Four</h1>
  <p>This is 4</p>
  <p>Texts here.</p>
</div>
<div id="five" class="desktop">
  <h1>Five</h1>
  <p>This is 5</p>
  <p>Contents here.</p>
</div>

CSS

@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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  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: grey;
}

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;
  -webkit-box-shadow: 0px 0px 10px #333;
  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;
}

Javascript

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

Answer 2

It's pure CSS and HTML. Although you can go for harder things and use javascript.

The logic of the CSS is to set the sidebar element absolute positioned to the left, and with some negative value in order to get rid of it. Then use the :hover selector and set a new value for the left: -###; property, and the sidebar will come back once you mouse-over part of the sidebar (supposing you didn't completely hide it)

Edit: Take this JSFiddle and read the comments I've done there.

http://jsfiddle.net/NGL8v/2/

Tell me if you don't understand something