【问题标题】:Foundation 5 - combine top navigation with off canvas?Foundation 5 - 将顶部导航与画布外结合?
【发布时间】:2014-03-10 17:07:49
【问题描述】:

我是 Foundation 的新手,我曾多次使用它,但总是忽略它,因为它似乎没有很多可用的导航选项。所有可用选项都适用于顶部菜单。左边还是右边呢?我通常需要构建具有复杂导航的网站,并且通常需要顶部菜单和左侧菜单,包括搜索、下拉菜单和其他子菜单。

如果可以同时拥有顶部菜单和左侧列的画布外导航,我可能会使用基础。有谁知道这是否可行,我会去哪里寻求帮助?

【问题讨论】:

  • 你确定你真的看了吗? this website 怎么样,您可以在 their Library 上找到更多示例(目前有 181 个示例)......从这 181 个示例中,没有什么与您想要完成的任务相似?
  • 是的,我想是的。该示例只有顶部导航,没有任何响应式侧导航

标签: jquery css zurb-foundation


【解决方案1】:

您需要始终让您可以访问这两个菜单,但只能使用 show-for-smallshow-for-medium-up 类显示它们。

您需要使用单独的导航集来实现您想要的。但是,为了同时使用这两者,您需要构建您的网站以适应画布外菜单并在 main-section 中构建顶部导航。

我们最近在公司网站上遇到了这个问题,我们只想调用一次导航,但事实证明这非常困难。如果您想查看代码的实时版本,请随时使用our site 作为参考。 (我们有一些类可以隐藏 medium-and-up 的画布外菜单,但您可以将其删除)。

这是结构外观的基本示例:

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

      <nav class="tab-bar">
        <section class="left-small">
          <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
         </section>

        <section class="middle tab-bar-section">
          <h1 class="title"><a href="/home"><img id="logoSmall" src="/images/main/header_logo_small.png" /></a></h1>
        </section>
      </nav>

      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><label>Menu</label></li>
          <li><a>link1</a></li>
          <li><a>link2</a></li>
          <li><a>link2</a></li>
        </ul>
      </aside>



      <section class="main-section">

        <!-- All of your website goes here -->
        <!-- Including the top navigation and all that jazz -->

      </section>

      <a class="exit-off-canvas"></a>
    </div><!--/innerWrapp-->
  </div><!--/offCanvasWrap-->

【讨论】:

    猜你喜欢
    • 2013-12-24
    • 1970-01-01
    • 2014-04-18
    • 1970-01-01
    • 2013-05-27
    • 1970-01-01
    • 1970-01-01
    • 2013-08-03
    • 1970-01-01
    相关资源
    最近更新 更多