HTML

メニューのトグルとなるボタンと、メニュー本体があります。
今回はメニューと円の部分は別々にアニメーションしたかったので、別の要素にしたほうが簡単です。

index.html

  1. <div id="nav-toggle">
  2. <div>
  3. 	<span></span>
  4. 	<span></span>
  5. 	<span></span>
  6. </div>
  7. </div>
  8.  
  9. <div id="nav-circle-bg"></div>
  10. <nav id="nav">
  11. <ul>
  12. 	<li><a href="#">HOME</a></li>
  13. 	<li><a href="#">ABOUT</a></li>
  14. 	<li><a href="#">WORKS</a></li>
  15. 	<li><a href="#">CONTACT</a></li>
  16. </ul>
  17. </nav>

JavaScript

JavaScriptはbodyにopenクラスを切り替えるだけです。

JavaScript

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. (function($) {
  4. 	$(function() {
  5. 		$('#nav-toggle').on('click', function() {
  6. 			$('body').toggleClass('open');
  7. 		});
  8. 	});
  9. })(jQuery);
  10. </script>

CSS

拡大するときはscaleだと荒くなってしまうので、matrixを使用するといい感じなようです。

CSS

  1. /* ========================
  2. * Navigation Circle BG
  3. * ======================== */
  4. #nav-circle-bg {
  5. 	position: fixed;
  6. 	background: #fff;
  7. 	width: 600px;
  8. 	height: 600px;
  9. 	top: 50%;
  10. 	right: -600px;
  11. 	margin-top: -300px;
  12. 	border-radius: 50%;
  13. 	transition: transform .5s ease;
  14. 	transition-delay: .6s;
  15. }
  16. .open #nav-circle-bg {
  17. 	transform: matrix(2.7, 0, 0, 2.7, 0, 0);
  18. 	transition-delay: 0s;
  19. }
  20.  
  21. /* ========================
  22. * Navigation
  23. * ======================== */
  24. #nav {
  25. 	position: fixed;
  26. 	font-size: 32px;
  27. 	height: 100%;
  28. 	width: 500px;
  29. 	right: -500px;
  30. 	display: flex;
  31. 	align-items: center; 
  32. }
  33.  
  34. #nav ul {
  35. 	width: 100%;
  36. 	list-style: none;
  37. }
  38.  
  39. /* ========================
  40. * Navigation Animation
  41. * ======================== */
  42. #nav li {
  43. 	transition: transform .5s ease;
  44. 	transition-delay: 0;
  45. }
  46. #nav li:nth-child(1) {
  47. 	transition-delay: 0;
  48. }
  49. #nav li:nth-child(2) {
  50. 	transition-delay: .1s;
  51. }
  52. #nav li:nth-child(3) {
  53. 	transition-delay: .2s;
  54. }
  55. #nav li:nth-child(4) {
  56. 	transition-delay: .3s;
  57. }
  58.  
  59. .open #nav li {
  60. 	transform: translateX(-400px);
  61. }
  62. .open #nav li:nth-child(1) {
  63. 	transition-delay: .3s;
  64. }
  65. .open #nav li:nth-child(2) {
  66. 	transition-delay: .4s;
  67. }
  68. .open #nav li:nth-child(3) {
  69. 	transition-delay: .5s;
  70. }
  71. .open #nav li:nth-child(4) {
  72. 	transition-delay: .6s;
  73. }
  74.  
  75. /* ========================
  76. * Navigation Button
  77. * ======================== */
  78. #nav a {
  79. 	width: 100%;
  80. 	display: block;
  81. 	color: #333;
  82. 	text-decoration: none;
  83. 	padding: 10px 0;
  84. }
  85. #nav a:after {
  86. 	content: "";
  87. 	display: block;
  88. 	background: #D32222;
  89. 	width: 0;
  90. 	height: 1px;
  91. 	transition: width 1s ease;
  92. }
  93. #nav a:hover {
  94. 	color: #D32222;
  95. }
  96. #nav a:hover:after {
  97. 	width: 100%;
  98. }
  99.  
  100. /* ========================
  101. * nav-toggle
  102. * ======================== */
  103. #nav-toggle {
  104. 	position: fixed;
  105. 	top: 15px;
  106. 	right: 15px;
  107. 	width: 56px;
  108. 	height: 56px;
  109. 	padding: 19px 17px 0;
  110. 	background: #000;
  111. 	border-radius: 50%;
  112. 	cursor: pointer;
  113. 	z-index: 100;
  114. }
  115. #nav-toggle > div {
  116. 	position: relative;
  117. }
  118. #nav-toggle span {
  119. 	width: 100%;
  120. 	height: 2px;
  121. 	left: 0;
  122. 	display: block;
  123. 	background: #fff;
  124. 	position: absolute;
  125. 	transition: .35s ease-in-out;
  126. }
  127.  
  128. #nav-toggle span:nth-child(1) {
  129. 	top: 0;
  130. }
  131. #nav-toggle span:nth-child(2) {
  132. 	top: 7px;
  133. }
  134. #nav-toggle span:nth-child(3) {
  135. 	top: 14px;
  136. }
  137.  
  138. .open #nav-toggle span:nth-child(1) {
  139. 	top: 7px;
  140. 	transform: rotate(45deg);
  141. }
  142. .open #nav-toggle span:nth-child(2) {
  143. 	width: 0;
  144. 	left: 50%;
  145. }
  146. .open #nav-toggle span:nth-child(3) {
  147. 	top: 7px;
  148. 	transform: rotate(-45deg);
  149. }