Question

我正在一个网站上工作，我认为仅在将鼠标移至屏幕顶部时才显示导航栏会很酷。那有可能吗？因为我找不到关于它的任何教程。无论如何，还有没有一种方法可以让它不仅显示出来，还可以从顶部向下滑动呢？有点像Windows任务栏只能倒置。谢谢！

如果有人要立即查看导航栏，则为以下站点：https://www.oakparknerds.tk/

Answer 1

可以采用几种方法来实现这一目标。最简单的方法是在悬停时仅使用CSS为导航栏的顶部边缘设置动画。您可以将导航栏设置为没有背景色，然后将鼠标悬停时更改颜色使其显示。

导航栏ID为#slidingBox的示例：

#slidingBox {
  width: 100%;
  height: 60px;
  background-color: none;
  overflow-y: scroll;
  margin-left: 0px;
  margin-top: -50px;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#slidingBox:hover {
  margin-top: 0px;
  background-color: #d9dada;
}

这里是fiddle

Answer 2

这是使用jquery和CSS执行此操作的一种方法。我将背景颜色更改为橙色，以便您可以实际看到它。

<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="nav_container" style="border:1px solid black;width:100%;height:300px;">
  <nav id="my_nav" style="display:none;width:100%; height:200px;background-color:orange;">

    <a href="#">Links</a>

</nav>
</div>
<script>
$(document).ready(function(){
    $("#nav_container").mouseover(function(){
        $("#my_nav").slideDown(3000);
    });
    $("#nav_container").mouseout(function(){
        $("#my_nav").fadeOut();
    });
    });
</script>
</body>
</html>

在Mousover上显示导航栏

2 个答案: