묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
마이크로소프트의 홈페이지 메뉴.. 소스좀 분석해주세요
2002.10.10 05:20
마이크로 소프트홈페이지에 쓰는 소스가 먼지 좀 알려주세요<HTML>
<HEAD>
<TITLE>가자 자바스크립트 세상으로/마소 메뉴</TITLE>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>
<STYLE type=text/css>#menu {
BACKGROUND: lightblue; COLOR: black; CURSOR: default; FONT-FAMILY: verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold
}
#menu .popup {
BACKGROUND: lightblue; BORDER-BOTTOM: lightblue 12px solid; BORDER-LEFT: lightblue 12px solid; BORDER-RIGHT: lightblue 12px solid; BORDER-TOP: lightblue 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: red; 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: red
}
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() bgcolor="#000080">
<DIV style="BACKGROUND: lightblue; WIDHT: 100%">
<TABLE border=0 id=menu onclick=popup() onmouseout=highlight();
onmouseover=highlight();>
<TBODY>
<TR>
<TD>
<a href="http://java.up2.co.kr">Home</a></TD>
<TD bgColor=black></TD>
<TD>
<P>Some Folder </P>
<DIV class=popup>
<P><a class="anchor" href="http://java.up2.co.kr">자바스크립트세상으로</a>
<P> <P><a href="http://yahoo.co.kr">yahoo</a>
</P></DIV></TD>
<TD bgColor=black></TD>
<TD>
<P>What I Can</P>
<DIV class=popup>
<P><A href="http://www.javascripts.">JScript & HTML for IE</A>
<P><A href="http://www.learnasp.com">ASP programming</A>
<P><A href="http://www.javasoft.com">Java applets</A>
<P><A href="http://www.inprise.com">Delphi programming</A>
</P></DIV></TD>
<TD bgColor=black></TD>
<TD>
<P>Contact with me</p>
<DIV class=popup>
<P><A href="mailto:aaa@aaa.com">just mail me</A>
</p></div>
</TD></TR></TBODY></TABLE></DIV>
<P></P>
<HEAD>
<TITLE>가자 자바스크립트 세상으로/마소 메뉴</TITLE>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>
<STYLE type=text/css>#menu {
BACKGROUND: lightblue; COLOR: black; CURSOR: default; FONT-FAMILY: verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold
}
#menu .popup {
BACKGROUND: lightblue; BORDER-BOTTOM: lightblue 12px solid; BORDER-LEFT: lightblue 12px solid; BORDER-RIGHT: lightblue 12px solid; BORDER-TOP: lightblue 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: red; 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: red
}
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() bgcolor="#000080">
<DIV style="BACKGROUND: lightblue; WIDHT: 100%">
<TABLE border=0 id=menu onclick=popup() onmouseout=highlight();
onmouseover=highlight();>
<TBODY>
<TR>
<TD>
<a href="http://java.up2.co.kr">Home</a></TD>
<TD bgColor=black></TD>
<TD>
<P>Some Folder </P>
<DIV class=popup>
<P><a class="anchor" href="http://java.up2.co.kr">자바스크립트세상으로</a>
<P> <P><a href="http://yahoo.co.kr">yahoo</a>
</P></DIV></TD>
<TD bgColor=black></TD>
<TD>
<P>What I Can</P>
<DIV class=popup>
<P><A href="http://www.javascripts.">JScript & HTML for IE</A>
<P><A href="http://www.learnasp.com">ASP programming</A>
<P><A href="http://www.javasoft.com">Java applets</A>
<P><A href="http://www.inprise.com">Delphi programming</A>
</P></DIV></TD>
<TD bgColor=black></TD>
<TD>
<P>Contact with me</p>
<DIV class=popup>
<P><A href="mailto:aaa@aaa.com">just mail me</A>
</p></div>
</TD></TR></TBODY></TABLE></DIV>
<P></P>
댓글 6
-
┏ⓩZion┛
2002.10.10 08:14
-
김현기
2002.10.10 10:51
저도 예전게 그거 구현 할라 했는데 그때 당시엔 뭐가 먼지 몰랐죠^^: 지금은 그냥 나모에서 레이어 액션을 가지고 구현 하는걸로 압니다. -
세벌사랑
2002.10.10 11:29
나모로 하면 소스가 지저분해지는 경향이.
야후 같은데서 검색어 자바스크립트 넣고 찾아 보세요.
각자 취향에 맞는 사이트 보시고 참조하세요.
참고로 저는
http://user.chollian.net/~spacekan/
이곳이 맘에 들더군요 -
clo
2002.10.10 14:46
mx 버전에만 나오는 군요.. 사용법 대충 봤는데..
처음엔 position을 선택해 어떤식으로 하위메뉴가 보여질 것인지 선택합니다.
그리고 hide... 에 체크를 합니다(나중에 비헤비어 창에서 마우스 이벤트 조정 가능)
advenced 탭은 서브메뉴의 테이블을 지정해주는 옵션이고,
appearance는 서브메뉴가 가로로 나오는 것인지 세로로 나오는 것인지 등을
설정해주는 것이고, 마지막으로 contents는 각 서브메뉴의 텍스트와 링크, 타겟등을 설정해
주는 것입니다. 또 + 버튼을 눌러 서브메뉴를 추가해 줍니다.
에고.. 영어 메뉴얼 읽느라 머리털 다빠질뻔 했당 ㅡㅡㅋ -
clo
2002.10.10 13:58
이 기능은 드림위버 비헤비어의 hide popup menu 기능입니다.
익스텐션이 아니라 기본으로 제공하고 있기 때문에 드림위버만 있으면 사용 가능 합니다.
사용법이 좀 복잡 하지만 기본적으로 비헤비어 사용법과 비슷하기 때문에
연구해보시면 가능 합니다. ㅡㅡㅋ
저도 많이 않써봐서 사용법은 자세히 모르겠군요.
암튼.. 링크 지정한 다음에 먼저 show pop up menu 누르면 옵션이 생깁니다.
또 자동으로 hide popupmenu 가 생기더군요...
연구 잘해보시길... ^^ -
clo
2002.10.10 15:50
M$ 에서 쓰인 소스는 정확히 모르겠지만, 레이어를 이용해서 만들수 있습니다.
그냥 무식(?) 하게 소스를 다 집어 넣는수도 있겠지만, 개인적으로 나모 웹 에디터에서 레이어 액션을 이용한 구현을 추천합니다.