위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스

웹팁

글 등록하기 | 내글 관리하기 | 연재글 | 보관함

2009.01.20 00:35 조회 수

4801

이온디

첨부파일 https://imweb.eond.com/coding/163963

<html>

<STYLE type=text/css>#menu {
BACKGROUND:#ffffff; COLOR: black; CURSOR: default; FONT-FAMILY: verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold
}
#menu .popup {
BACKGROUND:#f8efef; BORDER-BOTTOM:#ffffff 12px solid; BORDER-LEFT: #ffffff 12px solid; BORDER-RIGHT: #ffffff 12px solid; BORDER-TOP: #ffffff 12px solid; DISPLAY: none; FONT-FAMILY: verdana; FONT-SIZE: 8px; POSITION: absolute; WIDTH: 160pt
}
#menu P {
MARGIN-BOTTOM: 0pt; MARGIN-TOP: 0pt
}
A:hover {
COLOR: #708090; TEXT-DECORATION: none
}
A {
COLOR: black; FONT-SIZE:8pt; MARGIN: 5px; TEXT-DECORATION: none
}
UL {
COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
LI {
COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
P {
COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
.over {
COLOR: #708090
}
P {
TEXT-ALIGN: justify; TEXT-INDENT: 0.1in
}
</STYLE>

<SCRIPT language=JavaScript>
var curPop = null;
function clearCurrent() {
// Hide the pop-up menu that is currently displayed.
if (null != curPop)
curPop.style.display = "";
curPop = null;
}

function popup() {
clearCurrent();
var el = event.srcElement;
// Display a new menu option.
if (("P" == el.tagName) &&
("menu" == el.parentElement.parentElement.parentElement.parentElement.id)) {
// Position and display the pop-up menu.
var elpop = document.all[el.sourceIndex + 1];
elpop.style.pixelLeft = el.parentElement.offsetLeft+7;
elpop.style.pixelTop = el.offsetTop +
document.all.menu.offsetTop+22;
elpop.style.display = "block";
curPop = elpop;
}
event.cancelBubble = true;
}

function highlight() {

// Highlight and popup the menu options.
if (null != event.fromElement)
if ((event.fromElement.tagName == "P") &&
(event.fromElement.parentElement.parentElement.parentElement.parentElement.id == "menu"))
{
event.fromElement.className = "";
}

if (null != event.toElement)
if ((event.toElement.tagName == "P") && (event.toElement.parentElement.parentElement.parentElement.parentElement.id == "menu"))
{
popup();
event.toElement.className = "over";
}
}

</SCRIPT>

</HEAD>
<BODY onclick=clearCurrent()>
<DIV style="BACKGROUND: #ffffff; WIDHT: 100%">
<TABLE border=0 id=menu onclick=popup() onmouseout=highlight();
onmouseover=highlight();>
<TBODY>
<TR>
<TD>
<P>누구누구 Home</P>
<DIV class=popup>
<P><A href="#" onClick="/*window.open*/('http:/...','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=100,top=40')" onfocus="this.blur()">Main</A>
                </div>

<TD bgColor=#ffffff></TD>
<TD>
<P>Profile</P>
<DIV class=popup>
<P><A href="#" onClick="/*window.open*/('http://...','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=no,width=900,height=600,left=70,top=40')" onfocus="this.blur()">me?</A>

</P></DIV></TD>
<TD bgColor=#ffffff></TD>
<TD>
<P>Gallery</P>
<DIV class=popup>
<P><A href="#" onClick="/*window.open*/('http://...','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=850,height=600,left=100,top=40')" onfocus="this.blur()">My Gal</A>
<P><A href="#" onClick="/*window.open*/('http://...','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=100,top=40')" onfocus="this.blur()">적당한 메뉴를 넣으셈.^^</A>
</P></DIV></TD>
<TD bgColor=#ffffff></TD>
<TD>
<P>Download</p>
<DIV class=popup>
<P><A href="#" onClick="/*window.open*/('http://..','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=100,top=100')" onfocus="this.blur()">이곳에 메뉴를..</A>
</P></DIV></TD>
<TD bgColor=#ffffff></TD>
<TD>
<P>Music (download)</P>
<DIV class=popup>
<P><A href="#" onClick="/*window.open*/('http://...','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=100,top=40')" onfocus="this.blur()">Pops.</A>
<P><A href="#" onClick="/*window.open*/('http://...','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=100,top=40')" onfocus="this.blur()">gayo</A>
<P><A href="#" onClick="/*window.open*/('http://..','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=100,top=40')" onfocus="this.blur()">Movie Theme.</A>
                </div>

<TD bgColor=#ffffff></TD>
<TD>
<P>Site</p>
<DIV class=popup>
<P><A href="#" onClick="/*window.open*/('http://...','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=100,top=40')" onfocus="this.blur()">Cool Site</A>
</P></DIV></TD>
<TD bgColor=#ffffff></TD>
<TD>
<P>Free Board</p>
<DIV class=popup>
<P><A href="#" onClick="/*window.open*/('http://board1.hanmir.com/blue/Board.cgi?path=db249&db=1004patti&act=reflash','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=100,top=100')" onfocus="this.blur()">Free Board (old)</A>
<P><A href="#" onClick="/*window.open*/('http://www.ifuni.com/board/funiboard.php?db=patti','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=480,left=100,top=100')" onfocus="this.blur()">Free Board (new)</A>
<P><A href="#" onClick="/*window.open*/('http://board2.hanmir.com/blue/Board.cgi?path=db4&db=rubyjh','_blank','toolbar=no,directories=no,resizable=yes,scrollbars=yes,width=800,height=600,left=150,top=40')" onfocus="this.blur()">Guest Book</A>
</P></DIV></TD>
<TD bgColor=#ffffff></TD>
<TD>
<P>E-Mail</p>
<DIV class=popup>
<script>
function Fmail(pPage,Opt) { popUpWin = /*window.open*/(pPage,'',Opt); }
</script>
<P><a href="javascript:Fmail('http://blueboard.co.kr/mail/mail.cgi?cmd=input&skin=child
&to_name=수신자이름&to_mail=수신자메일주소&subject=안녕하세요^^*', 'top=200,left=330,width=250,height=378')" onfocus="this.blur()">Mail</A>
</P></DIV></TD></TR></TBODY></HTML>
    </table>

Total 235 articles in 10 / 12 pages

	제목	날짜
	코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP)	2018/01/03
	jQuery를 배울수 있는 동네들입니다.	2013/08/09
	관련 링크 [1]	2010/05/23
55	[크로스브라우징] Azure Remote App	2015/08/31
54	[크로스브라우징] browserstack	2015/08/31
53	[크로스브라우징] 웹개발자를 위한 크로스브라우징 테스트 사이트, browsershots.org [1]	2015/08/31
52	[Form] form 태그의 기본적인 사용방법	2015/08/31
51	[웹폰트] 모빌리어스 웹폰트 사용하기	2015/11/19
50	[svg] SVG 표현하는 5가지 방법	2015/11/26
49	[svg] SVG 소개	2015/11/26
48	[svg] 점점점 more 아이콘 svg 파일	2015/11/26
47	[svg] svg 제공 사이트, thenounproject.com	2015/11/26
46	[svg] 간단한 예제, 네모난 박스 svg	2015/11/26
45	[svg] jenkov svg tutorial	2015/11/27
44	[svg] svg 색깔 칠하기	2015/11/27
43	[부트스트랩] [부트스트랩UI] http://lambdathemes.in/	2015/12/18
42	[부트스트랩] metronic_v4.5.2 UI bootstrap	2015/12/18
41	[프레임워크] igniteui	2015/12/24
40	[프레임워크] SK플래닛 부트스트랩 기반 UI프레임워크, 코너스톤 [1]	2015/12/26
39	[부트스트랩] 부트스트랩에서 margin-top 은 어떻게 표현할까?	2016/06/05
38	[부트스트랩] 부트스트랩 커스텀 padding, margin	2016/06/05
37	[부트스트랩] 부트스트랩 COLLAPSE 아코디언 효과	2016/06/15
36	[부트스트랩] Admin & Dashboard	2016/06/22