인터넷정보

css로 만든 메뉴

알 수 없는 사용자 2007. 10. 17. 12:46



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>



<img src="/php/nalog/nalogd.php?counter=nlogcounter&url=<?=$HTTP_SERVER_VARS[HTTP_REFERER]?>" width=1 height=0>


</body>
</HTML>
   

반응형

'인터넷정보' 카테고리의 다른 글

이미지와 글씨 정렬  (0) 2007.10.17
이미지와 글씨 정렬  (0) 2007.10.17
한칸띄기 태그 - 사이띄기  (0) 2007.10.17
한칸띄기 태그 - 사이띄기  (0) 2007.10.17
css로 만든 메뉴  (0) 2007.10.17
HTML 4.01 엔티티(Entities)  (0) 2007.10.17
HTML 4.01 엔티티(Entities)  (0) 2007.10.17
한국 전통 표준색  (0) 2007.10.17
한국 전통 표준색  (0) 2007.10.17
웹사이트 특정 부분만 출력하기  (0) 2007.10.17

'인터넷정보'의 다른글

  • 현재글css로 만든 메뉴

관련글

댓글

티스토리툴바