깔끔한 테이블 메뉴 - 2

 메뉴 미리보기

깔끔한 세로 메뉴 테이블 입니다.

 소스 보기

<table cellspacing="0" cellpadding="5" width="160">
<tr><td bgcolor="salmon" width="20"></td><td align="center" bgcolor="peachpuff" onmouseover="this.style.backgroundColor='salmon'" onmouseout="this.style.backgroundColor='peachpuff'"><a href="#" onmouseover="menu5.innerText='설명'" onmouseout="menu5.innerText=''">희야의웹하우스</a></td></tr>
<tr><td bgcolor="salmon"></td><td align="center" bgcolor="peachpuff" onmouseover="this.style.backgroundColor='salmon'" onmouseout="this.style.backgroundColor='peachpuff'"><a href="#" onmouseover="menu5.innerText='설명'" onmouseout="menu5.innerText=''">A B O U T</a></td></tr>
<tr><td bgcolor="salmon"></td><td align="center" bgcolor="peachpuff" onmouseover="this.style.backgroundColor='salmon'" onmouseout="this.style.backgroundColor='peachpuff'"><a href="#" onmouseover="menu5.innerText='설명'" onmouseout="menu1.innerText=''">D I A R Y</a></td></tr>
<tr><td bgcolor="salmon"></td><td align="center" bgcolor="peachpuff" onmouseover="this.style.backgroundColor='salmon'" onmouseout="this.style.backgroundColor='peachpuff'"><a href="#" onmouseover="menu5.innerText='설명글'" onmouseout="menu5.innerText=''">B B S</a></td></tr>
<tr><td bgcolor="salmon"></td><td align="center" bgcolor="peachpuff" onmouseover="this.style.backgroundColor='salmon'" onmouseout="this.style.backgroundColor='peachpuff'"><a href="#" onmouseover="menu5.innerText='설명글'" onmouseout="menu1.innerText=''">L I N K</a></td></tr>
<tr><td bgcolor="salmon"></td><td align="center" bgcolor="peachpuff" onmouseover="this.style.backgroundColor='salmon'" onmouseout="this.style.backgroundColor='peachpuff'"><a href="#" onmouseover="menu5.innerText='설명글'" onmouseout="menu5.innerText=''">M A I L</a></td></tr>
</table>
<table height="30"><tr><td align="center" colspan="2"><font color="salmon" size="1">■ ■</font> <font color="black" size="1" id="menu5"></font> <font color="salmon" size="1">■ ■</font></td></tr>
</td></tr></table>

테이블과 CSS 로 구성된 깔끔한 테이블 이라서, 수정또한 쉽고 소스도 간결합니다.

기본적으로 테이블 색상과 메뉴이름, 링크 부분을 자신의 사이트에 맞게 수정하시면 됩니다.

빨간색으로 표시된 부분은 메뉴에 마우스를 가따대었을때 테이블 하단에 메뉴에 관한 설명을 적는 곳입니다.
설명하는건 필요없다고 한다면, 하단 빨간색으로 표시된 테이블 부분을 삭제하시면 됩니다.

보라색으로 표시된 부분이 테이블 색상입니다.
전체적인 색상, 마우스 오버시 나타나는 색상입니다.
알맞게 수정해서 사용하세요.