네이버블로그는 이런 기능이 안되지만 티스토리(태터툴스,텍스트큐브)나 익스프레스엔진(Xe)같은 php기반의 CMS(Content Management System)를 사용하면 메뉴가 추가되면서 배경이미지가 자동으로 추가되고 글자의 많고 적음에 따라 배경이미지도 변하도록 하는 기법이 슬라이딩 테크닉(Sliding Door Technic)입니다. 메뉴버튼의 link상태와 hover상태에 따라 변하게도 할 수 있습니다. 하나의 이미지 안에 4개의 이미지가 들어있고 배경이미지 포지션(Background Image Position)을 조정하여 각각의 상태에 따라 해당 이미지가 나오도록하는 기법입니다.
첨부파일을 열어보면 좌측 사진과 같은 이미지와 psd파일이 있으므로 만드든데 참고가 됩니다. 평상시(link)는 1번과 3번의 이미지 조합으로 배경을 구성하고 마우스 오버(hover)상태에는 2번과 4번의 이미지 조합으로 배경을 구성합니다.
이미지가 4개 이므로 배경이미지도 들어갈 태그도 4개가 필요하다. 메뉴글자를 감싸고 있는 a 태그 안에..
<li><ahref="home.htm"><span>Home</span></a></li>
와 같이 span태그를 넣어서 해도 되지만 a 태그를 감싸고 있는 li 태그가 있으므로 이곳에 배경을 넣어도 됩니다. 다만 하나의 CSS속성을 추가해야합니다. 특히 CMS를 사용하는 경우 메뉴가 자동으로 만들어지기때문에 html코드상에는 div태그만 있고 그 안의 내용인 ul, li, a 태그는 프로그램에 의해 만들어지므로 span태그를 끼워넣을 수가 없으므로 기존의 태그를 이용하는 수밖에 없습니다. 이해하는데 도움이될 그림을 만들어보면 다음과 같습니다.
1 번 이미지는 2번의 a태그의 배경으로 들어가며 3 번 이미지는 4번 li 태그의 배경으로 들어가서 쌍을 이루고 link상태에서의 좌우측 이미지를 구성합니다. 반면에 hover 상태의 이미지인 5번은 a:hover 속성인 6번의 배경이미지가 되고 이와 쌍을 이루는 7번이미지는 li:hover 속성인 8번의 배경이미지가 돼서 마우스 오버시 두개의 이미지가 나타나게 됩니다. 이제 코딩을 시작합니다. 이전의 코드를 그대로 이용합니다.
<body>
<div
id="nav">
<ul>
<li><a href="home.htm">Home</a></li>
<li><a
href="products.htm">Products</a></li>
<li><a
href="services.htm">Services</a></li>
<li><a href="about.htm">About
Us</a></li>
</ul>
</div>
</body>
스타일시트를 시작합니다.
<style
type="text/css">
#nav ul
{
list-style:
none;
}
li 태그에 목록의
표시로 기본으로 주어지는 disc 불릿을 없앱니다.
#nav ul li
{
text-align:
center;
float:
left;
padding: 0
15px 0 0px;
line-height:
30px;
background:
url(images/menu-button.png) no-repeat right -70px;
}
li 태그 안의 글자를 중앙정렬하고 li 태그 각각을 좌측정렬하여 세로로 되어있는 목록을 가로로 놓이게 합니다. 우측패딩을 15픽셀 줘서 좌측이미지를 침범하지 못하게 합니다. line-height는 메뉴의 높이를 지정하고 상자 중앙정렬합니다. 배경이미지를 넣고 position 좌표는 우측 끝, 위에서 70픽셀 아래를 적용한다. 3번이미지의 위치입니다.
#nav ul li a
{
display:
block;
padding: 0
15px 0 30px;
margin-right:5px;
font-size:1.5em;
text-align:
center;
background:
url(images/menu-button.png) no-repeat left top;
}
display: block 을 해줘야 영역범위가 클릭이나 hover할 수 있는 범위가 됩니다. 패딩을 우측 15, 좌측 30픽셀을 줘서 글자가 좌우 중앙정렬이 됩니다. 값이 15픽셀 차이가 나는 것은 이미 li태그에서 15픽셀을 사용했기 때문입니다. 마진을 5픽셀 주면 메뉴밖의 간격을 5픽셀 떨어지게 합니다. 폰트사이즈를 1.5em 줘서 보통의 크기보다 1.5배 커집니다. em을 사용하는 이유는 글자가 커짐에 따라 이미지도 커지게 하기 위해서입니다. 비율적으로 변동하게 할 수 있습니다. 글자 중앙정렬입니다. 배경이미지 xy좌표는 좌측 끝, 상단으로 1번이미지의 위치입니다.
#nav ul
li:hover {
color:
#F0F;
text-decoration:
none;
background:
url(images/menu-button.png) no-repeat right -105px;
}
li 태그에 hover시 글자색상을 부여하고 밑줄을 없앴다. 배경이미지는 4번이미지의 좌표인 우측끝 위에서 아래로 105픽셀입니다.
#nav ul li
a:link, #nav ul li a:visited {
color:
#000;
text-decoration: none;
}
평상시의 link 상태와 visited 상태의 글자 색상과 밑줄없음입니다.
#nav ul li
a:hover {
color:
#F0F;
text-decoration: none;
background:
url(images/menu-button.png) no-repeat left -35px;
}
마우스 오버시 a태그의 글자색상과 밑줄없음이고, 배경이미지는 2번이미지이며 좌표는 좌측끝 위에서 아래로 35픽셀입니다.
여기까지하면 완료이다. CSS만으로 4개로 이루어진 하나의 이미지를 이용하여 다이내믹 메뉴버튼을 만들었습니다.
추가로 각 부라우저마다 특성이 있어서 별도의 조정이 필요합니다.
#nav ul li a
{
overflow:
visible;
}
IE에서 여분의 사이드패딩이 발생하는 것을 방지합니다.
a::-moz-focus-inner
{
border:
none;
}
파이어폭스에서 패딩 발생을 방지합니다.
button.psd
