Question

我正在尝试基于Zurb的Foundation 5创建一个新的网站模板，该模板有两个菜单 - 顶级菜单和左侧菜单。这适用于中型和大型，但对于“小”，我试图用右上角的“汉堡包”隐藏顶级菜单，然后左侧菜单以类似的方式工作，但是从左上角开始。这就是目前的样子：

enter image description here

右上角工作正常，只有'汉堡包'菜单图标可点击。旁边的“MENU”文字不是。

左上角有几个问题。只显示我添加的文本并且可点击（此处为“TOG”）。菜单图标不会出现。我想我可以用“PAGES”代替“TOG”作为解决方法。

其次，当我点击它打开菜单时，它会将顶部栏向下推一行以覆盖标题并在顶部留下一个空白区域。即：

enter image description here

这是我的代码（正在进行的工作 - 徽标将替换为图像等）：

<div class="off-canvas-wrap" data-offcanvas>
 <div class="inner-wrap">    
  <div class="fixed">
   <nav class="top-bar " data-topbar role="navigation">
    <section class="left-small hide-for-medium-up">
     <a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
    </section>

    <section class="middle tab-bar-section hide-for-medium-up">
       <h1><a href="/">LOGO</a></h1>
    </section>

  <ul class="title-area">
    <li class="name">
      <h1 class="hide-for-small"><a href="/">Logo</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Search</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Articles</a></li>
      <li><a href="#">Constituents</a></li>
      <li><a href="#">Engineers</a></li>
      <li><a href="#">Shipping</a></li>
      <li><a href="#">Locomotives</a></li>
      <li><a href="#">Rolling Stock</a></li>
      <li><a href="#">References</a></li>
      <li><a href="#">Forums</a></li>
    </ul>
  </section>
</nav>    
</div>    

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>LNER</label></li>
        <li><a href="gresley.shtml">Gresley</a></li>
        <li><a href="thompson.shtml">Thompson</a></li>
        <li><a href="peppercorn.shtml">Peppercorn</a></li>
      </ul>
    </aside>    

<section class="main-section">

          <div class="row">
            <div class="large-2 medium-3 columns">
              <div class="hide-for-small">
                <div class="sidebar">        
<nav>    
<ul class="side-nav">
 <li><label>LNER</label></li>
 <li><a class="active" href="gresley.shtml">Gresley</a></li>
 <li><a href="thompson.shtml">Thompson</a></li>
 <li><a href="peppercorn.shtml">Peppercorn</a></li>
 <li class="divider"></li>
</ul>    
</nav>
                 </div>
              </div>
          </div>

<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">

   <h1>Sir Nigel Gresley</h1>

有没有人对导致我问题的原因有任何疑问？

Answer 1

据我所知，你试图以不适合的方式使用Foundation的Off-canvas（菜单）。

您似乎正在寻找可以切换的移动菜单。

Off-canvas（菜单）是一种布局结构。当菜单出现时，完整的布局向左/向右移动。因此，您的内容应该包含在Off-canvas（菜单）结构中：

来自http://foundation.zurb.com/docs/components/offcanvas.html：

public class MotorcycleViewModel
 {
     public Comment CommentPointer { get; set; }
     public Post PostPointer { get; set; }
 }

请参阅上面的<div class="off-canvas-wrap" data-offcanvas> <div class="inner-wrap"> <a class="left-off-canvas-toggle" href="#" >Menu</a>  <aside class="left-off-canvas-menu">  <ul> <li><a href="#">Item 1</a></li> ... </ul> </aside>   <a class="exit-off-canvas"></a> </div> </div>。您可以尝试按如下方式重建示例：

<!-- main content goes here -->

可能how to make bootstrap off canvas nav overlap content instead of move it也可以帮助您。

基础：结合响应式顶栏和标签栏菜单的问题

1 个答案: