Kleines Problem mit Menü.

SixxKiller

Erfahrenes Mitglied
Guten Morgen Leutz!

Ich hab mal wieder ein kleines Problem mit einem JavaScript Menü.
Hab ein passendes Menü gefunden und auch schon soweit angepaßt.
Hier der Code:
Code:
<script type="text/javascript">
<!-- ---------------------------------------------------- -->
<!-- Menu Bar Demo                                        -->
<!--                                                      -->
<!-- Copyright 2000 by Mike Hall                          -->
<!-- Please see http://www.brainjar.com for terms of use. -->
<!-- ---------------------------------------------------- -->
// 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>

Code:
<div id="menuBar"
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'fileMenu');"
    onmouseover="buttonMouseover(this, 'fileMenu');"
>Home</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'editMenu');"
    onmouseover="buttonMouseover(this, 'editMenu');"
>Über Uns</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'viewMenu');"
    onmouseover="buttonMouseover(this, 'viewMenu');"
>Galerie</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'toolsMenu');"
    onmouseover="buttonMouseover(this, 'toolsMenu');"
>Tuckentours</a
></div>
<div id="fileMenu" class="menu">
<a class="menuItem" href="index.html"></a>
</div>
<div id="editMenu" class="menu">
<a class="menuItem" href="blank.html">Vorstand</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Mitglieder</a>
<a class="menuItem" href="blank.html">Ehrenmitglieder</a>
<a class="menuItem" href="blank.html">Paten</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html"
   onclick="resetButton(activeButton);return true;">Bambinis</a>
</div>
Nun ist die Menüleiste auf der Page in zwei Teile aufgeteilt. Das eigentliche
Menü möchte ich aber zweimal benutzen, nur halt mit verschiedenen Links.
Wie kann ich es ändern das ich es getrennt nutzen kann.
Jetzt sind auf beiden Seiten die selben Menüunterpunkte.
Mein Wissen über JavaScipts ist recht begrenzt daher auch meine Frage.
Einen Screen häng ich an.
Ich hoffe ich hab mich einigermassen deutlich ausgedrückt.
Danke schonmal für Eure Hilfe.

P.S.: Habs online gesetzt zur besseren Ansicht: Testseite

Greetz SixxKiller
 

Anhänge

  • bohounds.JPG
    bohounds.JPG
    47,8 KB · Aufrufe: 29
Zuletzt bearbeitet:
Hi,

so wie ich das überblicke, musst du lediglich für das zweite Menü alle doppelt vorhandenen ID-Namen korrigieren und die einzelnen Unterpunkte sowie deren Verweisziele neu setzen:

Code:
<div id="menuBar2"
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'blaMenu');"
    onmouseover="buttonMouseover(this, 'blaMenu');"
>Home</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'blubMenu');"
    onmouseover="buttonMouseover(this, 'blubMenu');"
>Über Uns</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'fooMenu');"
    onmouseover="buttonMouseover(this, 'fooMenu');"
>Galerie</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'barMenu');"
    onmouseover="buttonMouseover(this, 'barMenu');"
>Tuckentours</a
></div>
<div id="blaMenu" class="menu">
<a class="menuItem" href="index.html"></a>
</div>
<div id="blubMenu" class="menu">
<a class="menuItem" href="blank.html">Vorstand</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Mitglieder</a>
<a class="menuItem" href="blank.html">Ehrenmitglieder</a>
<a class="menuItem" href="blank.html">Paten</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html"
   onclick="resetButton(activeButton);return true;">Bambinis</a>
</div>

<div id="fooMenu" class="menu">
<a class="menuItem" href="blank.html">Auswärtsfahrt 1</a>
<a class="menuItem" href="blank.html">Auswärtsfahrt 2</a>
<a class="menuItem" href="blank.html">Auswärtsfahrt 3</a>
</div>

<div id="barMenu" class="menu">
<a class="menuItem" href="blank.html">News</a>
<a class="menuItem" href="blank.html">On Tour 2006</a>
<a class="menuItem" href="blank.html">On Tour 2007</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">On Tour 2008</a>
<a class="menuItem" href="blank.html">Jubiläumsfahrt</a>
</div>
Code:
#menuBar, #menuBar2 {
  background-color: #;
  border: 0px solid;
  border-color: #f0f0f0 #808080 #808080 #f0f0f0;
  color: #000000;
  font-size: 1pt;
  padding: 4px 2px 4px 2px;
  text-align: left;
  width: 100%;
}
 
Zuerst riesen Dank Maik.
So funktioniert es einwandfrei.
Eine Sache hab ich noch. Wie zb. beim Home Button (siehe HP online)
ist darunter ein leeres Kästchen. Wie bekomm ich es weg? Der Button/Link soll
aber weiterhin funktionieren.

Greetz SixxKiller
 
Hierfür musst du in dem Link die beiden Eventhandler rausnehmen:

Code:
<a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'fileMenu');"
    onmouseover="buttonMouseover(this, 'fileMenu');"
>Home</a>
und stattdessen im href-Attribut das Verweisziel angeben.

Das nachfolgende DIV #filemenu ist somit dann überflüssig.
 
Zurück