( CSS ) 아주심플하면서 이쁜 메뉴 만들기!

아...음.... 네!

심플한 메뉴에요!

아주 심플하게 그라데이션효과를 확장해서 좌우로 왔다갔다하면서 만든거에요.

box-shadow를 줘서 더 꾸밀까 했는데.. 이건 다들 개인취향에 맞게 하실꺼라 믿고

심플하게만 만들었어요.

아 참고로 IE10 이랑 chrome 에서만 확인했어요!

-webkit-, -moz-, -o-, -ms-  등등은... 빠져있어요 ^ ㅡ^*

1. 제작 과정

2. 완성본

메뉴 1

메뉴 2

메뉴 3

  tip ) 그라데이션을 이용한 버튼효과 원리

메뉴 1

메뉴 1

3. 소스 부분

  3-1. CSS 부분

 
<style>
	html, body {
		margin: 0;
	}

	.dropMenuBody {
		width: 500px;
		height: 70px;
		position: relative;
		border: 1px;
		border-style: dotted;
	}

	.mainMenu {
		width: 150px;
		height: 50px;
		line-height: 50px;
		vertical-align: middle;
		text-align: center;
		float: left;
		margin-left: 5px;
		cursor: pointer;

		background-image: linear-gradient(90deg, #98A57F 10%, #CCDDAA 40%);
		background-size: 300px auto;
		background-position: -150px 0;
		transition: background-position 0.5s;
	}

	.lineDiv {
		width: 5px;
		height: 50px;
		background-color: #98A57F;
		position: absolute;
	}

	#lineDiv_1 {
		left: 5px;
	}

	#lineDiv_2 {
		left: 160px;
	}

	#lineDiv_3 {
		left: 315px;
	}

	#mainMenu_1:hover {
		background-position: 5px 0;
	}

	#mainMenu_2:hover {
		background-position: 5px 0;
	}

	#mainMenu_3:hover {
		background-position: 5px 0;
	}
</style>

  3-2. JS부분은 없습니다.

  3-3. HTML 부분

<div class="dropMenuBody">
	<div class="lineDiv" id="lineDiv_1"></div>
	<div class="mainMenu" id="mainMenu_1"><b>메뉴 1</b></div>

	<div class="lineDiv" id="lineDiv_2"></div>
	<div class="mainMenu" id="mainMenu_2"><b>메뉴 2</b></div>
			
	<div class="lineDiv" id="lineDiv_3"></div>
	<div class="mainMenu" id="mainMenu_3"><b>메뉴 3</b></div>
</div>