jQuery

【jQuery】サイドメニューを作成し、ページ上の異なるセクションにスクロールするjQuery Section Menu

November 5, 2017
jQuery.sectionMenu

jQuery Section Menuはサイドメニューを作成し、ページ上の異なるセクションにスクロールすることができます。

Example

HTML

<html>
	<body>
		<section id="home" data-section-menu="Home">
			<p>Home</p>
		</section>
		<section id="about" data-section-menu="About">
			<p>About</p>
		</section>
		<section id="contact" data-section-menu="Contact">
			<p>Contact</p>
		</section>
	</body>
</html>

CSS

<link rel="stylesheet" href="assets/css/jquery.sectionmenu.css" />

Javascript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.fragmentscroll.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.sectionmenu.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$('body').sectionMenu().fragmentScroll();
});
</script>

Options

$('body').sectionMenu({
	// Show title in the menu
	enableTitle: true,

	// Outer element
	element: 'nav',

	// Class and data- name
	class: 'section-menu',

	// Insert content before the menu
	insertBefore: '',

	// Insert content after the menu
	insertAfter: ''
});

MIT