Pure
  • はじめに
  • レイアウト
  • ベース
  • グリッド
  • フォーム
  • ボタン
  • テーブル
  • メニュー
  • ツール
  • カスタマイズ
  • 拡張
  • リリース

メニュー

メニュー用のシンプルなCSS。

縦型メニュー

メニューはデフォルトで縦型です。最小限のデフォルトスタイルと低特殊性のセレクタにより、簡単にカスタマイズできます。デフォルトでは、メニュー項目はコンテナの幅の100％を占有するため、メニューの幅を制限するか、`display:inline-block`を設定することをお勧めします。

Yahooサイト
  • Flickr
  • Messenger
  • スポーツ
  • ファイナンス
  • その他のサイト
  • ゲーム
  • ニュース
  • OMG! 
<style>
    .custom-restricted-width {
        /* To limit the menu width to the content of the menu: */
        display: inline-block;
        /* Or set the width explicitly: */
        /* width: 10em; */
    }
</style>
<div class="pure-menu custom-restricted-width">
    <span class="pure-menu-heading">Yahoo Sites</span>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-heading">More Sites</li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Games</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">OMG!</a>
        </li>
    </ul>
</div>

横型メニュー

横型メニューを作成するには、`pure-menu-horizontal`クラス名を追加します。

ブランド
  • ニュース
  • スポーツ
  • ファイナンス 
<div class="pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
    </ul>
</div>

選択済み項目と無効な項目

選択されたリスト要素をマークするには、リスト要素に`pure-menu-selected`クラスを追加します。リンクを無効にするには、リスト要素に`pure-menu-disabled`クラス名を追加します。無効な項目は淡色表示され、ホバースタイルは継承されません。

  • 選択済み
  • 通常
  • 無効 
<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected">
            <a href="#" class="pure-menu-link">Selected</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Normal</a>
        </li>
        <li class="pure-menu-item pure-menu-disabled">
            <a href="#" class="pure-menu-link">Disabled</a>
        </li>
    </ul>
</div>

ドロップダウン

アクセシビリティを確保するために、JavaScriptを使用してサブメニューを有効にすることをお勧めします。開始するために役立つ、プレーンなJSで記述されたサンプルスクリプトは、ARIAサポート、限定的なサブメニュー矢印キーナビゲーション、外部イベントまたはESCキーによるメニューの閉じ機能を提供します。しかし、エッジ検出、包括的な矢印キーナビゲーション、古いブラウザとの互換性のためのポリフィルを追加することで、さらに機能を拡張することもできます。

JavaScriptを導入しても、ホバー時にサブメニューを表示したい場合があります。`pure-menu-has-children`リスト項目に`pure-menu-allow-hover`を追加するだけです。これはデスクトップユーザーにとって便利であり、JavaScriptを使用しないユーザーのためのフォールバックとしても機能します。

  • ホーム
  • お問い合わせ
    • メール
    • Twitter
    • Tumblrブログ 
<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected">
            <a href="#" class="pure-menu-link">Home</a>
        </li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Email</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Twitter</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Tumblr Blog</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

サブメニュー付き縦型メニュー

ドロップダウンの作成に使用されるのと同じ構造は、縦型メニューでも機能します。サブメニューをネストできますが、複雑なメニューは小さな画面では使い勝手が悪くなる可能性があることに注意してください。

  • Flickr
  • Messenger
  • スポーツ
  • ファイナンス
  • その他
    • 自動車
    • Flickr
    • さらにその他
      • Foo
      • Bar
      • Baz 
<div class="pure-menu custom-restricted-width">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected">
            <a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-item pure-menu-has-children">
            <a href="#" id="menuLink1" class="pure-menu-link">More</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Autos</a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">Flickr</a>
                </li>
                <li class="pure-menu-item pure-menu-has-children">
                    <a href="#" id="menuLink1" class="pure-menu-link">Even More</a>
                    <ul class="pure-menu-children">
                        <li class="pure-menu-item">
                            <a href="#" class="pure-menu-link">Foo</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#" class="pure-menu-link">Bar</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#" class="pure-menu-link">Baz</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

スクロール可能な横型メニュー

スクロール可能な横型メニューを作成するには、`pure-menu-scrollable`クラス名を追加します。スペースが足りない場合、メニュー項目をスクロールまたはフリックできます。ドロップダウンメニューはサポートされていません。モーメンタムベースのスクロールが必要な場合は、scrollboosterなどのJSライブラリを使用してそのような効果を追加することをお勧めします。

Yahoo
  • ホーム
  • Flickr
  • Messenger
  • スポーツ
  • ファイナンス
  • 自動車
  • ビューティ
  • 映画
  • 中小企業
  • クリケット
  • テクノロジー
  • ワールド
  • ニュース
  • サポート 
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
    <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Home</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Autos</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Beauty</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Movies</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Small Business</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Cricket</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Tech</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">World</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Support</a>
        </li>
    </ul>
</div>

スクロール可能な縦型メニュー

スクロール可能な縦型メニューを作成するには、メニューの高さを制限してから、`pure-menu-scrollable`クラス名を追加します。メニュー項目をスクロールまたはフリックできます。サブメニューはサポートされていません。

Yahoo
  • ホーム
  • Flickr
  • Messenger
  • スポーツ
  • ファイナンス
  • 自動車
  • ビューティ
  • 映画
  • 中小企業
  • クリケット
  • テクノロジー
  • ワールド
  • ニュース
  • サポート 
<style>
    /* Customization to limit height of the menu */
    .custom-restricted {
        height: 160px;
        width: 150px;
        border: 1px solid gray;
        border-radius: 4px;
    }
</style>
<div class="pure-menu pure-menu-scrollable custom-restricted">
    <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Home</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Autos</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Beauty</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Movies</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Small Business</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Cricket</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Tech</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">World</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Support</a>
        </li>
    </ul>
</div>

非表示になるレスポンシブメニュー

より複雑なメニュー（例：

  • レスポンシブ縦型メニュー（ハンバーガーメニューのように折り畳まれます。このPureウェブサイトのメニューと同様です。）、
  • レスポンシブ横型スクロールメニュー（小さな画面では画面外に移動します。）、
  • レスポンシブ横型から縦型メニュー（画面外にスライドします。）
<ul>
    <li>
        <a href="/layouts/side-menu/">Responsive Vertical Menu</a>, which collapses behind a hamburger, similar to the menu on this Pure website.
    </li>
    <li>
        <a href="/layouts/tucked-menu/">Responsive Horizontal-Scrollable Menu</a>, which tucks out of the way on small screens.
    </li>
    <li>
        <a href="/layouts/tucked-menu-vertical/">Responsive Horizontal-to-Vertical Menu</a>, which slides out of view.
    </li>
</ul>

このサイトは ❤️ を使ってPure vで構築されています。3.0.0
このサイトのすべてのコードは、特に明記されていない限り、Yahoo BSDライセンスの下でライセンスされています。

  • GitHubプロジェクト
  • セキュリティ連絡先情報

© 2014 - 現在 Yahoo Inc. 無断複製・転載を禁じます。