스타일을 이용한 자바 메뉴구성 (하단에 페이드인 메뉴설명박스)

Menu,Navigation/메뉴 2008. 7. 23. 21:50

/* Tistory_336_ads01 */ /* Tistory_336_ads01 */

<HTML>
<HEAD>
    <TITLE>연변88닷컴</TITLE>
</HEAD>

<style type="text/css">
#coolmenu{
border: 1px solid black;
width: 170px;
background-color: #E6E6E6;
}

#coolmenu a{
font: bold 12px 돋움;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{
width: auto;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

#tabledescription{
width: 100%;
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
}
</style>

<script type="text/javascript">
var baseopacity=0

function showtext(thetext){
    if (!document.getElementById)
        return
        textcontainerobj=document.getElementById("tabledescription")
        browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
        instantset(baseopacity)
        document.getElementById("tabledescription").innerHTML=thetext
        highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
    cleartimer()
    instantset(baseopacity)
}

function instantset(degree){
    if (browserdetect=="mozilla")
        textcontainerobj.style.MozOpacity=degree/100
    else if (browserdetect=="ie")
        textcontainerobj.filters.alpha.opacity=degree
    else if (document.getElementById && baseopacity==0)
        document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
    if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
    if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
        cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
    else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
        cur2.filters.alpha.opacity+=20
    else if (window.highlighting)
    clearInterval(highlighting)
}
</script>
</HEAD>

<BODY>
<div id="coolmenu">
<a href="http://www.yb88.com" onMouseover="showtext('연변88닷컴을 소개합니다.')" onMouseout="hidetext()">회사소개</a>
<a href="http://www.yb88.com" onMouseover="showtext('상품소개 메뉴입니다.')" onMouseout="hidetext()">상품소개</a>
<a href="http://www.yb88.com" onMouseover="showtext('고객지원 메뉴입니다.')" onMouseout="hidetext()">고객지원</a>
<a href="http://www.yb88.com" onMouseover="showtext('커뮤니티 메뉴입니다.')" onMouseout="hidetext()">커뮤니티</a>
<a href="http://www.yb88.com" onMouseover="showtext('맨처음으로 이동합니다.')" onMouseout="hidetext()">홈</a>
<div id="tabledescription"></div>
</div>

</BODY>
</HTML>

'Menu,Navigation > 메뉴' 카테고리의 다른 글

java 드롭다운 메뉴를 선택하면 하단에 메뉴 설명이 나타납니다 (1)	2008.07.23
클릭하면 닫기 메뉴와 슬라이딩 체인지 되고 다시 클릭하면 나타나는 java메뉴 (0)	2008.07.23
메뉴 밑으로 바(BAR)가 플래쉬처럼 슬라이딩 되는 자바 (1)	2008.07.23
오른쪽 마우스 버튼을 클릭하면 나타나는 java메뉴 1 (1)	2008.07.23
플레쉬효과 같은 자바스크립 환상 메뉴구성 (2)	2008.07.23
셀렉트를 이용한 드롭다운 java메뉴 (선택시 바로 이동) (1)	2008.07.23
자바스크립을 이용한 드롭다운 메뉴 (1)	2008.07.23
레이어를 이용한 JavaScript 메뉴구성 (1)	2008.07.23
3D 회전 메뉴 자바스크립트 (1)	2008.07.23

Posted by 공든탑

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

연변88자바

스타일을 이용한 자바 메뉴구성 (하단에 페이드인 메뉴설명박스)

'Menu,Navigation > 메뉴' 카테고리의 다른 글

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역