Question

我正在尝试制作像这样的菜单栏 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;
}

我试图在不滚动用户时使所有项目不可见。当用户滚动图标时可见。

Answer 1

我是Slide，Slidebars的作者：）

您分享的链接似乎没有效果，因此我只需要猜测您想要实现的目标。

你的标记有几个问题。首先，您的导航栏中有#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放在一起来演示这个。

http://jsfiddle.net/7YzF4/

我希望这有帮助！

谢谢，亚当

如何仅在图标滚动时才显示菜单栏？

1 个答案: