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

jQuery

jquery-side-navi

July 6, 2016

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>

Latest Posts

Related Posts