0

我正在尝试 Foundation 的画布外示例，我想将它用于餐厅菜单。每个菜单部分的内容将显示在右侧，选项卡式菜单项导航在左侧。当我转到移动时，一切正常，但是当我单击菜单类别并出现侧边栏时，内容会正确更改，但侧边栏不会滚动回左侧。我必须重新单击显示菜单（或侧边栏）按钮才能将屏幕向后滚动。

在继续设计和添加内容之前，我只想知道我想要的东西是否可行。

<!DOCTYPE html>

    <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <title>Welcome to Foundation Testing</title>

    <!-- Included CSS Files -->
  <link rel="stylesheet" href="stylesheets/app.css">
  <link rel="stylesheet" href="stylesheets/offcanvas.css">

  <script src="javascripts/foundation/modernizr.foundation.js"></script>

</head>

  <body id="page" class="off-canvas slide-nav">
    <div class="container">

        <nav id="topMenu" role="navigation">
            <ul id="nav" class="nav-bar">
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Menu</a></li>
        <li><a href="">Contact Us</a></li>
                <li><a href="">News / Press</a></li>
            </ul>
        </nav>

        <header id="header" class="row">
          <div class="four columns phone-two">
            <h1 id="site-title"><a href="index.html"><img src="img/logo2.png"></a></h1>
          </div>
          <div class="eight columns phone-two">
            <nav id="menu" role="navigation" class="hide-for-small">
                <ul id="mainNav" class="nav-bar">
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Contact Us</a></li>
        <li><a href="">News / Press</a></li>
                </ul>
            </nav>
            <p class="show-for-small">
              <a class='menu-button button' id="menuButton" href="#menu">Navigation</a>
              <a class='sidebar-button button' id="sidebarButton" href="#sidebar">Menu Items</a>
            </p>
          </div>
        </header>

        <div class="row">
        <section role="main">
            <h3>Off Canvas Top Nav</h3>
            <div class="row">
              <div class="twelve columns">


        <ul class="tabs-content">
        <li class="active" id="simple1Tab">
        <h1 class="menutitle">APPETIZERS</h1>
        </li>
        <li id="simple2Tab">
          <h1 class="menutitle">PHO / SOUPS</h1>
        </li>
        <li id="simple3Tab">
        <h1 class="menutitle">BUN / VERMICELLI</h1>
        </li>
        </ul>

          </div>


        </div>
        </section>

        <section id="sidebar" role="complementary">

                      <h3>Menu Items</h3>
      <dl class="tabs">
        <dd class="active"><a href="#simple1">Appetizers</a></dd>
        <dd><a href="#simple2">Pho / Soups</a></dd>
        <dd><a href="#simple3">Bun / Vermicelli</a></dd>
      </dl>
        </section>
        </div>

    <footer class="site-footer row" role="contentinfo">
      <div class="twelve columns">
        Created by ZURB for Foundation 3, based on code from Jason Weaver and Luke Wroblewski
      </div>
    </footer>
  </div>


    <!-- Included JS Files -->
  <script src="javascripts/foundation/jquery.js"></script>
  <script src="javascripts/foundation/jquery.foundation.reveal.js"></script>
  <script src="javascripts/foundation/jquery.foundation.orbit.js"></script>
  <script src="javascripts/foundation/jquery.foundation.forms.js"></script>
  <script src="javascripts/foundation/jquery.placeholder.js"></script>
  <script src="javascripts/foundation/jquery.foundation.tooltips.js"></script>
  <script src="javascripts/foundation/jquery.foundation.alerts.js"></script>
  <script src="javascripts/foundation/jquery.foundation.buttons.js"></script>
  <script src="javascripts/foundation/jquery.foundation.accordion.js"></script>
  <script src="javascripts/foundation/jquery.foundation.navigation.js"></script>
  <script src="javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
  <script src="javascripts/foundation/jquery.foundation.tabs.js"></script>
  <script src="javascripts/foundation/jquery.offcanvas.js"></script>
  <script src="javascripts/foundation/app.js"></script>

</body>
4

0 回答 0