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

【问题标题】：Foundation: Problems combining responsive top-bar and tab-bar Menus基础：结合响应式顶栏和标签栏菜单的问题
【发布时间】：2015-05-10 05:04:03
【问题描述】：

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

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

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

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

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

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

有人对导致我的问题的原因有任何想法吗？

【问题讨论】：

标签： html menu responsive-design zurb-foundation-5

【解决方案1】：

据我所知，您试图以非预期的方式使用 Foundation 的画布外（菜单）。

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

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

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

见上面的。您可以尝试如下重建您的示例：

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

也有可能how to make bootstrap off canvas nav overlap content instead of move it会进一步帮助你。

【讨论】：

谢谢，我很可能会以非预期的方式使用它。绝对在最深处，虽然我有书要订购！似乎您对我的示例的重建仅在画布外菜单上方有一个额外的画布外包装/内包装 - 但没有关闭 div。关于您对 offcanvas 是一种布局结构的评论：我很可能在这里遇到一个概念问题，我需要仔细考虑。我把它当作一个菜单，但如果它是一个布局，我需要仔细地嵌套所有内容......
所以我在开头附近删除了我的画布外包裹/内包裹，现在第一行看起来正在工作 - 但只有一次！打开一次，关闭一次，但不是第二次。我猜我的画布外按钮设置不正确。绝对是向前迈出的一步，谢谢！第一个画布外（左）“汉堡包”也不见了，但似乎解决了我最大的问题。
我将把它标记为答案。事情并不是我想要的，但至少它正在发挥作用。