Xcode Programing & iOS !!

최대한 CSS 로만 만들어 볼려구 했는데 click 후 처리 이벤트는 JS를 써버렸네요.

소스도 css, js, html 나눠서 적어놨어요.

다들 css, js 고수라 생각되니 설명은 생략해놧어요.

그래도 혹시 몰라 만들어지는 과정은 찍어는데... 데이터 주의입니다. gif가 용량이 ㅋ...

그리구 중간에 <div> 그릴때 각도잘못 계산했네요...;;;

1. 메뉴가 만들어지는 과정

2. 만들어진 메뉴

3 - 1. CSS 부분

 
<style>
	.circle_content {
		width: 100%;
		position: static;
	}

	.circle_content .Outcircle {
		width: 300px;
		height: 150px;
		margin: auto;
		background-color: #ffffff;
		position: relative;
		border-bottom-left-radius: 150px;
		border-bottom-right-radius: 150px;
		z-index: 0;
		overflow: hidden;
	}

	.circle_content .Incircle {
		width: 130px;
		height: 65px;
		background-color: #ffffff;
		position: absolute;
		left: 50%;
		margin-left: -65px;
		border-bottom-left-radius: 65px;
		border-bottom-right-radius: 65px;
		z-index: 1;
	}

	.circle_content .Outcircle .inMenu_1{
		width: 200px;
		height: 150px;
		background-color: #Af0fff;
		position: absolute;
		top: 0;
		left: -129px;
		-webkit-transform: skew(-45deg, 0deg);
		-moz-transform: skew(-45deg, 0deg);
		-o-transform: skew(-45deg, 0deg);
		-ms-transform: skew(-45deg, 0deg);
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

	.circle_content .Outcircle .inMenu_2{
		width: 150px;
		height: 200px;
		background-color: #CB63FF;
		position: absolute;
		top: 76px;
		left: -3px;
		-webkit-transform: skew(0deg, -45deg);
		-moz-transform: skew(0deg, -45deg);
		-o-transform: skew(0deg, -45deg);
		-ms-transform: skew(0deg, -45deg);
		opacity: 0;
		transition: opacity 0.4s ease;
		pointer-events: none;
	}

	.circle_content .Outcircle .inMenu_3{
		width: 150px;
		height: 200px;
		background-color: #D59EF1;
		position: absolute;
		top: 76px;
		left: 149px;
		-webkit-transform: skew(0deg, 45deg);
		-moz-transform: skew(0deg, 45deg);
		-o-transform: skew(0deg, 45deg);
		-ms-transform: skew(0deg, 45deg);
		opacity: 0;
		transition: opacity 0.6s ease;
		pointer-events: none;
	}

	.circle_content .Outcircle .inMenu_4{
		width: 200px;
		height: 150px;
		background-color: #5A94FF;
		position: absolute;
		top: 0px;
		left: 225px;
		-webkit-transform: skew(45deg, 0deg);
		-moz-transform: skew(45deg, 0deg);
		-o-transform: skew(45deg, 0deg);
		-ms-transform: skew(45deg, 0deg);
		opacity: 0;
		transition: opacity 0.8s ease;
		pointer-events: none;
	}

	.circle_content .InBtn {
		width: 100px;
		height: 50px;
		margin: auto;
		background-color: #CACACA;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -50px;
		z-index: 999;
	}

	.circle_content .InBtn:hover {
		background-color: #A2A2A2;
	}

	.circle_content .Outcircle > div.on {
		opacity: 1;
		pointer-events: auto;
	}
</style>

3 - 2. JS 부분

 
<script>
	var inMenu_flag = 0;
	window.onload = function() {
		var circle_bt = document.getElementById("InBtn");
		circle_bt.onclick = function () {
			for(var i=1; i<5; i++){
				if(document.getElementById("inMenu_"+i).className == "inMenu_"+i+" on"){
					document.getElementById("inMenu_"+i).className = "inMenu_"+i;
					inMenu_flag = 0;
				}else{
					document.getElementById("inMenu_"+i).className += " on";
					inMenu_flag = 1;
				}
			}
		};
	};
	function inMenuEvent(flag){
		if(inMenu_flag == 1){
			alert("click to "+ flag +".");
		}
	}
</script>

3 - 3. HTML 부분

 
	<div class="circle_content">
		<div class="InBtn" id="InBtn"></div>
		<div class="Outcircle">
			<div class="inMenu_1" id="inMenu_1" onclick="inMenuEvent(1); return false;"></div>
			<div class="inMenu_2" id="inMenu_2" onclick="inMenuEvent(2); return false;"></div>
			<div class="inMenu_3" id="inMenu_3" onclick="inMenuEvent(3); return false;"></div>
			<div class="inMenu_4" id="inMenu_4" onclick="inMenuEvent(4); return false;"></div>
			<div class="Incircle"></div>
		</div>
	</div>

그밖에 구경거리 -> http://xline.dothome.co.kr/