「jQuery」と「jQuery UI」で HTML に彩りを添えよう…第９回「Menu」part1 マウスホバーでフライアウトする縦型ナビゲーション

概要

「jQuery UI」の公式ページ…
jQuery UI  

「Menu」に関しての「Demos & Documentation」
jQuery UI Documentation / API / 1.9 / Menu  


2012年10月初旬にリリースされた…

「jQuery UI 1.9」から…

第８回で解説した「Tooltip」と同時に…

マウスホバーでサブメニューがフライアウト表示される縦型のナビゲーション…

「Menu」も追加されていますので…

サイドバーにナビゲーションを置きたい方は試してみては如何でしょう

上記…デモページのデフォルトはこんな感じになっています…

デフォルトの状態

サブメニューがあるリストに…

付与されるアイコンが地味すぎて…

分かりにくいので変更します…

更には…デフォルトでは…例によって「#menu」と…

「id」記述になっていますので「class」記述に変更します…

テーマ「base」ではリンクのホバーやアクティブが分かりにくいので…

以下…説明用のテーマに…

当サイトで使用している「dark-hive」を使用します…

変更後は…こんな感じになります…

左サイドバー用「Menu」

デフォルトのアイコン「ui-icon-carat-1-e」

…から右向き三角形「ui-icon-triangle-1-e」

…に変更しました…

アイコンはお好みでどうぞ…

左サイドバー用のカスタムコード

それでは左サイドバー用のカスタムコードです…

左サイドバー用のカスタムコード

$(".l-menu").menu({icons:{submenu:"ui-icon-triangle-1-e"}});

クラス名とアイコンはお好きにどうぞ…

カスタムコードの導入方法は過去記事をお読み下さい…

 「jQuery」と「jQuery UI」で HTML に彩りを添えよう…第１回「導入」

さて…デフォルトのコードも左サイドバー用のカスタムコードも…

下位階層のフライアウト表示は上記画像のように…

上位階層の右に順にフライアウト表示して行くのがデフォルトです…

当サイトのテンプレートは…

「３カラム左右サイドバー」ですので左サイドバーの下部に…

ナビゲーションとして設置していますが何ら問題ありません…

しかしながら…「２カラム右サイドバー」や「WordPress」などによくある…

「３カラム右サイドバー２列」などでは右にフライアウト表示されると…

サイトの横幅設定によっては不都合な状況も生じるでしょう…

なので…右サイドバー設置用に…

左にフライアウト表示するカスタムコードも置いておきます…

右サイドバー用のカスタムコード

右サイドバー用のカスタムコード

$( "r-menu" ).menu({icons:{submenu:"ui-icon-triangle-1-s"},position:{my:"right top",at:"left center"}});

導入するとこんな感じになります…

右サイドバー用「Menu」

アイコンは…右向き三角形では…

多少の違和感があるので下向き三角形…

「ui-icon-triangle-1-s」に変更してあります…

ホバーしたアイテムのトップと…

フライアウト表示された階層のトップ位置を揃えるのがデフォルトですが…

これも…ホバーしたアイテムの左辺中心に揃えるように変更してあります…

画像を見ると解りやすいと思います…

サブメニューの親メニューに対しての相対的な位置を…

子階層を「my」…親階層を「at」で指定します…

「point」と表記してある場所を起点にフライアウト表示されていますね…

因みに…左サイドバー用のカスタムコードは…

デフォルトの位置のままですから記述していませんが…

初期値はこうなります…

{my: "left top", at: "right top"}

サイドバー用の共通 CSS

CSS はサイドバー用で左右共通です…

サイドバー用の共通 CSS

.ui-menu{width:150px;}

当サイトでは下位階層のテキスト幅の関係で「220px」に設定していますが…

１階層目の横幅は設置場所の横幅に依存します…

HTML マークアップ

HTML マークアップは全て上記デモページのものを使っていますが…

クラス名は変更しています…

「ul」の単純な入れ子構造で階層を増やせます…

HTML マークアップ

<ul class="クラス名">
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li><a href="#">Delphi</a>
    <ul>
    <li class="ui-state-disabled"><a href="#">Ada</a></li>
    <li><a href="#">Saarland</a></li>
    <li><a href="#">Salzburg</a></li>
    </ul>
</li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a>
    <ul>
    <li><a href="#">Delphi</a>
        <ul>
        <li><a href="#">Ada</a></li>
        <li><a href="#">Saarland</a></li>
        <li><a href="#">Salzburg</a></li>
        </ul>
    </li>
    <li><a href="#">Delphi</a>
        <ul>
        <li><a href="#">Ada</a></li>
        <li><a href="#">Saarland</a></li>
        <li><a href="#">Salzburg</a></li>
        </ul>
    </li>
    <li><a href="#">Perch</a></li>
    </ul>
</li>
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>

「クラス名」は各カスタムコードのクラス名に変更して下さい…

「ui-state-disabled」はボタンを無効化するクラス名です…

当サイトではサイト名を表示してタイトルの代替として使用しています…

デモページにあるアイコンを付与したリストにするには…

HTML にアイコン名をタグで直に記述します…

黄文字のタグが該当部分です…

<ul class="クラス名">
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>保存</a></li>
</ul>

おわりに…

さてさて…

「左サイドバー用」「右サイドバー用」「アイコン付与」と解説してきましたが…

「ヘッダー」や「フッター」に設置する横並びのナビゲーションとしては使えない

…という…疑問の声が聞こえてきそうですね…

デモページでも解説されていませんね…

しかしながら…というか…当然ながら…というか…出来ます

解説用「Menu for Top」

解説用「Menu for Bottom」

HTML を作成してブラウザで表示させると…

こんな感じになります…

あくまでも解説用で…

構造を解りやすくするために…

階層毎に色分けし…CSS と JavaScript をチョコチョコ程度ですが…

結構…良い感じでしょ

完成形は関連のニュース引用系のサイトで…

ボトムナビゲーションとして使っています…

  Depressing News  

現在は以下のスクリプトを導入していますので削除しています…

 縦スクロール発生時にヘッダーのナビゲーションをページ上部にスルスルと移動して固定

解説画像と関連サイトの完成形を見比べると分かる人には分かるでしょうし…

タイトルにあるように今回は「縦型」の解説ですし…

今回で導入している基本形の解説は終了して次回以降は…

アレンジを加えたもの（まぁ…今迄も全てアレンジは加えていましたが）…

…を…紹介していく予定ですので…

公式サイトに載っていないのも勘案して…もったいぶって…

横並びのナビゲーションの完成形の解説は「Extra」で行います…

悪しからず…(￣ー￣)邪笑

お疲れ様でした…

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery / Extra JavaScript Current-Label : jQuery