메뉴 미리보기
깔끔한 세로형 CSS 메뉴입니다.
CSS 스크립트 메뉴가 설치하기 힘든 분들은 , CSS 테이블 메뉴로 깔끔하게 메뉴를 꾸며도 될것같아요^^
소스보기
<style type="text/css">
<!-- .menu36_1 { background-color:#003366; border-color:#003366; border-width:2px; border-style:none; }
.menu36 { line-height:30px; margin:1px; text-align:center; font-size:12px; width:100px; }
.menu36 a { width:100%; border:#003366 1px solid; text-decoration:none; color:#FFFFFF; display:block; width:100%; font-weight:bold; }
.menu36 a:hover { border:#FFFFFF 1px solid; text-decoration:none; color:#FFFFFF; width:100%; display:block; font-weight:bold; }
.menu36 a:visited { color:#FFFFFF; width:100%; display:block; } -->
</style>
<!-- .menu36_1 { background-color:#003366; border-color:#003366; border-width:2px; border-style:none; }
.menu36 { line-height:30px; margin:1px; text-align:center; font-size:12px; width:100px; }
.menu36 a { width:100%; border:#003366 1px solid; text-decoration:none; color:#FFFFFF; display:block; width:100%; font-weight:bold; }
.menu36 a:hover { border:#FFFFFF 1px solid; text-decoration:none; color:#FFFFFF; width:100%; display:block; font-weight:bold; }
.menu36 a:visited { color:#FFFFFF; width:100%; display:block; } -->
</style>
■ <body> ~ </body> 사이에 들어갈 소스
<table class="menu36_1">
<tr>
<td class="menu36"><a href="">희야의웹하우스</a></td>
<td class="menu36"><a href="">포토샵강좌</a></td>
<td class="menu36"><a href="">블로그꾸미기</a></td>
<td class="menu36"><a href="">질문게시판</a></td>
<td class="menu36"><a href="">흔적남기기</a></td>
</tr> </table>
<tr>
<td class="menu36"><a href="">희야의웹하우스</a></td>
<td class="menu36"><a href="">포토샵강좌</a></td>
<td class="menu36"><a href="">블로그꾸미기</a></td>
<td class="menu36"><a href="">질문게시판</a></td>
<td class="menu36"><a href="">흔적남기기</a></td>
</tr> </table>
위 소스를 보시고 정해진 위치에 제대로 넣어주시면 됩니다.
line-height:30px; 은 메뉴바의 높이를 나타냅니다. -- 직접 바꿔서 보시면 바로 알겁니다 ^^;
font-size:12px , color:#FFFFFF; 은 글자 사이즈, 그리고 글자 색을 나타납니다.
menu36 a:hover 이부분이 마우스를 링크에 가따대었을때 하얀색으로 테두리가 생기지요 ?
그 효과를 설정하는 곳입니다.
본인의 사이트나 블로그에 맞게끔 수정해서 사용하시면 되겠습니다. ^^
이미지가 아니라서 메뉴의 추가 , 삭제를 자유롭게 할 수 있습니다.
'■ 블로그꾸미기 > 테이블만들기' 카테고리의 다른 글
| 깔끔한 css 테이블 메뉴 - 4 (0) | 2010.09.30 |
|---|---|
| 깔끔한 테이블 메뉴 - 3 (0) | 2010.09.27 |
| 깔끔한 테이블 메뉴 - 2 (0) | 2010.09.27 |
| 깔끔한 테이블 메뉴 - 1 (0) | 2010.09.26 |
