/ / Foundation 5 - トップキャンバスとキャンバスを組み合わせる? - jquery、css、zurb-foundation

ファンデーション5 - トップキャンバスとオフキャンバスを組み合わせる? - jquery、css、zurb-foundation

私は財団に新しいです、私はそれを見てみました何度も何度も使用されていましたが、いつもそれを無視してきました。多くのナビゲーションオプションが用意されているようですが、利用可能なオプションはすべてトップメニューに当てはまります。検索、ドロップダウン、およびその他のサブメニューを含む左手メニューを含む。

可能であれば、私はおそらく基礎を使うことができました左側の列からトップ・メニューとオフ・キャンバス・ナビゲーションの両方を持つことができます。これが可能かどうか、誰かがこれを設定するための援助に行くのか知っていますか?

回答:

回答№1の場合は3

常に両方のメニューにアクセスできるようにする必要がありますが、 show-for-small そして show-for-medium-up クラス。

別々のナビゲーションセットを使用する必要がありますあなたが望むものを実現するためには、両方の機能を使用するには、キャンバス以外のメニューに合わせてウェブサイトを構築し、 main-section.

最近、私たちは会社のサイトでは、ナビゲーションを一度呼びたいと思っていましたが、それは非常に困難でした。ライブバージョンのコードを自由に使用してみたい場合 私たちのサイト 参考として(オフキャンバスメニューを非表示にするクラスがあります 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//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-->