Hallo Leute, wer kann mir bei einem Javascript menü helfen ?
Ich versuche das gerade zu adaptieren, das ist soweit eh gut gegangen, aber jetzt ist der Balken der Untermenüs viel zu weit unten, ich weiss aber nicht wieso, hier das Skript:
<SCRIPT LANGUAGE="JavaScript">
if (top.frameset_geladen + "" != "okay"){
if(document.images)
top.location.replace(Dateien);
else
top.location.href = Dateien ;
}
if (parent.frames.length>2) {
err_url = self.location.href;
window.onerror = top.reportError;
}
// -->
</script>
</head>
<style type="text/css">
#menuBar {
background-color: #6699ff;
border: 1px solid;
border-color: #f0f0f0 #808080 #808080 #f0f0f0;
color: #000000;
font-size: 1pt;
padding: 3px 2px 4px 2px;
text-align: left;
width: 450px;
}
a.menuButton, a.menuButtonActive {
background-color: transparent;
border: 1px solid #6699ff;
color: #000000;
cursor: default;
font-family: "Verdana", Arial, Tahoma, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
left: 0px;
top: 0px;
text-decoration: none;
}
a.menuButton:hover {
background-color: transparent;
border-color: #f0f0f0 #808080 #808080 #f0f0f0;
color: #000000;
}
a.menuButtonActive, a.menuButtonActive:hover {
background-color: #a0a0a0;
border-color: #808080 #f0f0f0 #f0f0f0 #808080;
color: #ffffff;
left: 1px;
top: 1px;
}
.menu {
background-color: #6699ff;
border: 2px solid;
border-color: #f0f0f0 #808080 #808080 #f0f0f0;
padding: 0px;
position: absolute;
text-align: left;
visibility: hidden;
}
a.menuItem {
background-color: transparent;
color: #000000;
cursor: default;
display: block;
font-family: "Verdana", Arial, Tahoma,sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
margin: 0px;
padding: 2px;
padding-left: 12px;
padding-right: 16px;
text-decoration: none;
white-space: nowrap;
}
a.menuItem:hover {
background-color: #000080;
color: #ffffff;
}
.menuItemSep {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #808080;
margin: 3px 4px 3px 4px;
}
</style>
<script type="text/javascript">
// Determine browser and version.
function Browser() {
var ua, s, i;
this.isIE = false; // Internet Explorer
this.isNS = false; // Netscape
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = 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;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
// Global variable for tracking the currently active button.
var activeButton = null;
// Capture mouse clicks on the page so any active button can be
// deactivated.
if (browser.isIE)
document.onmousedown = pageMousedown;
if (browser.isNS)
document.addEventListener("mousedown", pageMousedown, true);
function pageMousedown(event) {
var el;
// If there is no active menu, exit.
if (!activeButton)
return;
// Find the element that was clicked on.
if (browser.isIE)
el = window.event.srcElement;
if (browser.isNS)
el = (event.target.className ? event.target : event.target.parentNode);
// If the active button was clicked on, exit.
if (el == activeButton)
return;
// If the element clicked on was not a menu button or item, close the
// active menu.
if (el.className != "menuButton" && el.className != "menuItem" &&
el.className != "menuItemSep" && el.className != "menu")
resetButton(activeButton);
}
function buttonClick(button, menuName) {
// Blur focus from the link to remove that annoying outline.
button.blur();
// Associate the named menu to this button if not already done.
if (!button.menu)
button.menu = document.getElementById(menuName);
// Reset the currently active button, if any.
if (activeButton && activeButton != button)
resetButton(activeButton);
// Toggle the button's state.
if (button.isDepressed)
resetButton(button);
else
depressButton(button);
return false;
}
function buttonMouseover(button, menuName) {
// If any other button menu is active, deactivate it and activate this one.
// Note: if this button has no menu, leave the active menu alone.
if (activeButton && activeButton != button) {
resetButton(activeButton);
if (menuName)
buttonClick(button, menuName);
}
}
function depressButton(button) {
var w, dw, x, y;
// Change the button's style class to make it look like it's depressed.
button.className = "menuButtonActive";
// For IE, set an explicit width on the first menu item. This will
// cause link hovers to work on all the menu's items even when the
// cursor is not over the link's text.
if (browser.isIE && !button.menu.firstChild.style.width) {
w = button.menu.firstChild.offsetWidth;
button.menu.firstChild.style.width = w + "px";
dw = button.menu.firstChild.offsetWidth - w;
w -= dw;
button.menu.firstChild.style.width = w + "px";
}
// Position the associated drop down menu under the button and
// show it. Note that the position must be adjusted according to
// browser, styling and positioning.
x = getPageOffsetLeft(button);
y = getPageOffsetTop(button) + button.offsetHeight;
if (browser.isIE) {
x += 2;
y += 2;
}
if (browser.isNS && browser.version < 6.1)
y--;
// Position and show the menu.
button.menu.style.left = x + "px";
button.menu.style.top = y + "px";
button.menu.style.visibility = "visible";
// Set button state and let the world know which button is
// active.
button.isDepressed = true;
activeButton = button;
}
function resetButton(button) {
// Restore the button's style class.
button.className = "menuButton";
// Hide the button's menu.
if (button.menu)
button.menu.style.visibility = "hidden";
// Set button state and clear active menu global.
button.isDepressed = false;
activeButton = null;
}
function getPageOffsetLeft(el) {
// Return the true x coordinate of an element relative to the page.
return el.offsetLeft + (el.offsetParent ? getPageOffsetLeft(el.offsetParent) : 0);
}
function getPageOffsetTop(el) {
// Return the true y coordinate of an element relative to the page.
return el.offsetTop + (el.offsetParent ? getPageOffsetTop(el.offsetParent) : 0);
}
</script>
<!-- Tags for the menu bar. -->
<div id="menuBar"
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'AktuellesMenu');"
onmouseover="buttonMouseover(this, 'AktuellesMenu');"
>Aktuelles</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'TeamMenu');"
onmouseover="buttonMouseover(this, 'TeamMenu');"
>Das Team</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'WirMenu');"
onmouseover="buttonMouseover(this, 'WirMenu');"
>Über uns</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'FunMenu');"
onmouseover="buttonMouseover(this, 'FunMenu');"
>Fun Zone</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'SonstigesMenu');"
onmouseover="buttonMouseover(this, 'SonstigesMenu');"
>Sonstiges</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'KontaktMenu');"
onmouseover="buttonMouseover(this, 'KontaktMenu');"
>Kontakt</a
></div>
<!-- Tags for the drop down menus. -->
<div id="AktuellesMenu" class="menu">
<a class="menuItem" href="aktueleles/gemeinde.asp">Gemeinde</a>
<a class="menuItem" href="aktuelles/gemeinderat.asp">Gemeinderat</a>
<a class="menuItem" href="aktuelles/parlament.asp">Parlament</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="aktuelles/aktivitaeten.asp">Aktivitäten</a>
<a class="menuItem" href="http://studios.orf.at/ktn/stk/internet/landtag/start.htm" target="_blank">Landtag Live</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="http://www.fpoe-ktn.at" target="_blank">FP Kärnten</a>
</div>
<div id="TeamMenu" class="menu">
<a class="menuItem" href="team/gemeinderaete.asp">Gemeinderäte</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="team/vorstand.asp">Vorstand</a>
<a class="menuItem" href="team/aktive.asp">Aktive</a>
<div class="menuItemSep"></div>
</div>
<div id="WirMenu" class="menu">
<a class="menuItem" href="wir/grundsatz.asp">Dafür stehen wir</a>
<a class="menuItem" href="wir/vergangenheit.asp">Vergangenheit</a>
<a class="menuItem" href="wir/wollen.asp">Das wollen wir</a>
<a class="menuItem" href="wir/bereits_getan.asp">Das haben wir bereits getan</a>
<a class="menuItem" href="team/gemeinderat.asp">Für Sie</a>
</div>
<div id="FunMenu" class="menu">
<a class="menuItem" href="http://oe3.orf.at/oe3.orf?channel=5&tmp=69551" target="_blank">Top Ten</a>
<a class="menuItem" href="http://www.mobilehits.at" target="_blank">Klingeltöne</a>
<a class="menuItem" href="http://www.sms.at" target="_blank">SMS</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="http://www.fpoe.at/kids_teens/games/games.htm" target="_blank">Spiele</a>
<a class="menuItem" href="http://www.fpoe.at/kids_teens/bearcards.htm" target="_blank">Greeting Cards</a>
<a class="menuItem" href="http://www.fpoe.at/kids_teens/bearcards.htm" target="_blank">Screen Saver</a>
</div>
<div id="SonstigesMenu" class="menu">
<a class="menuItem" href="sonstiges/fotos.asp">Fotos</a>
<a class="menuItem" href="list/list.php">Newsletter</a>
<a class="menuItem" href="http://www.desein.net/board/wbboard" target="_blank">Forum</a>
<a class="menuItem" href="sonstiges/links.asp">Links</a>
<a class="menuItem" href="http://www2.ktn.gv.at/akl/akl_docservice.nsf/webformularel" target="_blank">Formulare</a>
<a class="menuItem" href="sonstiges/umfrage.asp">Umfrage</a>
<a class="menuItem" href="sonstiges/vereine.asp">Vereine</a>
</div>
<div id="KontaktMenu" class="menu">
<a class="menuItem" href="kontakt/gemeinderat.asp">Gemeinderäte</a>
<a class="menuItem" href="kontakt/vorstandasp">Vorstand</a>
<a class="menuItem" href="kontakt/aktive.asp">Aktivisten</a>
<a class="menuItem" href="http://www.fpoe.at/interactive/wichtigste_email.htm" target="_blank">FPÖ</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="kontakt/aktive/wedl.asp">Webmaster</a>
</div>
</SCRIPT><!--webbot bot="HTMLMarkup" endspan --></td>
</tr>
</table>
<!--end.head-->
Danke für Eure Hilfe
Ich versuche das gerade zu adaptieren, das ist soweit eh gut gegangen, aber jetzt ist der Balken der Untermenüs viel zu weit unten, ich weiss aber nicht wieso, hier das Skript:
<SCRIPT LANGUAGE="JavaScript">
if (top.frameset_geladen + "" != "okay"){
if(document.images)
top.location.replace(Dateien);
else
top.location.href = Dateien ;
}
if (parent.frames.length>2) {
err_url = self.location.href;
window.onerror = top.reportError;
}
// -->
</script>
</head>
<style type="text/css">
#menuBar {
background-color: #6699ff;
border: 1px solid;
border-color: #f0f0f0 #808080 #808080 #f0f0f0;
color: #000000;
font-size: 1pt;
padding: 3px 2px 4px 2px;
text-align: left;
width: 450px;
}
a.menuButton, a.menuButtonActive {
background-color: transparent;
border: 1px solid #6699ff;
color: #000000;
cursor: default;
font-family: "Verdana", Arial, Tahoma, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
left: 0px;
top: 0px;
text-decoration: none;
}
a.menuButton:hover {
background-color: transparent;
border-color: #f0f0f0 #808080 #808080 #f0f0f0;
color: #000000;
}
a.menuButtonActive, a.menuButtonActive:hover {
background-color: #a0a0a0;
border-color: #808080 #f0f0f0 #f0f0f0 #808080;
color: #ffffff;
left: 1px;
top: 1px;
}
.menu {
background-color: #6699ff;
border: 2px solid;
border-color: #f0f0f0 #808080 #808080 #f0f0f0;
padding: 0px;
position: absolute;
text-align: left;
visibility: hidden;
}
a.menuItem {
background-color: transparent;
color: #000000;
cursor: default;
display: block;
font-family: "Verdana", Arial, Tahoma,sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
margin: 0px;
padding: 2px;
padding-left: 12px;
padding-right: 16px;
text-decoration: none;
white-space: nowrap;
}
a.menuItem:hover {
background-color: #000080;
color: #ffffff;
}
.menuItemSep {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #808080;
margin: 3px 4px 3px 4px;
}
</style>
<script type="text/javascript">
// Determine browser and version.
function Browser() {
var ua, s, i;
this.isIE = false; // Internet Explorer
this.isNS = false; // Netscape
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = 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;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
// Global variable for tracking the currently active button.
var activeButton = null;
// Capture mouse clicks on the page so any active button can be
// deactivated.
if (browser.isIE)
document.onmousedown = pageMousedown;
if (browser.isNS)
document.addEventListener("mousedown", pageMousedown, true);
function pageMousedown(event) {
var el;
// If there is no active menu, exit.
if (!activeButton)
return;
// Find the element that was clicked on.
if (browser.isIE)
el = window.event.srcElement;
if (browser.isNS)
el = (event.target.className ? event.target : event.target.parentNode);
// If the active button was clicked on, exit.
if (el == activeButton)
return;
// If the element clicked on was not a menu button or item, close the
// active menu.
if (el.className != "menuButton" && el.className != "menuItem" &&
el.className != "menuItemSep" && el.className != "menu")
resetButton(activeButton);
}
function buttonClick(button, menuName) {
// Blur focus from the link to remove that annoying outline.
button.blur();
// Associate the named menu to this button if not already done.
if (!button.menu)
button.menu = document.getElementById(menuName);
// Reset the currently active button, if any.
if (activeButton && activeButton != button)
resetButton(activeButton);
// Toggle the button's state.
if (button.isDepressed)
resetButton(button);
else
depressButton(button);
return false;
}
function buttonMouseover(button, menuName) {
// If any other button menu is active, deactivate it and activate this one.
// Note: if this button has no menu, leave the active menu alone.
if (activeButton && activeButton != button) {
resetButton(activeButton);
if (menuName)
buttonClick(button, menuName);
}
}
function depressButton(button) {
var w, dw, x, y;
// Change the button's style class to make it look like it's depressed.
button.className = "menuButtonActive";
// For IE, set an explicit width on the first menu item. This will
// cause link hovers to work on all the menu's items even when the
// cursor is not over the link's text.
if (browser.isIE && !button.menu.firstChild.style.width) {
w = button.menu.firstChild.offsetWidth;
button.menu.firstChild.style.width = w + "px";
dw = button.menu.firstChild.offsetWidth - w;
w -= dw;
button.menu.firstChild.style.width = w + "px";
}
// Position the associated drop down menu under the button and
// show it. Note that the position must be adjusted according to
// browser, styling and positioning.
x = getPageOffsetLeft(button);
y = getPageOffsetTop(button) + button.offsetHeight;
if (browser.isIE) {
x += 2;
y += 2;
}
if (browser.isNS && browser.version < 6.1)
y--;
// Position and show the menu.
button.menu.style.left = x + "px";
button.menu.style.top = y + "px";
button.menu.style.visibility = "visible";
// Set button state and let the world know which button is
// active.
button.isDepressed = true;
activeButton = button;
}
function resetButton(button) {
// Restore the button's style class.
button.className = "menuButton";
// Hide the button's menu.
if (button.menu)
button.menu.style.visibility = "hidden";
// Set button state and clear active menu global.
button.isDepressed = false;
activeButton = null;
}
function getPageOffsetLeft(el) {
// Return the true x coordinate of an element relative to the page.
return el.offsetLeft + (el.offsetParent ? getPageOffsetLeft(el.offsetParent) : 0);
}
function getPageOffsetTop(el) {
// Return the true y coordinate of an element relative to the page.
return el.offsetTop + (el.offsetParent ? getPageOffsetTop(el.offsetParent) : 0);
}
</script>
<!-- Tags for the menu bar. -->
<div id="menuBar"
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'AktuellesMenu');"
onmouseover="buttonMouseover(this, 'AktuellesMenu');"
>Aktuelles</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'TeamMenu');"
onmouseover="buttonMouseover(this, 'TeamMenu');"
>Das Team</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'WirMenu');"
onmouseover="buttonMouseover(this, 'WirMenu');"
>Über uns</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'FunMenu');"
onmouseover="buttonMouseover(this, 'FunMenu');"
>Fun Zone</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'SonstigesMenu');"
onmouseover="buttonMouseover(this, 'SonstigesMenu');"
>Sonstiges</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'KontaktMenu');"
onmouseover="buttonMouseover(this, 'KontaktMenu');"
>Kontakt</a
></div>
<!-- Tags for the drop down menus. -->
<div id="AktuellesMenu" class="menu">
<a class="menuItem" href="aktueleles/gemeinde.asp">Gemeinde</a>
<a class="menuItem" href="aktuelles/gemeinderat.asp">Gemeinderat</a>
<a class="menuItem" href="aktuelles/parlament.asp">Parlament</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="aktuelles/aktivitaeten.asp">Aktivitäten</a>
<a class="menuItem" href="http://studios.orf.at/ktn/stk/internet/landtag/start.htm" target="_blank">Landtag Live</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="http://www.fpoe-ktn.at" target="_blank">FP Kärnten</a>
</div>
<div id="TeamMenu" class="menu">
<a class="menuItem" href="team/gemeinderaete.asp">Gemeinderäte</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="team/vorstand.asp">Vorstand</a>
<a class="menuItem" href="team/aktive.asp">Aktive</a>
<div class="menuItemSep"></div>
</div>
<div id="WirMenu" class="menu">
<a class="menuItem" href="wir/grundsatz.asp">Dafür stehen wir</a>
<a class="menuItem" href="wir/vergangenheit.asp">Vergangenheit</a>
<a class="menuItem" href="wir/wollen.asp">Das wollen wir</a>
<a class="menuItem" href="wir/bereits_getan.asp">Das haben wir bereits getan</a>
<a class="menuItem" href="team/gemeinderat.asp">Für Sie</a>
</div>
<div id="FunMenu" class="menu">
<a class="menuItem" href="http://oe3.orf.at/oe3.orf?channel=5&tmp=69551" target="_blank">Top Ten</a>
<a class="menuItem" href="http://www.mobilehits.at" target="_blank">Klingeltöne</a>
<a class="menuItem" href="http://www.sms.at" target="_blank">SMS</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="http://www.fpoe.at/kids_teens/games/games.htm" target="_blank">Spiele</a>
<a class="menuItem" href="http://www.fpoe.at/kids_teens/bearcards.htm" target="_blank">Greeting Cards</a>
<a class="menuItem" href="http://www.fpoe.at/kids_teens/bearcards.htm" target="_blank">Screen Saver</a>
</div>
<div id="SonstigesMenu" class="menu">
<a class="menuItem" href="sonstiges/fotos.asp">Fotos</a>
<a class="menuItem" href="list/list.php">Newsletter</a>
<a class="menuItem" href="http://www.desein.net/board/wbboard" target="_blank">Forum</a>
<a class="menuItem" href="sonstiges/links.asp">Links</a>
<a class="menuItem" href="http://www2.ktn.gv.at/akl/akl_docservice.nsf/webformularel" target="_blank">Formulare</a>
<a class="menuItem" href="sonstiges/umfrage.asp">Umfrage</a>
<a class="menuItem" href="sonstiges/vereine.asp">Vereine</a>
</div>
<div id="KontaktMenu" class="menu">
<a class="menuItem" href="kontakt/gemeinderat.asp">Gemeinderäte</a>
<a class="menuItem" href="kontakt/vorstandasp">Vorstand</a>
<a class="menuItem" href="kontakt/aktive.asp">Aktivisten</a>
<a class="menuItem" href="http://www.fpoe.at/interactive/wichtigste_email.htm" target="_blank">FPÖ</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="kontakt/aktive/wedl.asp">Webmaster</a>
</div>
</SCRIPT><!--webbot bot="HTMLMarkup" endspan --></td>
</tr>
</table>
<!--end.head-->
Danke für Eure Hilfe
Kommentar