滑出侧工具栏

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

它是纯 CSS 和 HTML。虽然你可以做更难的事情并使用 javascript。

CSS 的逻辑是将侧边栏元素绝对定位到左侧，并带有一些负值以摆脱它。 然后使用 :hover 选择器并为left: -###; 属性设置一个新值，一旦你将鼠标悬停在侧边栏的一部分上（假设你没有完全隐藏它），侧边栏就会回来

编辑：拿这个 JSFiddle 并阅读我在那里完成的 cmets。

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

如果你有什么不明白的地方告诉我

Answer 2

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