Question

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

以下是我看到行动中的栏目：

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

我想知道这是什么以及如何实现这种效果？

我搜索了不同的内容，例如＆＃39; Slideing Toolbar＆＃39;和其他东西，但我似乎找不到名字。

编辑：

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

Answer 2

它是纯CSS和HTML。虽然你可以选择更难的东西并使用javascript。

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

编辑：拿这个JSFiddle并阅读我在那里做的评论。

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

告诉我你是否理解某事

滑出侧面工具栏

2 个答案:

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