基础：结合响应式 top-bar 和 tab-bar 菜单的问题
Foundation: Problems combining responsive top-bar and tab-bar Menus
我正在尝试创建一个基于 Zurb 的 Foundation 5 的新网站模板，它有两个菜单 - 顶部菜单和左侧菜单。这适用于中型和大型尺寸，但对于 'small' 我试图用 top-right "hamburger" 隐藏顶部菜单，然后左侧菜单以类似的方式工作但是来自 top-left。这是目前的样子：
右上角工作正常，除了只有 'hamburger' menu-icon 是可点击的。旁边的 "MENU" 文字不是。
左上角有几个问题。只有我添加的文本会出现并且可以点击（此处为 "TOG"）。 menu-icon 没有出现。我想我可以用 "PAGES" 替换 "TOG" 作为解决方法。
其次，当我点击它打开菜单时，它会将顶部栏向下推一排以覆盖标题并在顶部留下白色 space。即：
这是我的代码（正在进行大量工作 - 徽标将替换为图像等）：
<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>
有没有人知道是什么导致了我的问题？
据我所知，您正试图以非预期的方式使用 Foundation 的 Off-canvas（菜单）。
看来您正在寻找可以切换的移动菜单。
Off-canvas（菜单）是一种布局结构。当菜单出现时，整个布局向左/右移动。因此，您的内容应该包含在 Off-canvas（菜单）结构中：
来自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>
见上文<!-- main content goes here -->。您可以尝试按如下方式重建您的示例：
<!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会进一步帮助你。
我正在尝试创建一个基于 Zurb 的 Foundation 5 的新网站模板，它有两个菜单 - 顶部菜单和左侧菜单。这适用于中型和大型尺寸，但对于 'small' 我试图用 top-right "hamburger" 隐藏顶部菜单，然后左侧菜单以类似的方式工作但是来自 top-left。这是目前的样子：
右上角工作正常，除了只有 'hamburger' menu-icon 是可点击的。旁边的 "MENU" 文字不是。
左上角有几个问题。只有我添加的文本会出现并且可以点击（此处为 "TOG"）。 menu-icon 没有出现。我想我可以用 "PAGES" 替换 "TOG" 作为解决方法。
其次，当我点击它打开菜单时，它会将顶部栏向下推一排以覆盖标题并在顶部留下白色 space。即：
这是我的代码（正在进行大量工作 - 徽标将替换为图像等）：
<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>
有没有人知道是什么导致了我的问题？
据我所知，您正试图以非预期的方式使用 Foundation 的 Off-canvas（菜单）。
看来您正在寻找可以切换的移动菜单。
Off-canvas（菜单）是一种布局结构。当菜单出现时，整个布局向左/右移动。因此，您的内容应该包含在 Off-canvas（菜单）结构中：
来自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>
见上文<!-- main content goes here -->。您可以尝试按如下方式重建您的示例：
<!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会进一步帮助你。