Question

我使用粉底5，我试图让菜单成为一个粘性菜单。我已经尝试了所有可以找到的选项，但我不确定我是否错过了什么。

这是我的导航代码

<div class="contain-to-grid sticky">
        <nav class="top-bar" data-options="sticky_on: large">
            <?php echo $page->mainMenu($page_id); ?>
        </nav>  
   </div>

如果您还需要了解其他信息，请告诉我们

Answer 1

我看到的第一件事是您data-topbar中缺少nav。

而不是<nav class="top-bar" data-options="sticky_on: large">尝试<nav class="top-bar" data-topbar data-options="sticky_on: large" role="navigation">。

出于可访问性原因，我还添加了role="navigation"，假设此导航是您网站的主要导航。

以下是粘性顶栏工作的codepen示例。我从示例中删除了data-options="sticky_on: large"属性，因为它在codepen中没有很好地播放。

如果您有任何问题，请告诉我。

Answer 2

另外，请确保您已将顶级栏中的javascript文件<script src="js/foundation/foundation.topbar.js"></script>包括在内。

如下所示 -

<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>

<script>
  $(document).foundation();
</script>

参考 - http://foundation.zurb.com/docs/components/topbar.html

基础5粘不起作用

2 个答案: