Posted: 2016.05.27 / Category: HTML&CSS / Tag: CSS3, jQuery

jQuery+CSS3で円が画面全体に広がって表示するようなスマホ用のメニューを作ってみました。

HTML

HTMLです。nav-bgが円の部分になります。

HTML

<header id="top-head">
	<div id="top-head-inner">
		<h1 id="head-logo">Mobile Circle Navigation</h1>
		<div id="nav-toggle">
			<div>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<nav id="global-nav">
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">PRODUCT</a></li>
				<li><a href="#">WORKS</a></li>
				<li><a href="#">COMPANY</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</nav>
		<div id="nav-bg"></div>
	</div>
</header>

JavaScript

jQueryはクラスの切り替えだけ使用します。

JavaScript

(function($) {
	$(function() {
		$('#nav-toggle').click(function(){
			$('body').toggleClass('open');
		});
	});
})(jQuery);

CSS

円の部分はscaleでアニメーションしています。
小さいのを大きくすると輪郭がボケるので、最初の状態は大きくしてscaleで小さくしています。
ナビゲーション部分はdelayで表示を若干遅らせてます。

CSS

#nav-bg {
	content: "";
	width: 2400px;
	height: 2400px;
	margin-right: -1200px;
	margin-top: -1200px;
	top: 40px;
	right: 40px;
	display: block;
	position: fixed;
	background: #17A669;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: scale(.02);
	transform: scale(.02);
}
.open #nav-bg {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .6s ease-out;
	transition: all .6s ease-out;
}

/* nav-list  */
#global-nav ul li {
	opacity: 0;
	-webkit-transform: scaleX(0) translateX(-260px);
	transform: scaleX(0) translateX(-260px);
	-webkit-transition: none;
	transition: none;
}
.open #global-nav ul li {
	opacity: 1;
	-webkit-transform: scaleX(1) translateX(0);
	transform: scaleX(1) translateX(0);
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-transition-delay: .1s;
	transition-delay: .1s;
}