jQuery

【jQuery】シンプルなjQueryマルチレベルメニューバーMultilevel Menubar

October 23, 2016
multilevel menubar

Multilevel MenubarはHTML、CSS、jQueryを使って作成されたシンプルなjQueryのマルチレベルメニューバー。

HTML

<nav id="header">
            <span>Woltbit Demo</span>
            <span id="menubar" class="fright">Menu <i class="fa fa-align-justify"></i></span>
        </nav>
        <div id="page-wrapper">
            <ul id="menu_ul">
                <li>
                    <a href="#">Home</a>
                    <ul>
                        <li>
                            <a href="http://www.google.com" target="_blank">Home 1</a>
                        </li>
                        <li>Home 2
                            <ul>
                                <li>Inner Home2 1</li>
                                <li>Inner Home2 2</li>
                                <li>Inner Home2 3</li>
                            </ul>
                        </li>
                        <li>Home 3
                            <ul>
                                <li>Inner Home3 1</li>
                                <li>Inner Home3 2</li>
                                <li>Inner Home3 3</li>
                            </ul>
                        </li>
                        <li>Home 4</li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                    <ul>
                        <li>About 1
                            <ul>
                                <li>Inner About 1</li>
                                <li>Inner About 2</li>
                                <li>Inner About 3</li>
                            </ul>
                        </li>
                        <li>About 2</li>
                    </ul>
                </li>
                <li>
                    <a href="#">Page</a>
                    <ul>
                        <li>Page 1</li>
                        <li>Page 2</li>
                        <li>Page 3</li>
                    </ul>
                </li>
                <li><a href="http://www.yahoo.com" target="_blank">Contact</a></li>
            </ul>
        </div>
        <div id="main-content">
            <p>Click The Menubar Icon</p>
        </div>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/index.js"></script>