jQuery

【jQuery】HTML、CSS、JSを使ったフルスクリーンメニューFull Screen Menu

June 12, 2018

Full Screen MenuはHTML、CSS、JSを使ったフルスクリーンメニュー。

How to use

<div class="fullscreen-menu-container js-menu-container">

    		<a class="menu-button js-menu-close">
		<div class="menu-icon is-active">
			<span></span>
			<span></span>
			<span></span>
		</div>
		</a>

		<div class="fullscreen-menu">

		<div class="fullscreen-menu__image-container"></div>

		<h1 class="fullscreen-menu__title">Fullscreen Menu with jQuery and Flexbox.</h1>

		<nav class="fullscreen-menu__nav">
			<ul>

			<li>
			<a href="#">About</a>
			</li>

			<li>
			<a href="#">Portfolio</a>
			</li>

			<li>
			<a href="#">Résumé</a>
			</li>

			<li>
			<a href="#">Blog</a>
			</li>

			<li>
			<a href="#">Contact</a>
			</li>

			</ul>
			</nav>

	<a target="_blank" href="https://twitter.com/matchboxhero10" class="social-button--twitter">
	<i class="icon--twitter"></i>
	</a>

	<a target="_blank" href="#" class="social-button--facebook">
	<i class="icon--facebook"></i>
	</a>

        <a target="_blank" href="#" class="social-button--pintrest">
	<i class="icon--pintrest"></i>
        </a>

  </div>

</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script  src="js/index.js"></script>