ホームページビルダー・グレート初心者講座

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





 滑らかに動作するスライドメニュー

Smooth Navigational Menuについて

Smooth Navigational MenuはjQueryのプラグインで、滑らかに動作するスライドメニューを
簡単に実現するものです。
スライドメニューは多段にする事も可能です。


サンプル スライドメニュー





  jquery.js のダウンロード

jquery.js が既にダウンロード済みの場合は、
Smooth Navigational Menuのダウンロードに進んで下さい。


下のページから jquery.js をダウンロードします。

jQuery JavaScript Library - Downloading jQuery
http://docs.jquery.com/Downloading_jQuery#Download_jQuery


Uncompressed をクリックします。




jquery-x.x.x.js をクリックしてダウンロードします。
ソースが表示されてしまう場合は右クリックからファイルを保存して下さい。

保存時か、保存後にファイル名を jquery.js とリネームします。







  Smooth Navigational Menu のダウンロード

下のページから必要なファイルをダウンロードします。
それぞれ右クリックして保存して下さい。

Dynamic Drive - Smooth Navigational Menu
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm




  • ddsmoothmenu.js
  • ddsmoothmenu.css
  • ddsmoothmenu-v.css
  • 矢印のアイコン2つ

今回ダウンロードしたのは下の5つのファイルです。

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.js

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.css

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu-v.css

http://www.dynamicdrive.com/dynamicindex1/right.gif

http://www.dynamicdrive.com/dynamicindex1/down.gif





  ヘッダ内にタグを追加

ビルダーの 「編集」 → 「ページの属性」 とクリックし 「その他」のタブをクリックします。

「その他のHTMLタグ」 と記載された入力枠がありますので、そこへ以下のソースを追加します。
追加したら 「OK」 ボタンをクリックして下さい。


備考

既に jquery.jsの行が存在する場合は、この1行を除いたソースを貼り付けます。
この場合 ddsmoothmenu.js の行よりjquery.js の行が上に来るようにして下さい。

直接HTMLソースに追記する場合は <head> 〜 </head> の間に追加します。





  1段目のリストを作成する

「挿入」 → 「リスト」 → 「番号なしリスト」 をクリックします。

例では以下のように入力しました。
これが未操作時にメニューに表示されている項目になります。







  2段目のリストを作成する

2段目(1段目のメニュー上にマウスが来た時にスライド表示されるメニュー)は
先ほど挿入したリストにさらにリストを挿入します。
以下は「質問掲示板」 のメニューに対して2段目を設定する例です。

リストに入力した文字の右側あたりをクリックすると、以下のように
文字の最後にカーソルが点滅する状態になります。

この状態で、「挿入」 → 「リスト」 → 「番号なしリスト」 をクリックします。





ここに2段目の項目を入力していきます。
例では以下のように入力しました。




どこがどの部分が分からない場合は、本ページ上部のサンプルスライドメニュー
実際に動作させながら確認を行ってみて下さい。



備考

3段目を追加する場合は、2段目のリストの追加対象をクリックしておき、
「挿入」 → 「リスト」 → 「番号なしリスト」 をクリックします。
1段目に2段目を追加した作業と同じ要領で追加します。






  リンクを設定する

リストが出来上がったら、リストの文字にリンクを設定します。

リンク方法は一般的な文字へのリンクと同じ方法ですので省略させて頂きます。






  レイアウト枠で囲う

先ほど入力したリスト全体をマウスの左でドラッグし、反転表示させます。
余分な箇所が選択されてしまったり、必要な箇所が選択されないなど、
選択が難しいですが、以下のように反転を行います。

HTMLソースの見方が多少分かる場合は、「HTMLソース画面」に切り替えて
反転を行った方が簡単で確実かもしれません。





「HTMLソース」 に切り替えると以下のような状態になります。
この画面で反転を行った方が簡単かもしれません。
<ul> から始まり </ul> で終わる範囲が反転されていれば結構です。





「HTMLソース」 画面で反転を行った場合は「ページ編集」画面に戻って下さい。


「挿入」 → 「その他」 → 「HTMLタグ」 とクリックします。

「DIV」 をクリックして 「挿入」 、「閉じる」 をクリックします。



続けて 「編集」 → 「スタイルの設定」 とクリックし、
「定義済みIDの指定(1)」 のフォームに smoothmenu1 と入力、
「定義済みクラスの指定(2)」 のフォームに ddsmoothmenu と入力して下さい。







  動作確認

これでスライドメニューの設置は完了です。
「プレビュー」 画面で希望通りの動作をしているか確認してみましょう。





  正しく動作しない場合は?

メニュー上下に余分なスペースが入って大きくなっている場合

余分な <br>タグが入っている可能性があります。
スライドメニューを左クリックし、「HTMLソース」画面に切り替えて確認します。
<DIV id="smoothmenu1" class="ddsmoothmenu"> から </DIV> の間に改行が
入っていると上記のようにメニュー上下に余分なスペースが入ってしまいます。
入っている場合は除去しておきましょう。



何も表示されない、崩れて表示される場合

リストが正しく選択されていない可能性があります。
「レイアウト枠で囲う」で反転を行う範囲が途中までしか選択されていなかったり、
余分に選択されてしまっていると崩れたり表示されない可能性があります。

この場合は再度上記の操作を行うか、HTMLソースがある程度分かる方でしたら
直接修正を行った方が早いかもしれません。
以下のページを参考に修正を行ってみてください。

今回挿入したリスト部分のソース
http://www.aimix.jp/smoothnaviss.html



IEで影が残ってしまう場合

以下のページをご参照下さい。
http://www.aimix.jp/smoothnavitrb.html




| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved