今日の人気記事

まだデータがありません。

セクション間をスクロール遷移させるサイドメニュー「Section Menu」

当ページのリンクには広告が含まれています。

スポンサーリンク

セクション間をスクロール遷移させるサイドメニューを実装するプラグイン「Section Menu」を紹介します。

jQueryプラグイン「Section Menu」

このプラグインを使えば、シンプルな「黒丸」だけのサイドメニューを実装することができます。この「黒丸」をクリックすると、セクション間をアニメ効果付きでスクロール遷移します。

「黒丸」にマウスオーバーすると、どこにジャンプするかのタイトルを表示させることもできます。

スポンサーリンク

デモページの右サイドに設定した「黒丸」をぽちぽちしてみてください。

「Section Menu」のデモ

ソース( HTML + jQuery )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Section Menuのデモでーす。">
<title>Section Menu - jQuery Plugin Demo</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/jquery.sectionmenu.css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fragmentscroll.min.js"></script>
<script src="js/jquery.sectionmenu.min.js"></script>
<script>
$(window).load(function() {
  $('body').sectionMenu().fragmentScroll();
});
</script>
</head>
<body>
<div id="page">
  <section id="section3" class="container" data-section-menu="たいとる">
    <h1>Section Menu のデモでーす。</h1>
    <p>右サイドにある「めにゅー」をぽちぽちしてみてください。</p>
  </section>
  <section id="home" class="container" data-section-menu="めにゅー壱">
    <h1>めにゅー壱</h1>
    <p>こんてんつ</p>
  </section>
  <section id="section1" class="container" data-section-menu="めにゅー弐">
    <h1>めにゅー弐</h1>
    <p>こんてんつ</p>
  </section>
  <section id="section2" class="container" data-section-menu="めにゅー参">
    <h1>めにゅー参</h1>
    <p>こんてんつ</p>
  </section>
</div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)