我正在尝试制作一个像这样的菜单栏 http://www.finlandia.com/en 我不确定他们是怎么做到的，我想我必须滚动鼠标，但当我尝试时，即使菜单栏折叠，这些词仍然出现。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- SlideBars Meta-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- END SlideBars Meta-->
<!-- This is the SlideBar CSS link-->
<link rel="stylesheet" href="CSS/slidebars.min.css">
<link href="CSS/Main.css" rel="stylesheet" type="text/css">
<!-- END SlideBar CSS link-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top sb-slide" role="navigation" style="webkit-transform: translate(381px);">
<a class="hidden-phone"><!-- Main navigation menu bar is apearing when desktop version is avalible-->
<div class="main-nav">
<div class="navicon-line-padding">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</div><!-- END navicon-line-padding-->
<ul class="main-nav-li">
<li>Home</li>
</ul><!-- End Main-nav-li-->
</div><!--End Main-nav-->
</a><!-- End hidden-phone-->
<a id="nav-open-btn" class="visible-phone" rel="track-event" data-ga-action="Mobile Menu" href="#">
<div class="sb-toggle-left navbar-left">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</div>
</a><!--END nav-open-btn-->
<!-- This Div is in place to make the MenuBar Work properly do not move-->
<div id="sb-site">
<p>
</p>
</div>
</nav>
<!-- END Sb-site Div-->
<!-- This is the SB-SlideBar Left Div-->
<div class="sb-slidebar sb-left sb-style-push sb-toggle-left">
<nav>
<ul class="sb-menu">
<li class="SquirrelIcon">
<a href="#"><img src="imgs/FurrySquirrelLogo2.png" width="300" height="174" alt="Furry Squirrel Productions"></a>
</li>
<li>
<a href="#" class="LinkItemMenu">Home</a>
</li>
</ul>
</nav>
</div><!-- END sb-slidebar sb-left div-->
<!-- Start SlideBar JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<!-- END SlideBar Jquery-->
<!-- Start SlideBar JS-->
<script src="JS/slidebars.min.js">
</script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
<!-- END SlideBar JS-->
</body>
</html>
我的 CSS 代码:
@charset "utf-8";
/* CSS Document */
.navicon-line {
background-color: #000;
height: 4px;
width: 24px;
margin-bottom: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
.sb-toggle-left.navbar-left {
padding: 14px;
z-index: 1030;
top:
;
width: auto;
position: fixed;
}
.navbar.navbar-default.navbar-fixed-top.sb-slide {
position: fixed;
z-index: 1303;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
.SquirrelIcon {
margin-top: 20%;
margin-bottom: 20px;
margin-left: 5%;
margin-right: 5%;
}
.sb-menu .SquirrelIcon a img {
height: auto;
max-width: 100%;
}
#sb-site p {
width: 300px;
}
@media screen and (max-width: 43.125em) {
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
.main-nav-li {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #000;
text-decoration: none;
list-style-type: none;
}
.main-nav:hover {
height: auto;
width: 100%;
background-color: #0C0;
position: fixed;
left: 0px;
top: 0px;
}
.hidden-phone {
height: auto;
width: 100%;
}
.navicon-line-padding {
padding: 14px;
}
我试图在用户未滚动时使所有元素不可见。并且在用户滚动图标时可见。
最佳答案
我是 Slidebars 的作者 Adam :)
您分享的链接似乎无效，所以我只能猜测您要达到的目的。
您的标记存在一些问题。首先，你的导航栏中有你的 #sb-site 容器，这需要在外面。所以您的标记可能如下所示:
<body>
<nav class="navbar"></nav>
<div id="sb-site"></div>
<div class="sb-slidebar sb-left"></div>
</body>
似乎在评论中，您不希望导航栏移动。在那种情况下，只需删除 .sb-slide 类，插件就不会为导航栏设置动画 :)
如果您的导航栏保持静止，悬停效果应该很容易实现。 Slidebars 有一个 API，您可以使用它来控制它们。我整理了一个 JSFiddle 来演示这一点。
希望对您有所帮助!
谢谢，亚当
关于html - 如何让我的菜单栏仅在图标滚动时出现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24003320/