ここからの指示に従ってください:
トップバーには 4 つの主要な要素があり、そのうちの 3 つが適切に機能するために必要です: ul.title-area、セクション class="top-bar-section" で囲まれた ul class="right/left 要素、および li.モバイル レイアウトでメニューを展開する toggle-topbar 要素. .toggle-topbar 要素を含める限り、li class="name" を省略できます。
http://foundation.zurb.com/docs/components/top-bar.html
私はこのレイアウトを作成しました (これは私のワードプレスのテーマがロードする生成された HTML です):
<header id="masthead" class="site-header" role="banner">
<nav id="site-navigation" class="navigation-main top-bar row" role="navigation">
<ul class="title-area small-12 large-6 columns">
<!-- Title Area -->
<li class="name">
<!--h1 class="menu-toggle"-->
<h1>
<img src="http://ns2101.boxqos.com/wp-content/uploads/2013/04/logo.png" id="logo_image" alt="Phoenix Concept" />
</h1>
<!--
<div class="screen-reader-text skip-link">
<a href="#content" title="Skip to content">
Skip to content
</a>
</div>
-->
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon">
<a href="#">
<span>
Menu
</span>
</a>
</li>
</ul>
<section class="top-bar-section small-12 large-6 columns">
<ul id="menu-menu" class="left">
<li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333">
<a href="http://ns2101.boxqos.com/offnungszeiten/">
Öffnungszeiten
</a>
</li>
<li id="menu-item-334" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-334">
<a href="http://ns2101.boxqos.com/unser-restaurant/">
Unser Restaurant
</a>
</li>
<li id="menu-item-335" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-335">
<a href="http://ns2101.boxqos.com/willkommen/">
Willkommen
</a>
</li>
<li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-337 current_page_item menu-item-339">
<a href="http://ns2101.boxqos.com/kontakt/">
kontakt
</a>
</li>
<li id="menu-item-340" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-340">
<a href="http://ns2101.boxqos.com/blog/">
Blog
</a>
</li>
</ul>
<script>
$('.top-bar-section li').addClass('small-12 large-4');
$('.top-bar-section').addClass('small-12 large-4');
</script>
</section>
</nav>
<!-- #site-navigation -->
</header>
<!-- #masthead -->
そして、財団のアプリを含めました:
$(function(){
$(document).foundation();
})
問題は、ウィンドウのサイズが変更されたときのトップ ナビゲーションのトグルが機能しないことです....
http://ns2101.boxqos.com/kontakt/#
私が見逃しているものは何ですか?