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

I am trying to create a new site template based on Zurb's Foundation 5 that has two menus - a top menu and a left menu. That is working for medium and large sizes, but for 'small' I'm trying to hide the top menu with a top-right "hamburger", and then the left menu to work in a similar manner but from the top-left. This is what it looks like at the moment:

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

The top right works fine, except only the 'hamburger' menu-icon is clickable. The "MENU" text next to it, is not.

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

The top left has a couple of problems. Only the text that I add appears and is clickable ("TOG" here). The menu-icon does not appear. I guess I could replace "TOG" with "PAGES" as a workaround.

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

Second, when I click on it to open the menu, it pushes the top bar down one row to cover the title and leaving a white space at the top. Ie.:

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

Here's my code (very much work in progress - logos will be replaced with images, etc):

这是我的代码(非常多的工作正在进行中 - 徽标将替换为图像等):

<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>

Does anyone have any thoughts as to what is causing my problems?

有没有人想到导致我的问题的原因是什么?

1 个解决方案

#1

As far as i do understand you're trying to use Foundation's Off-canvas (menus) in a manner it is not intended.

据我所知,你试图以一种不打算的方式使用Foundation的Off-canvas(菜单)。

It seems you are looking for a mobile menu which can be toggled.

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

Off-canvas (menus) are a layout structure. When the menu shows up the complete layout moves to the left / right. For that reason you content should be wrapped in the Off-canvas (menus) structure:

画布外(菜单)是一种布局结构。当菜单出现时,完整的布局向左/向右移动。因此,您的内容应该包含在Off-canvas(菜单)结构中:

From http://foundation.zurb.com/docs/components/offcanvas.html:

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" href="#" >Menu</a>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        ...
        </ul>
    </aside>

    <!-- main content goes here -->


  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>

See the <!-- main content goes here --> in the above. You can try to rebuild your example as follows:

请参阅上面的 。您可以尝试重建您的示例,如下所示:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
<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>

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle  hide-for-medium-up" href="#" >Menu</a>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu  hide-for-medium-up">
        <!-- whatever you want goes here -->
     <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>

    <!-- main content goes here -->


<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>
</div>

  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>



</html>

Possible also how to make bootstrap off canvas nav overlap content instead of move it will help you further.

也可能如何使bootstrap关闭画布导航重叠内容而不是移动它将帮助你进一步。