CSS와 리스트를 이용한 롤오버 메뉴

적용 및 테스트 IE & FireFox2 드림위버와 같은 웹에디터 프로그램을 이용하면, 손쉽게 롤오버 메뉴를 만들 수 있습니다.그러나, 자바스크립트 코드가 추가되는 등 본문의 코드가 매우 복잡해 지는게 일반적입니다. 아래는, 리스트(목록)태그를 이용하여 목록을 작성하고, 롤오버 동작 및 이미지 삽입등을 CSS로 작성한 메뉴입니다. 실제로 메뉴에 사용된 HTML 태그는, 다음과 같이 매우 간결합니다.[ 메뉴에 사용된 HTML 태그 ]<ul id="mainMenu">
<li><a href="/products/">Products</a></li>
<li><a href="/downloads/">Downloads</a></li>
<li><a href="/purchase/">Purchase</a></li>
<li><a href="/support/">Support</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/contact/">Contact</a></li>
</ul> 먼저 간단히, 메뉴 디자인의 설계를 살펴 보겠습니다.
롤 오버 이미지의 가로 사이즈는 77px인데, 실제 하나의 메뉴가 차지하는 가로 사이즈는 79px로 디자인되었습니다. 롤 오버 이미지를 양쪽 여백 1px포함하여 79px로 자르면 좀 더 간단하겠습니다만, CSS를 사용하여 레이아웃 설정하는 법을 살펴본다는 취지로 이대로 사용하겠습니다. [ 사용한 스타일 시트 ] <style type="text/css">
#mainMenu{
float: left;
width: 474px;
margin: 0; padding: 0 13px 0 13px;
list-style: none;
background: url(images/menu_bg.gif) no-repeat 0 0;
}ul태그에 배경이미지로 바 이미지(menu_bg.gif)를 깔아 놓습니다. flot: left를 사용하여, ul태그 자체의 내용영역에 대한 배치 설정을 해놓았습니다. (삭제 불가)ul박스가 웹페이지에서 표현되는 실제 사이즈는 500px(474px+13px+13px)입니다. 설계된 사이즈(500px)에서, 좌우 패딩값을 제외한 값을 width로 설정하면 됩니다.
#mainMenu li{
float: left;
height: 35px; width: 79px;
marign: 0; padding: 0;
text-align: center;
}가로로 나열된 메뉴이기 때문에, float: left를 사용하여, 리스트 항목들을 좌에서 우로 배치하도록 합니다.설계된 내용에 따라, 가로/세로값을 설정해주고, 여백과 패딩영역 및 메뉴 텍스트의 정렬 옵션을 설정합니다.
#mainMenu li:hover{ background:url(images/menu_rollover.gif) no-repeat 1px 50%;}
리스트 항목의 영역내에 마우스에 대한 반응을 설정하는 부분입니다.마우스 오버되는 경우, li태그의 배경 이미지로, 롤 오버 이미지를 보여주게 됩니다.주의할 점은 background-position 항목 1px 50%입니다. 설계 내용에 따라, 롤 오버 이미지의 크기는 77*35px입니다. 그러나 li박스의 크기는 79*35px로 설정해 주었고 1px만큼 좌측에서 띄어 주었습니다. #mainMenu a{
display: block;
padding: 10px 0 0 0; font-family: verdana; font-size: 9px; color: #666666;
text-decoration:none;
}li태그의 배치 속성이 float: left인 관계로, 안쪽에 위치하는 a태그를 블록레벨로 설정하여, 정확한 레이아웃을 만들 수 있도록 합니다. 또한, a:hover에 대한 반응을, 실제 텍스트가 차지하는 영역이 아닌, a태그 박스 전체로 확장할 수 있습니다.마치, 이미지에 텍스트를 그려넣은 것과 비슷한 효과를 가집니다. 적절한 패딩값을 주어, 텍스트를 정렬합니다.
#mainMenu a:link{ color: #666666; }
#mainMenu a:visited{ color: #666666; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }</style> 이렇게 작성된 코드는, 유지/관리가 매우 쉽고 또한, 이식 작업도 매우 유용하게 합니다.