css로 만든 메뉴

인터넷관련 2008. 2. 19. 15:18

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>
   

'인터넷관련' 카테고리의 다른 글

[LINKVIEW] 링크된 사이트를 미리 볼수 있게끔 해줍니다.  (0) 2008.02.19
!백묵 수진체 - 손글씨 폰트  (0) 2008.02.19
홈페이지 레이아웃 - 씨리우스  (0) 2008.02.19
AJAX URL  (0) 2008.02.19
Tiranti Solid LET체  (0) 2008.02.19
Cold Night for Alligators  (0) 2008.02.19
달력, calendar  (0) 2008.02.19
pcount, 카운터, counter  (0) 2008.02.19
Posted by 알 수 없는 사용자
,

티스토리툴바