css로 만든 메뉴
http://oxtag.com/html/ex/cssMenu.html
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> css로 만든 메뉴 </title>
<style type="text/css">
/* ------- MENU1 ------- */
#css_menu1{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}
#css_menu1 li{
display: inline;
}
#css_menu1 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:whitesmoke;
border-top: 4px solid gray;
border-bottom: 1px solid silver;
}
#css_menu1 li a:hover{
border-top: 4px solid deeppink;
color: red;
background-color:#ffeef7;
padding: 10px;
}
/* ------- MENU2 ------- */
#css_menu2{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}
#css_menu2 li{
display: inline;
}
#css_menu2 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:#f5f5f5;
border-top: 5px solid silver;
border-bottom: 5px solid silver;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu2 li a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
#css_menu2 li a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
/* ------- MENU3 ------- */
#css_menu3{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
}
#css_menu3 li{
display: inline;
}
#css_menu3 li a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:whitesmoke;
border-top: 5px solid silver;
border-bottom: 1px solid silver;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu3 li a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
}
#css_menu3 li a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
}
#css_menu3 li a:hover.green{
border-top: 5px solid green;
}
#css_menu3 li a:active.green{
border-top: 5px solid green;
}
#css_menu3 li a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu3 li a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu3 li a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu3 li a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu3 li a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu3 li a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu3 li a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu3 li a:active.navy{
border-top: 5px solid #004080;
}
/* ------- MENU4 ------- */
#css_menu4{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
border-bottom: 1px solid silver;
}
#css_menu4 div{
float: left;
}
#css_menu4 div a{
border-top: 5px solid silver;
float: left;
color: black;
padding: 10px;
text-decoration: none;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu4 div a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}
#css_menu4 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
}
#css_menu4 div a:hover.green{
border-top: 5px solid green;
}
#css_menu4 div a:active.green{
border-top: 5px solid green;
}
#css_menu4 div a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu4 div a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu4 div a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu4 div a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu4 div a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu4 div a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu4 div a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu4 div a:active.navy{
border-top: 5px solid #004080;
}
/* ------- MENU5 ------- */
#css_menu5{
margin: 0;
padding: 0;
float: left;
font: 12px 돋움;
letter-spacing:-1px;
width:100%;
background-color:whitesmoke;
}
#css_menu5 div{
float: left;
}
#css_menu5 div a{
float: left;
color: black;
padding: 10px;
text-decoration: none;
background-color:#f5f5f5;
border-top: 5px solid silver;
border-bottom: 5px solid silver;
selector-dummy : expression(this.hideFocus=true);
}
#css_menu5 div a:hover{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
#css_menu5 div a:active{
border-top: 5px solid deeppink;
color: black;
background-color:white;
padding: 10px;
margin:2 0 2 0;
border-bottom: 3px solid silver;
}
#css_menu5 div a:hover.green{
border-top: 5px solid green;
}
#css_menu5 div a:active.green{
border-top: 5px solid green;
}
#css_menu5 div a:hover.blue{
border-top: 5px solid #0080c0;
}
#css_menu5 div a:active.blue{
border-top: 5px solid #0080c0;
}
#css_menu5 div a:hover.brown{
border-top: 5px solid #ff8000;
}
#css_menu5 div a:active.brown{
border-top: 5px solid #ff8000;
}
#css_menu5 div a:hover.purple{
border-top: 5px solid #7257B1;
}
#css_menu5 div a:active.purple{
border-top: 5px solid #7257B1;
}
#css_menu5 div a:hover.navy{
border-top: 5px solid #004080;
}
#css_menu5 div a:active.navy{
border-top: 5px solid #004080;
}
</style>
</head>
<body>
<ul id="css_menu1">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문&답변</a></li>
<li><a href="#">알짜게시판</a></li>
<li><a href="#">메시지박스</a></li>
<li><a href="#">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>
<ul id="css_menu2">
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문&답변</a></li>
<li><a href="#">알짜게시판</a></li>
<li><a href="#">메시지박스</a></li>
<li><a href="#">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>
<ul id="css_menu3">
<li><a href="#" class="blue">자유게시판</a></li>
<li><a href="#" class="brown">질문&답변</a></li>
<li><a href="#" class="purple">알짜게시판</a></li>
<li><a href="#" class="navy">메시지박스</a></li>
<li><a href="#" class="green">환경설정</a></li>
<li><a href="#">로그아웃</a></li>
</ul>
<br style="clear: left;" />
<br>
<div id="css_menu4">
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
<br><br>
<div id="css_menu5">
<div><a></a></div>
<div><a href="#" class="blue">자유게시판</a></div>
<div><a href="#" class="brown">질문&답변</a></div>
<div><a href="#" class="purple">알짜게시판</a></div>
<div><a href="#" class="navy">메시지박스</a></div>
<div><a href="#" class="green">환경설정</a></div>
<div><a href="#">로그아웃</a></div>
<div><a style="width:100%"></a></div>
</div>
</body>
</HTML>
'인터넷정보' 카테고리의 다른 글
| 한칸띄기 태그 (0) | 2007.10.13 |
|---|---|
| Cold Night for Alligators (0) | 2007.10.13 |
| Tiranti Solid LET체 (0) | 2007.10.13 |
| !백묵 수진체 - 손글씨 폰트 (0) | 2007.10.13 |
| 홈페이지 레이아웃 - 씨리우스 (0) | 2007.10.13 |
| AJAX URL (0) | 2007.10.13 |
| [LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다. (0) | 2007.10.13 |
| 달력, calendar (0) | 2007.10.13 |
| pcount, 카운터, counter (0) | 2007.10.13 |
| 웹용 라디오 플래이어 가로버전 입니다.(프레임용) (0) | 2007.10.13 |
