모질라에서 동작되는 동적메뉴 자바스크립트 아시는분?

zelon의 이미지

홈페이지를 만들고 있습니다.

메뉴 위에 마우스를 올리면 그에 맞는 하위 메뉴가 아랫줄에 표시될려고 하는데 IE 웹을 왠만큼 뒤져봤는데 모질라 1.5에서 돌아가는 메뉴를 찾을 수 없더군요.

그나마 찾은 곳이 foundstone.com 인데. 소스가 너무 복잡합니다. ㅠ.ㅜ

혹시 자바스크립트를 모질라에서 잘 보이게 하는 정보 없나요? 일단 당장 필요한 건 레이어를 동적으로 만드는 건데 힘드네요. :shock:

choissi의 이미지

http://webreference.com/dhtml/
여기 가시면 원하는 바를 얻을 껍니다.

울랄라~ 호기심 천국~!!
http://www.ezdoum.com

nohmad의 이미지

http://www.mojavelinux.com/cooker/demos/domMenu/

PS1. 어지간한 메뉴 스크립트는 모질라에서도 별 문제 없습니다.
특히 외국 소스인 경우 대부분 모질라에서도 아무 문제 없습니다.

zelon의 이미지

nohmad wrote:
http://www.mojavelinux.com/cooker/demos/domMenu/

PS1. 어지간한 메뉴 스크립트는 모질라에서도 별 문제 없습니다.
특히 외국 소스인 경우 대부분 모질라에서도 아무 문제 없습니다.

죄송하지만, 제 모질라 1.5가 이상한건지 다운받아서 해보는데, 메뉴가 제대로 안 뜨는 군요 ^^;;

-----------------------------------------------------------------------
GPL 오픈소스 윈도우용 이미지 뷰어 ZViewer - http://zviewer.wimy.com
블로그 : http://blog.wimy.com

Risty의 이미지

여기도 괜찮은 정보가 있는 것 같네요.

http://devedge.netscape.com/

세벌의 이미지

http//jsguide.net
여기도 한 번 보세요.

feanor의 이미지

만약 그것이 "자바스크립트"라면 모질라에서 제대로 동작할 확률이 매우 높습니다. "잘 보이게" 고칠 필요는 없을 겁니다.

아무 자바스크립트 메뉴나 가져다 쓰세요. MSDOM과 JScript 메뉴 말구요.

-- feanor

zelon의 이미지

sebul wrote:
http://jsguide.net
여기도 한 번 보세요.

IE 에서만 된데요 ㅠ.ㅜ

-----------------------------------------------------------------------
GPL 오픈소스 윈도우용 이미지 뷰어 ZViewer - http://zviewer.wimy.com
블로그 : http://blog.wimy.com

zelon의 이미지

feanor wrote:
만약 그것이 "자바스크립트"라면 모질라에서 제대로 동작할 확률이 매우 높습니다. "잘 보이게" 고칠 필요는 없을 겁니다.

아무 자바스크립트 메뉴나 가져다 쓰세요. MSDOM과 JScript 메뉴 말구요.

-- feanor

앞에도 적혀있지만 "자바" 스크립트인데도 안되는거 많습니다. ㅡ.ㅡ 그것 때문에 자료 찾기가 조금 힘들군요. 아시다시피 국내의 대부분이 IE 만 가지고 테스트해서...

-----------------------------------------------------------------------
GPL 오픈소스 윈도우용 이미지 뷰어 ZViewer - http://zviewer.wimy.com
블로그 : http://blog.wimy.com

zelon의 이미지

제가 대충 찾아서 만들어 본 코드입니다.

<html>
<body>
<script language="JavaScript">
		function ZHideLayer(obj)
		{
			var aLayer;
			aLayer = document.getElementById(obj);
			aLayer.style.visibility = "hidden";
		}

		function ZHideAllLayer()
		{
			ZHideLayer("SubMenuIntro");
			ZHideLayer("SubMenuRule");
			ZHideLayer("SubMenuBoard");
			ZHideLayer("SubMenuRank");
		}

		function ZShowLayer(obj)
		{
			var aLayer;
			aLayer = document.getElementById(obj);
			aLayer.style.visibility = "visible";
		}
		
		function ZShowOnlyLayer(obj)
		{
			ZHideAllLayer();
			ZShowLayer(obj);
		}
</script>
<a href="#" onmouseOver="ZShowOnlyLayer('SubMenuIntro')">Intro</a>
<br>
<a href="#" onmouseOver="ZShowOnlyLayer('SubMenuRule')">Rlue</a>
<br>
<a href="#" onmouseOver="ZShowOnlyLayer('SubMenuBoard')">Board</a>
<br>
<a href="#" onmouseOver="ZShowOnlyLayer('SubMenuRank')">Rank</a>
<br>

<div id="SubMenuIntro" style="position:absolute;left:230; top:237; z-index:1; width:500; visibility: visibility">게임소개&nbsp;&nbsp;&nbsp;프루티소개&nbsp;&nbsp;&nbsp;게임 아이템&nbsp;&nbsp;&nbsp;꾸미기 아이템&nbsp;&nbsp;&nbsp;레어 아이템</div>
<div id="SubMenuRule" style="position:absolute;left:270; top:237; z-index:1; width:500; visibility: hidden">게임배우기&nbsp;&nbsp;&nbsp;화면소개</a>&nbsp;&nbsp;&nbsp;게임방식/점수계산&nbsp;&nbsp;&nbsp;계급구성</div>
<div id="SubMenuBoard" style="position:absolute;left:470; top:240; z-index:1; width:500; visibility: hidden">자유게시판</a></div>
<div id="SubMenuRank" style="position:absolute;left:489; top:237; z-index:1; width:500; visibility: hidden">전체 순위</a>&nbsp;&nbsp;&nbsp;월별 순위&nbsp;&nbsp;&nbsp;주별 순위</div>

</body>
</html>

아마 지금은 노가다로 div id 값을 치는데 저걸 배열로 좀 더 쉽게 할 수 있을 거 같습니다. 위의 코드는 IE, 모질라 둘다 되구요. 핵심 코드는 document.getElementById() 함수군요. 근데 정작 제가 만들고 있는 사이트에 붙이면 이상한 에러가 나네요. 저 소스에는 문제가 없는데 ㅡ.ㅡ;

-----------------------------------------------------------------------
GPL 오픈소스 윈도우용 이미지 뷰어 ZViewer - http://zviewer.wimy.com
블로그 : http://blog.wimy.com

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.