jQuery
jQuery UI
通常…コンテンツはスクロールが発生すると…
順に…視認出来ない位置に消えて行きますが…
ナビゲーションも同様に消えて行くと…
せっかくのナビゲーションも…あまり…意味を成しません…
かといって…端からページ上部に固定しておくと…
ヘッダーと記事の間に設置するのが一般的ですから…
ナビゲーションのサイズによっては来訪者に認識されない恐れもあります…
なので…ページ読み込み時の初期位置から…
スクロールが発生したらスルスルとページ上部に固定され…
スクロールで戻ってきて初期位置に近づいたら…
ページ上部から初期位置にスルスルと戻るようにしてみましょう…
こんな感じで…スクロールにより…
ページ上部に固定されたり戻ったりを…
繰り返します…確認する際は…
スクロールのピッチによっては分かり辛いので
スクロールバーで操作するのが良いでしょう…
では…先ずは…ナビゲーション設置領域の設定を行います…
以下… Blogger での設定です…
「テンプレートデザイナー」のテンプレートでは…
表記が違いますので…ご自身でアレンジして下さい…
尚…ナビゲーションはご自身でお使いのもので大丈夫です…
jQuery UI Extra-1 : 「Menu」part2 マウスホバーでフライアウトする横型ナビゲーション
Bloggerでドロップダウンとフライアウト付きの自作画像ナビゲーションを実装する方法
当サイトは…
「body」(レンガ背景画像の部分)に…
「outer-wrapper」(メタル背景画像の部分)を…
載せて…レイアウトしています…
通常ですと次は「header」でしょうが…
「header」の上に「outer-top」という…
上部固定の領域を設定しています…
「レイアウト」「HTMLの編集」「ウィジェットのテンプレートを展開」で…
「Ctrl + F」で「<div id='outer-wrapper'>」を検索…ハイライト表示されたら…
１段下に…黄文字の１列を追加します…
<body>
<div id='outer-wrapper'>
<b:section class='outer-top' id='outer-top' showaddelement='yes'/>
（以下省略）
</div>
</body>
「テンプレートを保存」して「レイアウト」に戻ると…「outer-top」にガジェットが追加出来るようになっていますから…
「HTML/JavaScript」ガジェットを任意の名前で…
中身を…以下のようにして…「保存」します…
<div class="nav198 nav"> （ご自身のナビゲーションの HTML マークアップ） </div>BloggerでGadgetにTitleを付与したうえでタイトルを表示させない記述
Bloggerで全ての場所にガジェットを追加できるようにする
クラス名「nav198」と「nav」を変更する場合は…
以下の「CSS」と「JavaScript」も変更して下さい…
再び「ウィジェットのテンプレートを展開」して…
「outer-wrapper」の「CSS」の下あたりに…
ナビゲーション用の「CSS」を記述します…
ナビゲーション用の「CSS」
「outer-top」は幅「1000px」高さ「0」の…
「Browser Window」の上辺と考えて下さい…
そこから…下に「128px」領域左から「140px」の位置に…
幅「720px」のナビゲーションが配置されるのが初期値です…
ご自身のサイトやナビゲーションの設定により数値を適宜変更して下さい…
最後に「JavaScript」のカスタムコードを読み込みます…
「JavaScript」は…なるべく纏めて読み込むのがオススメです…
読み込み方法は冒頭か記事末のページャーから第１回「導入」をお読み下さい…
ナビゲーション用の「JavaScript」
クラス名「nav」を指定すると…ナビゲーションが…
初期値「128px」の位置が「120px」の位置までスクロールされると…
「1000ミリ秒（１秒）」かけてスルスルと動いて上部に固定されます…
数値はお好みで変更して下さい…
「プレビュー」で初期位置と動作をを確認して OK ならば…
「テンプレートを保存」して完了です…
お疲れ様でした…
最後までお読み頂き…ありがとうございました…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿