jQuery

【jQuery】マルチドロップダウンメニューを備えた、レスポンシブメガメニューjQuery Mega Menu

February 16, 2018
jQuery_mega_menu

jQuery Mega Menuはマルチドロップダウンメニューを備えた、レスポンシブメガメニュー。

	<div class="menu-container clearfix">
	<button class="nav_menu_toggler_icon"><span class="fa fa-bars"></span></button>
		<nav class="manu clearfix">
			<ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">School</a>
                            <ul>
                                <li><a href="#">Lidership</a></li>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Locations</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Research</a>
                            <ul>
                                <li><a href="#">Undergraduate research</a></li>
                                <li><a href="#">Masters research</a></li>
                                <li><a href="#">Funding</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Something</a>
                            <ul>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">News</a>
                    <ul>
                        <li><a href="#">Today</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Sport</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a>
                    <ul>
                        <li><a href="#">School</a>
                            <ul>
                                <li><a href="#">Lidership</a></li>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Locations</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Empty sub</a></li>
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
            </ul>
		</nav>
	</div>
	<div>
		<div class="container_help">
			<h2>include navScript.js and jQuery</h2>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/navScript.js"></script>