【jQuery】JavascriptとjQueryを使ったシンプルなサイドナビゲーションjquery-side-navi

jquery-side-naviはJavascriptとjQueryを使ったシンプルなサイドナビゲーション。デモには右側からのスライドと左側からのスライドの2つが準備されています。

rightを参照。

マークアップ

<div id="sideNavi">
<!-- sidenavi menu //-->
<div class="side-navi-item item1"><div>Item 1</div></div>
<div class="side-navi-item item2"><div>Item 2</div></div>
<!-- sidenavi data //-->
<div class="side-navi-data">
<div class="side-navi-tab">
<div>Data Item 1</div>
</div>
<div class="side-navi-tab">
<div>Data Item 2</div>
</div>
</div>
</div>

JS

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="SideNavi.js"></script>
<script type="text/javascript">
$(document).ready( function () {
/**
*  init sidenavi
*  first param String direction left or right
*  second param conf Object css data
**/
SideNavi.init('right', {
container : '#sideNavi',
item : '.side-navi-item',
data : '.side-navi-data',
tab : '.side-navi-tab',
active : '.active'
});
});
</script>
 
jquery-side-navi

【jQuery】JavascriptとjQueryを使ったシンプルなサイドナビゲーションjquery-side-navi

  • LATEST
  • RELATED
  • POPULAR