jQuery

【jQuery】jQueryベースのレスポンシブメニューResponsive Menu

March 22, 2017
Responsive Menu

Responsive MenuはjQueryベースのレスポンシブメニュー。

HTML

<div class="container fluid">
    <div class="col-sm-12">
        <br />
        <h1>Responsive Menu</h1>
		<nav id="nav">
			<ul>
				<li><a href="menu.html">Home</a></li>
				<li><span class="submenu">Dropdown</span>
					<ul class="submenu">
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item That is a Bit Too Long</a></li>
						<li><a href="#">Dropdown Item</a></li>
					</ul>
				</li>
				<li><span class="submenu">Dropdown</span>
					<ul class="submenu">
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
						<li><a href="#">Dropdown Item</a></li>
					</ul>
				</li>
				<li><a href="#">About Us</a></li>
				<li class="last"><a href="#">Contact Us</a></li>
				<li class="right"><a href="#">Register Now</a></li>
				<li class="onmobile"><a href="https://home.uceusa.com/StudentLogin.aspx?host=americansafetycouncil.com">Login</a></li>
			</ul>
		</nav><!-- end of #nav -->
    </div>
</div>

MIT