【jQuery】セクションに対応したナビゲーション、MenuSpyの使い方!!

シュウ

今回は【jQuery】セクションに対応したナビゲーション、MenuSpyの使い方!!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
プラグインのMenuSpyを使って「セクションに対応したナビゲーション」をしたい方向け
今回はMenuSpyについて解説しております。

今回は、「セクションに対応したナビゲーション」についての解説になります。
「MenuSpy」になりますが、今でも簡単で使いやすいプラグインになっております。

イメージ図は上記のようになります。
ナビゲーションがセクション毎にリンクし、それに伴いバー(黒い背景)が自動で動きます。

[記事の内容]

MenuSpyについて

MenuSpyとは、「セクションに対応したナビゲーション」のことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「MenuSpy」をダウンロードしましょう。

●MenuSpyにアクセス: 1https://github.com/lcdsantos/menuspy

●「Code」ボタンをクリック: 2

●「Download ZIP」ボタンをクリック: 3

必要なファイルについて

ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「menuspy-master」をご確認ください。

●jsファイル: 1「dist」 > 「menuspy.js」の1点を使用します。

<!--js-->
<script src="js/menuspy.js" type="text/javascript"></script>

また、「menuspy.js」を使用する際には、menuspyを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--js-->
<script src="js/menuspy.js" type="text/javascript"></script>
<script>
   var lavalampElm = document.querySelector('.lavalamp');
   var positionLavalamp = function(activeElm) {
     lavalampElm.style.width = activeElm.elm.offsetWidth + 'px';
     lavalampElm.style.left = activeElm.elm.offsetLeft + 'px';
   };
   var elm = document.querySelector('#main-header');
   var ms = new MenuSpy(elm, {
     callback: positionLavalamp
   });
   positionLavalamp({ elm: elm.querySelector('li.active') });
</script>

「menuspy.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 【jQuery】セクションに対応したナビゲーション...</title>
</head>
<body>

　コンテンツが入ります。

<!--js-->
<script src="js/menuspy.js" type="text/javascript"></script>
<script>
   var lavalampElm = document.querySelector('.lavalamp');
   var positionLavalamp = function(activeElm) {
     lavalampElm.style.width = activeElm.elm.offsetWidth + 'px';
     lavalampElm.style.left = activeElm.elm.offsetLeft + 'px';
   };
   var elm = document.querySelector('#main-header');
   var ms = new MenuSpy(elm, {
     callback: positionLavalamp
   });
   positionLavalamp({ elm: elm.querySelector('li.active') });
</script>
</body>
</html>

「セクションに対応したナビゲーション」の設定について

次に、「セクションに対応したナビゲーション」の設定について解説します。

「セクションに対応したナビゲーション」の設定について

デモサイトはコチラから。
基本構造の書き方は以下のようになります。

「セクションに対応したナビゲーション」

<!--ヘッダー部分-->
<header id="main-header" class="lavalamp-menu">
   <nav>
     <ul>
       <li class="active"><a href="#home">Home</a></li>
       <li><a href="#section-1">Section 1</a></li>
       <li><a href="#section-2">Section 2</a></li>
     </ul>
     <div class="lavalamp"></div>
   </nav>
</header>

<!--コンテンツ部分-->
<main>
  
    <!--セクションエリア部分-->
    <section id="home">
      <div class="inner">
        <h1>セクションに対応したナビゲーション</h1>
		<img src="sample01.jpg" alt=""/>
      </div>
    </section>

    <section id="section-1">
      <div class="inner">
        <h2>Section 1</h2>
	  	<img src="sample02.jpg" alt=""/>
		</div>
    </section>

    <section id="section-2">
      <div class="inner">
        <h2>Section 2</h2>
	  	<img src="sample03.jpg" alt=""/>
      </div>
    </section>
</main>

/*--CSS基本は変更 可 下記はデフォルトになります。--*/

/*--ヘッダー部分--*/
.lavalamp-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: #FFF;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.lavalamp-menu nav,
.lavalamp-menu li {
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
}

.lavalamp-menu li {
	margin: 0 15px;
}

.lavalamp-menu nav {
	position: relative;
}

.lavalamp-menu .lavalamp {
	position: absolute;
	bottom: 0;
	height: 5px;
	background: #222;
	-webkit-transition: 1s;
			transition: 1s;
}

.lavalamp-menu a {
	display: block;
	line-height: 60px;
	color: #444;
	text-decoration: none;
	padding: 0;
	-webkit-transition: 0.2s;
			transition: 0.2s;
}

.lavalamp-menu a:hover {
	opacity: 0.6;
}

/*--コンテンツ部分--*/
section {
	height: 800px;
	color: #FFF;
	text-align: center;
}

section:after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	*display: inline;
	width: 0;
	height: 100%;
}

section .inner {
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	*display: inline;
	max-width: 800px;
	margin: auto;
}

h1, h2 {
	margin: 0;
	font-weight: bold;
	font-size: 3rem;
}

#home {
	background: #C2185B;
}

#section-1 {
	background: #2f51b5;
}

#section-2 {
	background: #00695c;
}

#home img,
#section-1 img,
#section-2 img{
	padding: 3em;
	box-sizing: border-box;
	background: #ffffff;
}

   var lavalampElm = document.querySelector('.lavalamp');
   var positionLavalamp = function(activeElm) {
     lavalampElm.style.width = activeElm.elm.offsetWidth + 'px';
     lavalampElm.style.left = activeElm.elm.offsetLeft + 'px';
   };
   var elm = document.querySelector('#main-header');
   var ms = new MenuSpy(elm, {
     callback: positionLavalamp
   });
   positionLavalamp({ elm: elm.querySelector('li.active') });

今回は、ヘッダーをid="main-header"に指定しています。
コンテンツ全体をmainタグで囲み、各コンテンツ部分はsectionで囲んでいます。

また、各セクション毎と、ナビゲーションの"section-○"は合わせるようにしましょう。

注意ポイント！
今回のCSSは「menuspy-master」のファイルの中身の「assets/main.css」を変更して載せております。
コンテンツの背景色など変更する際には、「main.css」を一度確認し変更して下さい。