CSS 퀵메뉴 만들기

퀵메뉴 만들기

 

 

margin 을 이용한 퀵메뉴 만들기

<nav>
	<ul id="quickmenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

#quickmenu{
	width: 100px;
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
	
#quickmenu a{
	width: 150%;
	height: 20px;
	line-height: 20px;
	margin-bottom: 5px;
	padding: 15px;
	transform: 1s;
	display: block;
	font-weight: bold;
}
		
#quickmenu li:hover{
	margin-left: -50%;
}

#quickmenu li:first-child{
	background-color: pink;
}
		
#quickmenu li:nth-child(2){
	background-color: skyblue;
}
		
#quickmenu li:nth-child(3){
	background-color: darkseagreen;
}

#quickmenu a{

display: block;

}

→ a 태그에 display: block; 해주는 이유는 a 태그는 inline 속성이라 본인의 크만큼밖에 자리를 차지하지 않는다. 그렇기 때문에 a태그 만큼만 링크가 걸리게 되고 a 바깥에 있는 박스(li) 부분에는 클릭해도 링크로 연결되지 않음. 이때 block 속성으로 바꿔주게 되면 a가 부모만큼 꽉차게 되어 a 바깥 부분의 박스 부분을 클릭해도 링크 연결되게 됨!

 

transition: __s ;

→ 애니메이션의 속도 조절하기. __ 초를 사용해서 애니메이션을 실행.