Xcode Programing & iOS !!

일단 기본적으로 제가 디자인에 특출난 재능이 없기에...

색상이 불편하시더라도 따로 수정하셔서 쓰시면 될듯 합니다.

개발틱하게...!

아 이건 급하게 하느라 PC...것두 크롬에서만 확인해서 나머진...모르겠네요!!아핳!?

1. 만들어지는 과정

2. 만들어진 메뉴

3. 소스 부분

  1. CSS

 
	<style>
		html, body {
			margin: 10px 5px 5px 5px;
		}
		
		.menu_body {
			width: 100%;
			height: 60px;
			background-color: #CACACA;
			padding-top: 10px;
			border-radius: 10px;
		}

		.menu_bk {
			height: 50px;
			background-color: #A2A2A2;
			margin-left: 10px;
			margin-right: 10px;
			position: relative;
			color: #ffffff;
			font-size: 20px;
			border-radius: 6px;
		}

		.menu_bk > div:hover{
			color: yellow;
		}

		#divBt {
			width: 150px;
			height: 50px;
			float: left;
			text-align: center;
			vertical-align: middle;
			line-height: 50px;
			cursor: pointer;
		}

		.triangle_point {
			width: 0;
			height: 0;
			z-index: 999;
			position: absolute;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 8px solid #CACACA;
			bottom: 0px;
			transition: transform 800ms;
			transform: translate(71px, 0);
		}

		.divBt_1:hover ~ .triangle_point {
			transform: translate(71px, 0);
		}

		.divBt_2:hover ~ .triangle_point {
			transform: translate(221px, 0);
		}

		.divBt_3:hover ~ .triangle_point {
			transform: translate(371px, 0);
		}

		.divBt_3:active  ~ .triangle_point {
			transform: translate(371px, 0);
		}

		.divBt_4:hover ~ .triangle_point {
			transform: translate(521px, 0);
		}
	</style>

  2. javascript

	<script>
		window.onload = function(){
			var obj = document.getElementsByClassName("divBt_1");
			obj.divBt.style.color = "#000000";
		}
	</script>

  3. HTML

		<div class="menu_body">
			<div class="menu_bk">
				<div class="divBt_1" id="divBt" onclick="menu_click_event(this);">Menu 1</div>
				<div class="divBt_2" id="divBt" onclick="menu_click_event(this);">Menu 2</div>
				<div class="divBt_3" id="divBt" onclick="menu_click_event(this);">Menu 3</div>
				<div class="divBt_4" id="divBt" onclick="menu_click_event(this);">Menu 4</div>
				<div class="triangle_point"></div>
			</div>
		</div>

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