Xcode Programing & iOS !!

음....색상은...개인 취향에 맞게 .... 전회색이 좋아요...

이 거역시 크롬, IE10에서만 확인을 했어요.

그때그때 생각나서 만든거라 미흡한것도 많을수 있어요 참고 해주세요

1. 제작 과정

2. 결과물

3. 소스부분

  3-1. CSS 부분

 
 
<style>
	.menuBody_hsy {
		width: 250px;
		height: 300px;
		border: 1px double black;
		padding-left: 40px;
		padding-top: 40px;
	}

	.mainMenu {
		width: 200px;
		height: 50px;
		margin-bottom:5px;
		line-height: 50px;
		vertical-align: middle;
		text-align: center;
		background-color: #E0E0E0;
		box-shadow: 2px 0px 2px #868686;
		cursor: pointer;
		transition: transform 600ms;
		
		-ms-transition: -ms-transform 600ms;
		-webkit-transition: -webkit-transform 600ms;
		-moz-transition: -moz-transform 600ms;
		-o-transition: -o-transform 600ms;
	}

	#mainMenu_2 {
		transform: translateY(-100px);
		
		-ms-transform: translateY(-100px);
		-webkit-transform: translateY(-100px);
		-moz-transform: translateY(-100px);
		-o-transform: translateY(-100px);
	}

	#mainMenu_3 {
		transform: translateY(-200px);

		-ms-transform: translateY(-200px);
		-webkit-transform: translateY(-200px);
		-moz-transform: translateY(-200px);
		-o-transform: translateY(-200px);
	}

	.subMenu_body {
		width: 190px;
		height: 100px;
		border: 1px double #E0E0E0;
		margin-top: -5px;
		margin-bottom: 5px;
		margin-left: 5px;
	    box-shadow: 1px 1px 1px #868686;

		transition: transform 600ms;
		transform: scaleY(0.0);
		transform-origin: 0px 0px;

		-ms-transition: -ms-transform 600ms;
		-webkit-transition: -webkit-transform 600ms;
		-moz-transition: -moz-transform 600ms;
		-o-transition: -o-transform 600ms;

		-ms-transform: scaleY(0.0);
		-webkit-transform: scaleY(0.0);
		-moz-transform: scaleY(0.0);
		-o-transform: scaleY(0.0);

		-ms-transform-origin: 0px 0px;
		-webkit-transform-origin: 0px 0px;
		-moz-transform-origin: 0px 0px;
		-o-transform-origin: 0px 0px;

		opacity: 0.0;
	}

	.subMenu_body > div {
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		text-align: center;
	}

	#subMenu_body_2 {
		margin-top: -105px;
		margin-bottom: 105px;
	}

	#subMenu_body_3 {
		margin-top: -205px;
	}

	#mainMenu_1:hover ~ #subMenu_body_1, #subMenu_body_1:hover{
		opacity: 1;
		transform: scaleY(1.0);

		-ms-transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
		-moz-transform: scaleY(1.0);
		-o-transform: scaleY(1.0);
	}

	#mainMenu_1:hover ~ #mainMenu_2, #subMenu_body_1:hover ~ #mainMenu_2 {
		transform: translateY(0px);

		-ms-transform: translateY(0px);
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-o-transform: translateY(0px);
	}

	#mainMenu_1:hover ~ #mainMenu_3, #subMenu_body_1:hover ~ #mainMenu_3 {
		transform: translateY(-100px);

		-ms-transform: translateY(-100px);
		-webkit-transform: translateY(-100px);
		-moz-transform: translateY(-100px);
		-o-transform: translateY(-100px);
	}

	#mainMenu_2:hover ~ #subMenu_body_2, #subMenu_body_2:hover{
		opacity: 1;
		transform: scaleY(1);

		-ms-transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
		-moz-transform: scaleY(1.0);
		-o-transform: scaleY(1.0);
	}

	#mainMenu_2:hover ~ #mainMenu_3, #subMenu_body_2:hover ~ #mainMenu_3 {
		transform: translateY(-100px);

		-ms-transform: translateY(-100px);
		-webkit-transform: translateY(-100px);
		-moz-transform: translateY(-100px);
		-o-transform: translateY(-100px);
	}

	#mainMenu_3:hover ~ #subMenu_body_3, #subMenu_body_3:hover{
		opacity: 1;
		transform: scaleY(1);

		-ms-transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
		-moz-transform: scaleY(1.0);
		-o-transform: scaleY(1.0);
	}
</style>

  3-2. JS 는 사용안했어요

  3-3. HTML 부분

 
<div class="menuBody_hsy">
	<div class="mainMenu" id="mainMenu_1"><b>Menu 1</b></div>
	<div class="subMenu_body" id="subMenu_body_1">
		<div>Sub Menu 1-1</div>
		<div>Sub Menu 1-2</div>
		<div>Sub Menu 1-3</div>
	</div>
	<div class="mainMenu" id="mainMenu_2"><b>Menu 2</b></div>
	<div class="subMenu_body" id="subMenu_body_2">
		<div>Sub Menu 2-1</div>
		<div>Sub Menu 2-2</div>
		<div>Sub Menu 2-3</div>
	</div>
	<div class="mainMenu" id="mainMenu_3"><b>Menu 3</b></div>
	<div class="subMenu_body" id="subMenu_body_3">
		<div>Sub Menu 3-1</div>
		<div>Sub Menu 3-2</div>
		<div>Sub Menu 3-3</div>
	</div>
</div>