Javascript

【Javascript】軽量のレスポンシブなナビゲーションプラグインResponsive Nav

October 14, 2018
Responsive Nav

Responsive Navは、軽量のレスポンシブなナビゲーションJavaScriptプラグイン。CSS3のトランジションとタッチイベントを使用、外部ライブラリ不要

Usage instructions

リンクファイル

	<!-- Put these into the <head> -->
	<link rel="stylesheet" href="responsive-nav.css">
	<script src="responsive-nav.js"></script>

マークアップ

	<nav class="nav-collapse">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Projects</a></li>
			<li><a href="#">Contact</a></li>
	 	</ul>
	</nav>

プラグインを接続する

<!-- Put this right before the </body> closing tag -->
	<script>
		var nav = responsiveNav(".nav-collapse");
	</script>

カスタマイズ可能なオプション

	var nav = responsiveNav(".nav-collapse", { // Selector
		animate: true, // Boolean: Use CSS3 transitions, true or false
		transition: 284, // Integer: Speed of the transition, in milliseconds
		label: "Menu", // String: Label for the navigation toggle
		insert: "before", // String: Insert the toggle before or after the navigation
		customToggle: "", // Selector: Specify the ID of a custom toggle
		closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked
		openPos: "relative", // String: Position of the opened nav, relative or static
		navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
		navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active
		jsClass: "js", // String: 'JS enabled' class which is added to <html> element
		init: function(){}, // Function: Init callback
		open: function(){}, // Function: Open callback
		close: function(){} // Function: Close callback
	});

Public methods

  1. nav.toggle();
  2. nav.open();
  3. nav.close();
  4. nav.destroy();
  5. nav.resize();

Tested on the following platforms

  1. iOS 4.2.1+
  2. Android 1.6+
  3. Windows Phone 7.5+
  4. Blackberry 7.0+
  5. Blackberry Tablet 2.0+
  6. Jolla 1.0+
  7. Kindle 3.3+
  8. Maemo 5.0+
  9. Meego 1.2+
  10. Symbian 3
  11. Symbian Belle
  12. Symbian S40 Asha
  13. webOS 2.0+
  14. Windows XP+
  15. Mac OS X

MIT