nicht angemeldet
Drop-Down Menu
Matthias ApselHallo allerseits,
ich habe im Internet ein Dropdownmenu gefunden welches genau so ist wie ich es haben will. Naja, bis auf eine kleine Sache. Wenn ich auf einen Menupunkt klicke bleibt das Dropdown menu weiterhin offen. Da ich die Links nicht zum Seitenwechsel einstelle und sich durch das anklicken der Menupunkte ein selbstgemachtes Fenster öffnet sieht es halt blöd aus wenn das Menu weiterhin ausgeklappt bleibt. Nun meine Frage, wie ändere ich das?
Hier der Code:
<script type="text/javascript">//<![CDATA[ function Browser() { var ua, s, i; this.isIE = false; // Internet Explorer this.isOP = false; // Opera this.isNS = false; // Netscape this.version = null; ua = navigator.userAgent; s = "Opera"; if ((i = ua.indexOf(s)) >= 0) { this.isOP = true; this.version = parseFloat(ua.substr(i + s.length)); return; } s = "Netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = parseFloat(ua.substr(i + s.length)); return; } s = "Gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = 6.1; return; } s = "MSIE"; if ((i = ua.indexOf(s))) { this.isIE = true; this.version = parseFloat(ua.substr(i + s.length)); return; } } var browser = new Browser(); var activeButton = null; if (browser.isIE) document.onmousedown = pageMousedown; else document.addEventListener("mousedown", pageMousedown, true); function pageMousedown(event) { var el; if (activeButton == null) return; if (browser.isIE) el = window.event.srcElement; else el = (event.target.tagName ? event.target : event.target.parentNode); if (el == activeButton) return; if (getContainerWith(el, "DIV", "menu") == null) { resetButton(activeButton); activeButton = null; } } function buttonClick(event, menuId) { var button; if (browser.isIE) button = window.event.srcElement; else button = event.currentTarget; button.blur(); if (button.menu == null) { button.menu = document.getElementById(menuId); if (button.menu.isInitialized == null) menuInit(button.menu); } if (activeButton != null) resetButton(activeButton); if (button != activeButton) { depressButton(button); activeButton = button; } else activeButton = null; return false; } function buttonMouseover(event, menuId) { var button; if (browser.isIE) button = window.event.srcElement; else button = event.currentTarget; if (activeButton != null && activeButton != button) buttonClick(event, menuId); } function depressButton(button) { var x, y; button.className += " menuButtonActive"; x = getPageOffsetLeft(button); y = getPageOffsetTop(button) + button.offsetHeight; if (browser.isIE) { x += button.offsetParent.clientLeft; y += button.offsetParent.clientTop; } button.menu.style.left = x + "px"; button.menu.style.top = y + "px"; button.menu.style.visibility = "visible"; if (button.menu.iframeEl != null) { button.menu.iframeEl.style.left = button.menu.style.left; button.menu.iframeEl.style.top = button.menu.style.top; button.menu.iframeEl.style.width = button.menu.offsetWidth + "px"; button.menu.iframeEl.style.height = button.menu.offsetHeight + "px"; button.menu.iframeEl.style.display = ""; } } function resetButton(button) { removeClassName(button, "menuButtonActive"); if (button.menu != null) { closeSubMenu(button.menu); button.menu.style.visibility = "hidden"; if (button.menu.iframeEl != null) button.menu.iframeEl.style.display = "none"; } } function menuMouseover(event) { var menu; if (browser.isIE) menu = getContainerWith(window.event.srcElement, "DIV", "menu"); else menu = event.currentTarget; if (menu.activeItem != null) closeSubMenu(menu); } function menuItemMouseover(event, menuId) { var item, menu, x, y; if (browser.isIE) item = getContainerWith(window.event.srcElement, "A", "menuItem"); else item = event.currentTarget; menu = getContainerWith(item, "DIV", "menu"); if (menu.activeItem != null) closeSubMenu(menu); menu.activeItem = item; item.className += " menuItemHighlight"; if (item.subMenu == null) { item.subMenu = document.getElementById(menuId); if (item.subMenu.isInitialized == null) menuInit(item.subMenu); } x = getPageOffsetLeft(item) + item.offsetWidth; y = getPageOffsetTop(item); var maxX, maxY; if (browser.isIE) { maxX = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) + (document.documentElement.clientWidth != 0 ? document.documentElement.clientWidth : document.body.clientWidth); maxY = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + (document.documentElement.clientHeight != 0 ? document.documentElement.clientHeight : document.body.clientHeight); } if (browser.isOP) { maxX = document.documentElement.scrollLeft + window.innerWidth; maxY = document.documentElement.scrollTop + window.innerHeight; } if (browser.isNS) { maxX = window.scrollX + window.innerWidth; maxY = window.scrollY + window.innerHeight; } maxX -= item.subMenu.offsetWidth; maxY -= item.subMenu.offsetHeight; if (x > maxX) x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth + (menu.offsetWidth - item.offsetWidth)); y = Math.max(0, Math.min(y, maxY)); item.subMenu.style.left = x + "px"; item.subMenu.style.top = y + "px"; item.subMenu.style.visibility = "visible"; if (item.subMenu.iframeEl != null) { item.subMenu.iframeEl.style.left = item.subMenu.style.left; item.subMenu.iframeEl.style.top = item.subMenu.style.top; item.subMenu.iframeEl.style.width = item.subMenu.offsetWidth + "px"; item.subMenu.iframeEl.style.height = item.subMenu.offsetHeight + "px"; item.subMenu.iframeEl.style.display = ""; } if (browser.isIE) window.event.cancelBubble = true; else event.stopPropagation(); } function closeSubMenu(menu) { if (menu == null || menu.activeItem == null) return; if (menu.activeItem.subMenu != null) { closeSubMenu(menu.activeItem.subMenu); menu.activeItem.subMenu.style.visibility = "hidden"; if (menu.activeItem.subMenu.iframeEl != null) menu.activeItem.subMenu.iframeEl.style.display = "none"; menu.activeItem.subMenu = null; } removeClassName(menu.activeItem, "menuItemHighlight"); menu.activeItem = null; } function menuInit(menu) { var itemList, spanList; var textEl, arrowEl; var itemWidth; var w, dw; var i, j; if (browser.isIE) { menu.style.lineHeight = "2.5ex"; spanList = menu.getElementsByTagName("SPAN"); for (i = 0; i < spanList.length; i++) if (hasClassName(spanList[i], "menuItemArrow")) { spanList[i].style.fontFamily = "Webdings"; spanList[i].firstChild.nodeValue = "4"; } } itemList = menu.getElementsByTagName("A"); if (itemList.length > 0) itemWidth = itemList[0].offsetWidth; else return; for (i = 0; i < itemList.length; i++) { spanList = itemList[i].getElementsByTagName("SPAN"); textEl = null; arrowEl = null; for (j = 0; j < spanList.length; j++) { if (hasClassName(spanList[j], "menuItemText")) textEl = spanList[j]; if (hasClassName(spanList[j], "menuItemArrow")) { arrowEl = spanList[j]; } } if (textEl != null && arrowEl != null) { textEl.style.paddingRight = (itemWidth - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px"; if (browser.isOP) arrowEl.style.marginRight = "0px"; } } if (browser.isIE) { w = itemList[0].offsetWidth; itemList[0].style.width = w + "px"; dw = itemList[0].offsetWidth - w; w -= dw; itemList[0].style.width = w + "px"; } if (browser.isIE) { var iframeEl = document.createElement("IFRAME"); iframeEl.frameBorder = 0; iframeEl.src = "javascript:false;"; iframeEl.style.display = "none"; iframeEl.style.position = "absolute"; iframeEl.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)"; menu.iframeEl = menu.parentNode.insertBefore(iframeEl, menu); } menu.isInitialized = true; } function getContainerWith(node, tagName, className) { while (node != null) { if (node.tagName != null && node.tagName == tagName && hasClassName(node, className)) return node; node = node.parentNode; } return node; } function hasClassName(el, name) { var i, list; list = el.className.split(" "); for (i = 0; i < list.length; i++) if (list[i] == name) return true; return false; } function removeClassName(el, name) { var i, curList, newList; if (el.className == null) return; newList = new Array(); curList = el.className.split(" "); for (i = 0; i < curList.length; i++) if (curList[i] != name) newList.push(curList[i]); el.className = newList.join(" "); } function getPageOffsetLeft(el) { var x; x = el.offsetLeft; if (el.offsetParent != null) x += getPageOffsetLeft(el.offsetParent); return x; } function getPageOffsetTop(el) { var y; y = el.offsetTop; if (el.offsetParent != null) y += getPageOffsetTop(el.offsetParent); return y; } //]]></script> <!-- Menu bar. --> <div class="menuBar" style="width:80%;"> <a class="menuButton" href="" onclick="return buttonClick(event, 'fileMenu');" onmouseover="buttonMouseover(event, 'fileMenu');">File</a></div> <!-- Main menus. --> <div id="fileMenu" class="menu" onmouseover="menuMouseover(event)"><a class="menuItem" href="blank.html">File Menu Item 1</a><a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'fileMenu2');"><span class="menuItemText">File Menu Item 2</span><span class="menuItemArrow">▶</span></a> <a class="menuItem" href="blank.html">File Menu Item 3</a> <a class="menuItem" href="blank.html">File Menu Item 4</a> <a class="menuItem" href="blank.html">File Menu Item 5</a> <div class="menuItemSep"></div> <a class="menuItem" href="blank.html">File Menu Item 6</a> </div> <!-- File sub menus. --> <div id="fileMenu2" class="menu"> <a class="menuItem" href="blank.html">File Menu 2 Item 1</a> <a class="menuItem" href="blank.html">File Menu 2 Item 2</a> </div>
-
Om nah hoo pez nyeetz, Orki!
ich habe im Internet ein Dropdownmenu gefunden
IMHO besteht keine Notwendigkeit, ein solches Menü mit JavaScript zu realisieren. Außerdem …
Matthias
-
Servus Orki,
Da ich die Links nicht zum Seitenwechsel einstelle und sich durch das anklicken der Menupunkte ein selbstgemachtes Fenster öffnet sieht es halt blöd aus wenn das Menu weiterhin ausgeklappt bleibt. Nun meine Frage, wie ändere ich das?
Indem Du es wieder zuklappen lässt.
Tipps: Lerne Javascript und nutze in deinem Fall onmouseout oder mouseout mit AddEventListener - die Unterschiede lernst du in dem Tutorial. Besser wäre das Menü mittels CSS zu realisieren, das spart dir eine Menge Arbeit.
PS: Ich kann mir sehr gut vorstellen, dass sich einige hier ausgenutzt und|oder wütend fühlen bei deiner Problemstellung inkl. Frage. Du suchst irgendwas im Internet zusammen ohne etwas gelernt zu haben und willst, dass sich andere noch kostenlos Zeit nehmen, dein "Problem" zu lösen, wofür du nichts gemacht hast. Das Forum hier funktioniert allerdings etwas (sehr viel) anders... Ich spreche auch aus Erfahrung, wenn ich sage, du solltest nicht den Fehler machen das lernen auf Copy & Paste zu beschränken und andere denken zu lassen.
lg,
Rowland--
"Dont't believe everything you read on the Internet, just because there's a quote with a name next to it." - Abraham Lincoln-
Servus Rowland,
ich kenne mich schon etwas mit JavaScript aus. Ich habe aber bei Drop-Down-Menus immer Schwierigkeiten. Aus diesem Grund habe ich online nach einem Script gesucht, der meine Anforderungen entspricht. Naja, bis auf die eine kleine Macke... Aber trotzdem Danke für den Hinweis!
Ein Menu via CSS zu realisieren funktioniert dann aber mit mouseover und mouseout bzw. x:hover. Aber ich will, dass das Menu erst durch das anklicken angezeigt wird und durch das weg klicken verborgen wird.
Zeitlich bin ich derzeit leider nicht in der Lage meine JavaScript Kenntnisse zu verbessern. :/
MfG
Orkan Saklan
-
