带有控制是否隐藏或显示的按钮的导航栏

Question

想知道是否有人可以将我重定向到页面顶部带有水平导航栏的 site/tutorial，并带有一个 hides/displays 按钮。我认为它就像一个附加到栏底部的半圆，根据栏是隐藏还是显示带有 down/up 箭头。

我一直在 Internet 上查找，但找不到包含此功能的网站，也找不到教您如何在您的网站上实施此功能的教程。

我发誓我以前见过它，只是不确定在哪里。

谢谢

Answer 1

我不知道有什么好的教程可以做到这一点，所以我只使用 HTML 和 CSS（无 JS）为您编写了一个小片段。我使用了一个复选框来切换导航栏。使用 :checked 伪元素和 + 选择器切换导航 .bar。 CSS里面有一些评论，不知道有没有说清楚，有什么不明白的地方欢迎评论。

/* General styling */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
.bar {
  width: 100%;
  height: 80px;
  background: #eee;
  border-bottom: 1px solid #555;
  /* smooth animation (transition) */
  transition: margin 0.4s;
}
.bar ul li {
  list-style-type: none;
  float: left;
  padding: 30px 20px;
}
.bar ul li a {
  text-decoration: none;
  color: #333;
}
/* The toggle is positioned absolute to be after the bar */

.toggle {
  position: absolute;
  /* the animation */
  transition: top 0.4s;
  /* doesn't look like a checkbox */
  -webkit-appearance: none;
  appearance: none;
  /* styling */
  width: 50px;
  height: 20px;
  background-color: #eee;
  border: 1px solid #aaa;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* position */
  left: 50%;
  margin-left: -25px;
  /* misc */
  outline: none;
  cursor: pointer
}
/* set the arrow with the :after pseudo element */

.toggle:after {
  display: block;
  position: absolute;
  /* you could use any other icon here */
  content: "▼";
  left: 50%;
  margin-left: -6px;
  top: 2px;
  color: #666;
}
/* change the content when checked */

.toggle:checked:after {
  content: "▲";
}
/* the magic part */

/* move the toggle down when toggled */

.toggle:checked {
  top: 80px;
}
.toggle:not(:checked) {
  top: 0px;
}
/* get the next element with the + selector (the .bar) and move it down */

.toggle:checked + .bar {
  margin-top: 0px;
}
.toggle:not(:checked) + .bar {
  margin-top: -80px;
}

<div class="navigation">

  <!-- the toggle -->
  <input type="checkbox" class="toggle" />

  <!-- the navigation bar -->
  <div class="bar">
    <ul>
      <li><a href="#">Page #1</a>
      </li>
      <li><a href="#">Page #2</a>
      </li>
      <li><a href="#">Page #3</a>
      </li>
      <li><a href="#">Page #4</a>
      </li>
    </ul>
  </div>


</div>

Answer 2

我有效且实用地完成了更改图像的显示。您可以在我的合法/[安全 - 无重定向、广告或弹出窗口] 托管网页上检查照片 imgs 的悬停效果： http://gladheart.royalwebhosting.net/Photos%20-%20GladHeart.html

css 第 2 行的样式代码片段是：

div#divContainer-photoRow-2 { position:relative; left:calc(50% - 140px) ; 
    width:280px; height:210px ; 
        padding: 40px 0 40px 0 ; 
  }

#div-photoRow-2 { position:absolute ; 
    width:280px; height:210px ; 
  } 
#photoRow-2_1st-photo { position:relative ; 
  } 
#imgswap-photoRow-2_1st-photo { background-image:url("./Photos%20-%20GladHeart_files/AlaskaRun-ArchesNP-2013.jpg"); 
        background-repeat:no-repeat; display:block; width:280px; height:210px; 
  } 
#imgswap-photoRow-2_1st-photo:hover img { visibility:hidden ; }

html 第 2 行的主体代码片段是：

<div id="divContainer-photoRow-2">

<div id="div-photoRow-2_1st-photo">
<span id="imgswap-photoRow-2_1st-photo" class="photoHoverOutlineColor">
  <span id="photoRow-2_1st-photo">
    <img src="./Photos%20-%20GladHeart_files/tn_Antelope_Island.jpg" 
    alt="Antelope Island" width="280" height="210"/>
</span></span>
</div>

</div>

带有控制是否隐藏或显示的按钮的导航栏

Navigation bar with button that controls whether it's hidden or displayed

html

css

navigationbar