Html 带有按钮的导航栏，用于控制是否为'；隐藏的或显示的

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

我一直在互联网上寻找，但找不到一个有这个功能的网站，也找不到教你如何在你的网站上实现这个功能的教程

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

---

谢谢

我不知道有什么好的教程可以做到这一点，所以我只使用HTML和CSS（没有JS）为您编写了一个小片段。我使用了一个复选框来切换导航栏。使用

：checked

伪元素和

+

选择器切换导航

.bar

。CSS中有一些评论，我不确定是否一切都清楚，所以如果有任何不清楚的地方，请发表评论

/*常规样式*/
* {
框大小：边框框；
填充：0；
保证金：0；
字体系列：无衬线；
}
.酒吧{
宽度：100%；
高度：80px；
背景：#eee；
边框底部：1px实心#555；
/*平滑动画（过渡）*/
过渡期：利润率0.4s；
}
bar ul li先生{
列表样式类型：无；
浮动：左；
填充：30px 20px；
}
巴尔·乌尔·李先生{
文字装饰：无；
颜色：#333；
}
/*切换的位置绝对位于该条之后*/
.切换{
位置：绝对位置；
/*动画*/
过渡：前0.4s；
/*看起来不像复选框*/
-webkit外观：无；
外观：无；
/*造型*/
宽度：50px；
高度：20px；
背景色：#eee；
边框：1px实心#aaa；
边界顶部：无；
边框左下半径：10px；
边框右下半径：10px；
/*位置*/
左：50%；
左边距：-25px；
/*杂项*/
大纲：无；
光标：指针
}
/*使用：after伪元素设置箭头*/
.切换：之后{
显示：块；
位置：绝对位置；
/*您可以在此处使用任何其他图标*/
内容：“▼";
左：50%；
左边距：-6px；
顶部：2个；
颜色：#666；
}
/*选中时更改内容*/
.切换：选中：之后{
内容：“▲";
}
/*神奇的部分*/
/*切换时向下移动切换*/
.切换：选中{
顶部：80px；
}
.切换：不（：选中）{
顶部：0px；
}
/*使用+选择器（.bar）获取下一个元素并将其向下移动*/
.toggle:选中+.bar{
边际上限：0px；
}
.toggle:不（：选中）+.bar{
利润上限：-80px；
}

我在功能上有效地完成了图像显示的更改。您可以在我的合法/[安全-无重定向、广告或弹出窗口]托管网页上检查照片IMG上的悬停效果：

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

<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行的html正文代码段为：

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

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

Q：如果我想使用两个自定义图像而不是勾选框，我应该在哪里插入标签？是不是在.toggle:after和.toggle:checked:after bits上的“content”键？还有，对不起，我该如何设置它？当我将鼠标悬停在按钮上时，它会变成另一个图像（大小和形状相同，只是颜色不同）？必须将图像设置为

.toggle

元素的背景图像，因为在

标记中不可能使用任何HTML。要更改悬停时的背景图像，只需使用

。toggle:hover

伪类并更改背景图像。如果要删除图标，只需删除

。toggle:after

和

。切换：选中：在

之后。