간단히 css만으로 마우스가 올라갈때마다 바뀌는 롤오버 효과를 만들 수 있다.
마크업이 간결하며, 스크린리더기로 텍스트를 읽을 수 있고, 자바스크립트가 필요하지 않으며 디자인을 할 수있다.
4개의 메뉴를 이미지로 만들려면 4개의 이미지가 필요하다.
아래와 같이 보통때의 이미지(녹색),마우스가 올라갔을때 이미지, 선택되어있는 탭의 이미지 3개를
한개의 이미지에 넣어서 만들어 주면된다.
그리고 이 이미지를 배경으로 깔아놓고 마우스가 올라갔을때엔 배경이미지의 위리를 움직여 다르게 보이게 하는것
텍스트로된 메뉴는 overflow: hidden; 으로 화면상엔 보이지 않게 한다.
- 준비할 이미지
m01.gif/ m02.gif/m03.gif/m04.gif
아래와 같이 메뉴부분을 <li>로 마크업하고 각 li마다 id를 준다.
<ul id="nav">
<li id="menu01"><a href="/" class="selected">HOME</a></li>
<li id="menu02"><a href="/" >사이트소개</a></li>
<li id="menu03"><a href="/" >매거진</a></li>
<li id="menu04"><a href="/" >이용안내</a></li>
</ul>
- css설정 부분 -
/* 마진등을 초기화 하고 높이를 20px로 설정해 준다. */
#nav { display: inline; margin: 0px; padding: 0px; height: 20px; list-style-type: none; overflow: hidden; }
/* li 속성을 초기화*/
#nav li { display: inline; margin: 0px; padding: 0px; list-style-type: none; float: left;}
/* 높이만큼 패딩값을 주어 텍스트를 영역밖으로 안보이게 설정한다 */
#nav a{ float: left; overflow: hidden; padding: 20px 0 0 0; height: 0px !important; height: /**/:20px; /* 윈도우용 IE5를 위해 */ }
/* 배경이미지의 위치를 -20px로 설정하여 위에서 설정한 패딩값만큼 위로 올려 경국 배경이미지가 0의 위치게 오게 한다*/
#nav a:hover { background-position: 0 -20px; }
/* 마우스오버되었을때 배경이미지의 위치를 -40px 위로 위치시킨다. */
#nav a:active, #nav a.selected { background-position: 0 -40px; }
/* 메뉴들마다 이미지를 넣어주고 넓이를 지정해준다*/
#menu01 a { width: 40px; background:url(m01.gif) top no-repeat; }
#menu02 a { width: 40px; background:url(m02.gif) top no-repeat; }
#menu03 a { width: 40px; background:url(m03.gif) top no-repeat; }
#menu04 a { width: 40px; background:url(m04.gif) top no-repeat; }
'실용예제로 배우는 웹표준' 이라는 책에 더 자세한 설명이 나와있음
[출처] 접근성이 뛰어난 이미지 탭 롤오버 메뉴 만들기|작성자 배드걸
