jQuery UI Extra-1 : 「Menu」part2 マウスホバーでフライアウトする横型ナビゲーション

「Menu」についての公式ページ…
jQuery UI Menu  

「横並び」の「Menu」に関して「Demos & Documentation」は…

独自に拡張していますので公式サイトにはありません…

前回「第９回」で…2012年10月初旬にリリースされた…

「jQuery UI 1.9」から…「Menu」を解説しましたが…

あくまでも公式サイトの範疇で「縦並び」だけのカスタマイズに絞りました…

今回は…独自に拡張させて「Menu」をナビゲーションらしく「横並び」にして…

マウスホバーでスライドダウンやスライドアップするナビゲーションとして…

「トップ」や「ボトム」に設置してみましょう…更には…

前回「第９回」で解説した「縦並び」は左サイドバー下部に設置していますが…

今回のカスタマイズ方法を使えば…ご覧の通りデフォルトの…

「縦並び」の「Menu」とは違うインターフェースで実装出来ます…

「jQuery」を未導入の方は上記ページングから…

「第１回」導入も合わせてお読み下さい…

Blogger には…ドロップダウンやフライアウト出来る…

ナビゲーションは実装されていませんし…「Plugin」を使うにしても…

自サイトや…導入している「jQuery UI」のテーマとのデザイン親和性に問題があり…

改変に手間取ったり…何より…１から自作するとなると結構な手間です…

それが…導入している「jQuery UI」のテーマに沿った「横並び」ナビゲーションが…

ソコソコお気軽に作成出来ちゃいます…

ボトム用「横並び」ナビゲーションを設置している関連サイトで…

  Depressing News  

ボトムまでスクロールして見てみましょう…

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

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

ボトムまでスクロールした状態

「Fixed Navigation for Bottom」が…

ボトムに張り付いていますね…

存在感無さ過ぎる程の馴染み様でしょ

アクセスアップより好みのデザインで…

…って方だけ…以下…読み進んで下さい…

尚…トップに張り付いている「Fixed Navigation for Top」は…

オリジナルのスクリプトで作成していますので…

そのうち記事にしますが…今回は解説対象外です…

冒頭か記事末のページングから…第９回「Menu」part1 も合わせてお読み下さい…

第９回同様…説明画像の「jQuery UI」のテーマは「dark-hive」を使用します…

HTML マークアップも第９回と同様ですが…「ui-state-disabled」は…

トップと…ボトムのナビゲーションには不要でしょうから外してあります…

HTML マークアップ

<ul class="クラス名">
<li><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><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><a href="#">Amesville</a></li>
</ul>

先ずは…CSS でアイテム幅を「100px」にして１階層目を「横並び」にし…

２階層目以降を縦並びのままでトップ用ナビゲーションを表示してみましょう…

１階層目が判別出来ません

背景領域の高さがありませんので…

水色に着色してある部分が本来１階層目ですが…

マウスホバーしないと文字が見えません…

なので…リンクに「position」プロパティを指定して…

判別しやすいように…枠線と階層毎に色分けして「margin」で調整してみましょう…

アレンジ用「Menu for Top」

アレンジ用「Menu for Bottom」

かなり…良い感じになってきました…

しかしながら…まだ…

「jQuery UI」のインターフェースと言うには…

ちょっと無理がありますね…

ですが…色 や枠線で個性を出したい方には案外向いているかもしれないので…

一応アレンジ用として…カスタムコードと CSS を置いておきます…

アレンジ用カスタムコード

/* トップ用カスタムコード */
$(".t-menu").menu({icons:{submenu:"ui-icon-triangle-1-s"},position:{my:"right top",at:"left bottom"}}).find(".ui-menu li a").addClass("ui-button");
/* ボトム用カスタムコード */
$(".b-menu").menu({icons:{submenu:"ui-icon-triangle-1-n"},position:{my:"right bottom",at:"left top"}}).find(".ui-menu li a").addClass("ui-button");

アレンジ用 CSS

/* トップ・ボトム兼用 */
.ui-menu {width:816px;margin:0 auto;position:absolute;}
.ui-menu .ui-menu-item{display:inline;float:left;width:100px;margin:0 1px;position:relative;}
.ui-menu li a{color:gray;text-align:center;border:1px solid;}
.ui-menu ul li a{color:green;text-align:center;}
.ui-menu ul li ul li a{color:red;text-align:center;}
.ui-menu .ui-menu-item ul{display:block;width:100px;}
.ui-menu .ui-menu-item ul li{margin:1px;}

CSS のクラス名はデフォルトの「ui-menu」にしてありますので…

アレンジで独自デザインに挑戦する方は適宜変更して下さい…

ナビゲーションの横幅にはアイテムの枠線幅やマージンが含まれ…

ナビゲーションは設置領域の中央寄せで表示されます…

下位階層でも文字を中央寄せにしているのは…作成してみると解りますが…

階層で幅が違うとマウスホバー時の反応が鈍いので…

上位階層のボトム中央に下位階層のトップ右端を合わせて表示するためです…

こうする事でマウスホバーの反応を良くして…尚且つ…

階層が重なっても文字が全て見えなくなるのを防げます…

上位階層の右半分に表示させたい方はデフォルトの左寄せのままでも良いでしょう…

完成形一歩手前トップ用

完成形一歩手前ボトム用

重ならないよう…

完成形一歩手前の状態で作成すると…

この様になりますが…

ホント…マウスホバー時に…モッサリするんです…

それも含めて完成形への変更点は…

1. 階層の重なりを変更
2. 読み込み時に枠線を記述しなくてもボタンを可視化して「jQuery UI」のデザインに馴染むように「ui-state-default」クラスを付与
3. ボタンを可視化すると角丸になって只の横並びボタンになってしまうので角丸クラスを削除してナビゲーション風に近付ける
4. リストを長方形にするとリスト全体をラップする角丸枠線と重なり背景画像も僅かに見えてしまい邪魔なので削除

…ってな感じです…完成形はこの様になります…

トップ用ナビゲーションの完成形

ボトム用ナビゲーションの完成形

やはり…ナビゲーションですから…

マウスホバーで…サクサク動作しないと…

閲覧者の方々のストレスになりますからね…

当サイトのような…

共有ボタンも押して貰えない…

アクセスアップにも無頓着な辺境サイトならいざ知らず…

頑張っていらっしゃるサイト運営者の方には死活問題でしょうしね…

それでは…完成形「横並び」ナビゲーションのカスタムコードです…

完成形「横並び」ナビゲーションのカスタムコード

/* トップ用の完成形「横並び」ナビゲーションのカスタムコード */
$(".t-menu").menu({icons:{submenu:"ui-icon-triangle-1-s"},position:{my:"right top",at:"center bottom"}}).find(".ui-menu-item").addClass("ui-state-default").find(".ui-corner-all").removeClass("ui-corner-all");
/* ボトム用の完成形「横並び」ナビゲーションのカスタムコード */
$(".b-menu").menu({icons:{submenu:"ui-icon-triangle-1-n"},position:{my:"right bottom",at:"center top"}}).find(".ui-menu-item").addClass("ui-state-default").find(".ui-corner-all").removeClass("ui-corner-all");

完成形「横並び」ナビゲーションの CSS です…

完成形「横並び」ナビゲーションの CSS

/* 共通部分 */
.ui-menu ul{margin:0;padding:0;width:220px}
.widget-content .ui-menu{border:none}
/* トップ用 */
.widget-content .t-menu{width:816px;margin:0 auto;padding:0;border:none;background:none}
.widget-content .t-menu .ui-menu-item{display:inline;float:left;width:100px;font-size:10px}
.t-menu .ui-menu-item ul{display:block;width:100px}
.t-menu li a,.t-menu ul li a,.t-menu ul li ul li a,.t-menu ul li ul li ul li a{text-align:center}
/* ボトム用 */
.widget-content .b-menu{width:816px;margin:0 auto;padding:0;border:none;background:none}
.widget-content .b-menu .ui-menu-item{display:inline;float:left;width:100px;font-size:10px}
.b-menu .ui-menu-item ul{display:block;width:100px}
.b-menu li a,.b-menu ul li a,.b-menu ul li ul li a,.b-menu ul li ul li ul li a{text-align:center}

当然ながら…「縦並び」ナビゲーションも同様のインターフェースに出来ますので…

オマケで…サイドバー用の完成形「縦並び」ナビゲーションのカスタムコードです…

完成形「縦並び」ナビゲーションの CSS

.ui-menu ul{margin:0;padding:0;zoom:1;width:220px;z-index:10}
.widget-content .ui-menu{border:none}
.widget-content .l-menu .ui-state-disabled a{color:#ffaaaa;font-size:12px;font-weight:bold;text-align:center}
.l-menu li a,.l-menu ul li a,.l-menu ul li ul li a,.l-menu ul li ul li ul li a{text-align:left}

完成形「縦並び」ナビゲーションのカスタムコード

/* 左サイドバー用の完成形「縦並び」ナビゲーションのカスタムコード */
$(".l-menu").menu({icons:{submenu:"ui-icon-triangle-1-s"},position:{my:"left top",at:"center center"}}).find(".ui-menu-item").addClass("ui-state-default").find(".ui-corner-all").removeClass("ui-corner-all");
/* 右サイドバー用の完成形「縦並び」ナビゲーションのカスタムコード */
$(".r-menu").menu({icons:{submenu:"ui-icon-triangle-1-s"},position:{my:"right top",at:"center center"}}).find(".ui-menu-item").addClass("ui-state-default").find(".ui-corner-all").removeClass("ui-corner-all");

ボトム用「横並び」ナビゲーションを実装している関連サイトでは…

  Depressing News  

「Progressbar」で上下から挟んで実装しています…

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

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

「Progressbar」を使いたい場合は冒頭か記事末のページングから…

第６回「Progressbar」もお読み下さい…

Blogger「レイアウト」

参考までに… Blogger での…

ボトム用「横並び」ナビゲーションの…

実装方法を書いておきます…

どのガジェットから読み込んでも…

「position」プロパティで…

任意の場所に配置出来ますが…

デザイン通りが後で編集しやすいので…

「レイアウト」から最下部に「Outer Bottom」など任意の名前で…

「HTML/JavaScript」ガジェットを追加して…

以下の…HTML マークアップサンプルの赤文字に挟まれた部分を…

ご自身の…HTML マークアップに差し替えて「保存」します…

HTML マークアップのサンプル

<div style="width:816px;margin:0 auto;padding:0;border:none;background:none;">
<div class="progressbar value6"></div>
<ul class="b-menu">
<li><a href="URL">１階層目</a></li>
<li><a href="URL">１階層目</a>
    <ul>
    <li><a href="URL">２階層目</a>
        <ul>
        <li><a href="URL">３階層目</a></li>
        </ul>
    </li>
    <li><a href="hURL">２階層目</a>
        <ul>
        <li><a href="URL">３階層目</a></li>
        </ul>
    </li>
    </ul>
</li>
<li><a href="URL">１階層目</a>
    <ul>
    <li><a href="URL">２階層目</a>
        <ul>
        <li><a href="URL">３階層目</a>
            <ul>
            <li><a href="URL">４階層目</a></li>
            </ul>
        </li>
        </ul>
    </li>
    </ul>
</li>
<li><a href="URL">１階層目</a>
    <ul>
    <li><a href="URL">２階層目</a>
        <ul>
        <li><a href="URL">３階層目</a></li>
        </ul>
    </li>
    </ul>
</li>
<li><a href="URL">１階層目</a>
    <ul>
    <li><a href="URL">２階層目</a></li>
    </ul>
</li>
<li><a href="URL">１階層目</a>
    <ul>
    <li><a href="URL">２階層目</a></li>
    </ul>
</li>
<li><a href="URL">１階層目</a>
    <ul>
    <li><a href="URL">２階層目</a></li>
    </ul>
</li>
<li><a href="URL">１階層目</a></li>
</ul>
<div class="progressbar value6"></div>
</div>

（解説に不要なリスト・URL など一部削除して簡略化してあります…）

 Bloggerで全ての場所にガジェットを追加できるようにする

 BloggerでGadgetにTitleを付与したうえでタイトルを表示させない記述

「2列目」と「58列目」は「Progressbar」を表示させるタグですから…

不要な場合は削除して下さい…

「1列目」の領域幅は…上記…

完成形「横並び」ナビゲーションの CSS の領域幅以上に設定して下さい…

「テンプレート」「HTML の編集」から…

下記…「設置領域の CSS」と…

完成形「横並び」ナビゲーションの CSS を記述して「保存」すれば…

ボトムに張り付く領域の完成です…

領域幅は「body」か「footer」の領域幅に合わせるのが良いでしょう…

設置領域の CSS

#outer-bottom{width:1000px;position:fixed;bottom:0;margin:0 auto}

お疲れ様でした…

最後までお読み頂き…ありがとうございました…

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

Design jQuery JavaScript Current-Label : jQuery / Extra