[tag] 반투명한 메뉴 만들기 HTML_XML_CSS

<html>
<head>
<title>Menu</title>
<style type="text/css">
#demo {position:absolute; top:100; left:350;
width:200; height:100; border:solid 2 gray; background:black; overflow:hidden;
z-index:10; visibility:hidden; filter:alpha(opacity=60);}
#text {position:absolute; top:100; left:350; width:200; height:100;
border:solid 2 gray; color:beige; font-size:9pt; padding:5; overflow:hidden;
z-index:11; visibility:hidden;}
</style>
<script language=javascript>
function openmenu() {
demo.style.visibility="visible"; text.style.visibility="visible";
}
function closemenu() {
demo.style.visibility="hidden"; text.style.visibility="hidden";
}
</script>
</head>
<body>
<center>
<span id=demo></span>
<span id=text>
<p style="text-align:center">메뉴판</p>
<a href="경로1">경로1</a><br>
<a href="경로2">경로2</a><br>
<a href="경로3">경로3</a><br>
<a href="javascript:closemenu();" style="color:beige;">닫기</a></p></span>
<input type="button" value="반투명 메뉴판" omclick="openmenu();">
</body>
</html>
필터(filter) 속성에서 알파(alpha) 의 어퍼시티(opacity) 속성을 주어서 반투명하게 보이는 효과를줌.

덧글

댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


통계 위젯 (화이트)

1911297
8119
10255336

google_myblogSearch_side

▷검색어

Flag Counter style2