一緒に学ぶ！HP制作

今回メニューの実装に使うjQueryのプラグインは『SmartMenu』です。
当サイトのメニューの『jQueryについて』→『jQueryプラグイン一部紹介』にも掲載しています。

アクセスすると下の画像の通り、1つだけ『Download』があるのでそちらをクリックしましょう。
クリックするとファイルのダウンロードが開始されます。

ダウンロードが終わり次第、ZIPファイルを展開し次のファイルだけを取り出しましょう。

※ 今回は4種類あるメニュー(sm-simple・sm-mint・sm-clean・sm-blue)の中から『sm-blue』を使っていきます。

まずは下の画像にある●のマークがついているファイルを取り出しましょう。

『jquery.smartmenus.js』ファイル→『js』フォルダ
『sm-core-css.css』ファイル→『css』フォルダ
『sm-blue.css』ファイル→『css』フォルダ


$(function() {
  $('#main-menu').smartmenus();
});

次に『Page1.html』ファイルの「head」内に下記のコードを入力します。


<script src="../js/jquery.smartmenus.js"
type="text/javascript">
</script>

<link rel="stylesheet"
type="text/css"
href="../css/sm-core-css.css"/>

<link rel="stylesheet"
type="text/css"
href="../css/sm-blue.css"/>

次に『Page1.html』ファイルの「body」内に下記のコードを入力します。


<ul id="main-menu" class="sm sm-blue">

    <li><a href="Page1.html">Home</a></li>
    //メインメニュー『Home』の設定

    <li><a href="#">検索ページ</a>
    //メインメニュー『検索ページ』の設定

	<ul>
	   <li><a href="https://www.google.co.jp/">
		Google</a></li>
	//サブメニュー『Google』の設定

	   <li><a href=".http://www.yahoo.co.jp/">
		Yahoo!</a></li>
	//サブメニュー『Yahoo!』の設定

	</ul>

    </li>

</ul>

これでメニューを導入することができました。次の段階へ行ってみましょう！

サイトを作ってみよう

4.メニューの導入