demun(대문블로그) :: 이미지없는 움직이는 네비게이션메뉴

이미지없는 움직이는 네비게이션메뉴 - CSS3 animated dropdown

demun
퍼블리셔/css
2011. 11. 20. 11:11

이미지없이 에니메니트되는 네비게이션 메뉴가 있어 소개합니다.
원문보기 => http://www.red-team-design.com/css3-animated-dropdown-menu

제가 종종 방문하는 사이트 인데요. css3 로 움직이는 네비게이션 메뉴를 만드는 방법입니다.
원문에 코드가 나와 있기는 합니다만 제가 테스트로 몇가지 수정해보고 다른 브라우져에서는 어떻게 보이는지도 한번 테스트해보았습니다.

일단 html 코드는 아래와 같습니다.

<ul id="menu">
	<li><a href="/">홈</a></li>
	<li>
		<a href="">첫번째</a>
		<ul>
			<li>
				<a href="">folder1</a>
				<ul>
					<li><a href="">Item 11</a></li>
					<li><a href="">Item 12</a></li>
					<li><a href="">Item 13</a></li>
					<li><a href="">Item 14</a></li>
				</ul>				
			</li>
			<li>
				<a href="">folder2</a>
				<ul>
					<li><a href="">Item 21</a></li>
					<li><a href="">Item 22</a></li>
					<li><a href="">Item 23</a></li>
					<li><a href="">Item 24</a></li>
				</ul>				
			</li>
			<li>
				<a href="">folder3</a>
				<ul>
					<li><a href="">Item 31</a></li>
					<li><a href="">Item 32</a></li>
					<li><a href="">Item 33</a></li>
					<li><a href="">Item 34</a></li>
				</ul>				
			</li>
			<li>
				<a href="">folder4</a>	
				<ul>
					<li><a href="">Item 41</a></li>
					<li><a href="">Item 42</a></li>
					<li><a href="">Item 43</a></li>
					<li><a href="">Item 44</a></li>
				</ul>	
			</li>
		</ul>
	</li>
	<li>
		<a href="">두번째</a>
		<ul>
			<li>
				<a href="">Work 1</a>
				<ul>
					<li>
						<a href="">Work 11</a>	
						<ul>
							<li><a href="">Work 111</a></li>
							<li><a href="">Work 112</a></li>
							<li><a href="">Work 113</a></li>
						</ul>							
					</li>
					<li>
						<a href="">Work 12</a>
						<ul>
							<li><a href="">Work 121</a></li>
							<li><a href="">Work 122</a></li>
							<li><a href="">Work 123</a></li>
						</ul>							
					</li>
					<li>
						<a href="">Work 13</a>
						<ul>
							<li><a href="">Work 131</a></li>
							<li><a href="">Work 132</a></li>
							<li><a href="">Work 133</a></li>
						</ul>							
					</li>
				</ul>					
			</li>
			<li>
				<a href="">Work 2</a>
				<ul>
					<li>
						<a href="">Work 21</a>
						<ul>
							<li><a href="">Work 211</a></li>
							<li><a href="">Work 212</a></li>
							<li><a href="">Work 213</a></li>
						</ul>							
					</li>
					<li>
						<a href="">Work 22</a>
						<ul>
							<li><a href="">Work 221</a></li>
							<li><a href="">Work 222</a></li>
							<li><a href="">Work 223</a></li>
						</ul>							
					</li>
					<li>
						<a href="">Work 23</a>
						<ul>
							<li><a href="">Work 231</a></li>
							<li><a href="">Work 232</a></li>
							<li><a href="">Work 233</a></li>
						</ul>							
					</li>
				</ul>		
			</li>
			<li>
				<a href="">Work 3</a>
				<ul>
					<li>
						<a href="">Work 31</a>
						<ul>
							<li><a href="">Work 311</a></li>
							<li><a href="">Work 312</a></li>
							<li><a href="">Work 313</a></li>
						</ul>
					</li>
					<li>
						<a href="">Work 32</a>
						<ul>
							<li><a href="">Work 321</a></li>
							<li><a href="">Work 322</a></li>
							<li><a href="">Work 323</a></li>
						</ul>							
					</li>
					<li>
						<a href="">Work 33</a>
						<ul>
							<li><a href="">Work 331</a></li>
							<li><a href="">Work 332</a></li>
							<li><a href="">Work 333</a></li>
						</ul>							
					</li>
				</ul>					
			</li>
		</ul>		
	</li>
	<li><a href="">세번째</a></li>
	<li><a href="">네번째</a></li>
</ul>

그리고 스타일 코드 css 는 다음과 같습니다.
코드가 길어 더보기를 사용합니다.

#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu {
	width: 600px;
	margin: 60px auto;
	border: 1px solid #222;
	background-color: #111;
	background-image: -moz-linear-gradient(#444, #111); 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));	
	background-image: -webkit-linear-gradient(#444, #111);	
	background-image: -o-linear-gradient(#444, #111);
	background-image: -ms-linear-gradient(#444, #111);
	background-image: linear-gradient(#444, #111);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,
#menu:after {
	content: "";
	display: table;
}
#menu:after {
	clear: both;
}
#menu {
	zoom:1;
}
#menu li {
	float: left;
	border-right: 1px solid #222;
	-moz-box-shadow: 1px 0 0 #444;
	-webkit-box-shadow: 1px 0 0 #444;
	box-shadow: 1px 0 0 #444;
	position: relative;
}
#menu a {
	float: left;
	padding: 12px 30px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
	color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
	color: #fafafa;
}
#menu ul {
	margin: 20px 0 0 0;
	_margin: 0; /*IE6 only*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 38px;
	left: 0;
	z-index: 9999;
	background: #444;
	background: -moz-linear-gradient(#444, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
	background: -webkit-linear-gradient(#444, #111);
	background: -o-linear-gradient(#444, #111);	
	background: -ms-linear-gradient(#444, #111);	
	background: linear-gradient(#444, #111);
	-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
	-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;  
}
#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}
#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*IE6 only*/
	-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	box-shadow: -1px 0 0 rgba(255,255,255,.3);		
}
#menu ul li {
	float: none;
	display: block;
	border: 0;
	_line-height: 0; /*IE6 only*/
	-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {   
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;    
}
#menu ul a {    
	padding: 10px;
	width: 130px;
	_height: 10px; /*IE6 only*/
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
}
#menu ul a:hover {
	background-color: #0186ba;
	background-image: -moz-linear-gradient(#04acec,  #0186ba);	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background-image: -webkit-linear-gradient(#04acec, #0186ba);
	background-image: -o-linear-gradient(#04acec, #0186ba);
	background-image: -ms-linear-gradient(#04acec, #0186ba);
	background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;	
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
	border-bottom-color: #04acec; 
}
#menu ul ul li:first-child a:hover:after {
	border-right-color: #0299d3; 
	border-bottom-color: transparent; 	
}
#menu ul li:last-child > a {
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}

전문을 포함한 html 파일을 첨부합니다.

index.html

역시 웹표준을 준수하는 크롬이나 파이어폭스에서는 에니메이트 되면서 정상적으로 잘 보여줍니다.

크롬 브라우져

파이어폭스

허나 역시 익스플로러는 버젼별로 약간씩 달랐습니다.

IE 6

IE 7

IE 8

역시나 IE 6 은 아예 하위메뉴가 나오질 않았습니다.
자식선택자를 지원하지 않는 IE 7 은 하위메뉴는 나오되 삼각형 모양은 나오질 않았습니다.
그래도 IE 8 은 거의 정상적으로 보여졌습니다. 다만 에니메이트 되는 기능은 지원하지 않기때문에 보여지고 숨기고의 기능만으로 보여질뿐 움직이는 듯한 기능은 보여주질 못했습니다.

여하튼 멋진 코드 입니다.
혹시 브라우져가 하위 브라우져인분들을 위해 제가 캡쳐를 했습니다. 어떻게 네비게이션이 움직이는지 참고하세요.

CSS3 animated dropdown from demun on Vimeo.

개 개

이미지없는 움직이는 네비게이션메뉴 - CSS3 animated dropdown

티스토리툴바