/ / Foundation 5のトップバーとタブバーを組み合わせる方法 - zurb-foundation

Foundation 5 - zurb-foundationでトップバーとタブバーを組み合わせる方法

結合することは可能ですか? トップバー そして タブバー (オフキャンバス)?

この: ここに画像の説明を入力

モバイルサイズにリサイズすると次のようになります:

ここに画像の説明を入力

しかし、私はまたそこにタブバー(オフキャンバス)を含めるので、このようになります

ここに画像の説明を入力

私はこのことがどうやってできるのか想像できませんでした。私のカスタムメニューアイコンを作ってトップバーの中に入れようとしていましたが、ポジショニングに問題があり、要素が消えていて、マージン/パディングがうまく機能しませんでした。あなたは良いアイデアを持っています。

回答:

回答№1の場合は3

あなたはそれを行うことができます2つの方法があります、まずあなたは メディアクエリ または別の方法では可視性クラスを使用しています。たとえば、トップバーのコードadd class = "show-for-medium-up"では、中画面や上に表示されるトップバーを小さくしますが、それを非表示にします。

<nav class="top-bar show-for-medium-up" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">........................

offcanvasのコードを追加し、class = "hide-for-medium-up"を追加します。

<div class="off-canvas-wrap hide-for-medium-up">
<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">Foundation</h1>

これにより、画面サイズに応じて異なるスタイルを実装することができます。詳細については、 可視性クラス


関連する質問


コメント(0)

コメントを追加