javascript - 滑出侧工具栏

Question

我在一些网站上看到现在页面的一侧有一个小条，当您将鼠标悬停在该条上时，它会滑出并显示更多信息。

这里是我看到酒吧的地方:

http://kabx.net/uk/

当您将鼠标悬停在左侧时，它会展开。

我想看看这叫什么以及如何实现这种效果？

我搜索了不同的东西，例如“滑动工具栏”和其他东西，但我似乎找不到名称。

编辑:

                <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>

这是我的 div 是否可以说明何时将鼠标悬停以删除这些图像以及何时不将它们带回来？

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