セクション間をスクロール遷移させるサイドメニュー「Section Menu」
当ページのリンクには広告が含まれています。
スポンサーリンク
セクション間をスクロール遷移させるサイドメニューを実装するプラグイン「Section Menu」を紹介します。
jQueryプラグイン「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>
スポンサーリンク