Question

想知道是否有人可以将我重定向到页面顶部带有水平导航栏的网站/教程，并带有隐藏/显示它的按钮。我认为这就像是一个半圆形附着在条形图的底部，根据条形图是隐藏还是显示而带有向下/向上箭头。

我一直在互联网上找工作，找不到有这个网站的网站，或者教你如何在网站上实现这一点的教程。

我可以发誓我以前见过它，只是不知道在哪里。

由于

Answer 1

我不知道有什么好的教程可以做到这一点，所以我只用HTML和HTML编写了一个小片段。 CSS（没有JS）。我使用了一个复选框来切换导航栏。使用.bar伪元素和:checked选择器切换导航+。 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

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

第2行的CSS样式代码段为：

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

第2行的

html正文代码段为：

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

带有按钮的导航栏，用于控制是隐藏还是显示

2 个答案: