Menü mit Untermenü umprogrammieren

**bubu-der-uhu** · 03-05-2005 16:55

Hallo!

Hab diese Menü (Quelltext im Anhang) schon mal so gut wie möglich für meine Zwecke umprogrammiert.

Ein paar Sachen fehlen aber noch auf die ich nicht draufkomme!!!!:

1.) untermenü gleich bei Mouseover anzeigen und nicht erst nach klick (ist aber nicht sooo wichtig)

2.) Untermenüposition passt mir nicht weil er bei den Menüpunkten weiter rechts, die Untermenüpunkte UNTEREINANDER ANSTATT IN EINER REIHE darstellt

Ich hoffe mir kann da wer weiterhelfen!

Grüsse,

Phil

Quelltext:
--------------------------------------------------------------------------------------------------------------------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">

#menuBar {
  background-color:transparent;
  border: 0px solid;
  border-color: #f0f0f0 #808080 #808080 #f0f0f0;
  color: #000000;
  font-size:16px;
  padding: 4px 2px 4px 2px;
  text-align: right;
  margin:'margin-right'
  width: 500px;
  height: 20px;
}

a.menuButton, a.menuButtonActive {
  background-color: transparent;
  border: 0px solid;
  width: 100px;
  color: #000000;
  cursor: default;
  font-family: "Arial", Tahoma, sans-serif;
  font-size: 16Px;
  font-style: normal;
  font-weight:800;
  margin: 5px;
  padding: 2px 6px 2px 6px;
  position: relative;
  left: 0px;
  top: 0px;
  text-decoration: none;
}

a.menuButton:hover {
  background-color:#B1D0E9;
  border-color: #f0f0f0 #808080 #808080 #f0f0f0;
  color: #000000;
}

a.menuButtonActive, a.menuButtonActive:hover {
  background-color:#00CCFF;
  border-color: #808080 #f0f0f0 #f0f0f0 #808080;
  color: #ffffff;
  left: 1px;
  top: 1px;
}

.menu {
  background-color:#CCCCCC;
  border: 0px;
  border-color: #f0f0f0 #808080 #808080 #f0f0f0;
  padding: 0px;
  position: absolute;
  margin-left: -2px;
  margin-top: -2px;
  height: 20px;
  text-align: left;
  visibility: hidden;
}

a.menuItem {
  background-color: transparent;
  color: #000000;
  cursor: default;
  display:table-column;
  font-family: "MS Sans Serif", Arial, Tahoma,sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  margin:'margin-left';
  padding: 5px;
  padding-left: 12px;
  padding-right: 16px;
  text-decoration: none;
  white-space: nowrap;
}

a.menuItem:hover {
  background-color:#FFCC66;
  color: #ffffff;
}

.menuItemSep {
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #808080;
  margin: 3px 4px 3px 4px;
}

</style>
<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>


<!-- Tags for the menu bar. -->

<div id="menuBar"
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'fileMenu');"
    onmouseover="buttonMouseover(this, 'filemenu');"
>NEWS</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'editMenu');"
    onmouseover="buttonMouseover(this, 'editMenu');"
>UNTERNEHMEN</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'viewMenu');"
    onmouseover="buttonMouseover(this, 'viewMenu');"
>PRODUKTE</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'toolsMenu');"
    onmouseover="buttonMouseover(this, 'toolsMenu');"
>PRESSE</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'optionsMenu');"
    onmouseover="buttonMouseover(this, 'optionsMenu');"
>KONTAKT</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'helpMenu');"
    onmouseover="buttonMouseover(this, 'helpMenu');"
>LINKS</a
></div>

<!-- Tags for the drop down menus. -->

<div id="fileMenu" class="menu">
<a class="menuItem" href="blank.html">File Menu Item 1</a>
<a class="menuItem" href="blank.html">File Menu Item 2</a>
<a class="menuItem" href="blank.html">File Menu Item 3</a>
</div>

<div id="editMenu" class="menu">
<a class="menuItem" href="blank.html">Edit Menu Item 1</a>
<a class="menuItem" href="blank.html">Edit Menu Item 2</a>
<a class="menuItem" href="blank.html">Edit Menu Item 3</a>
</div>

<div id="viewMenu" class="menu">
<a class="menuItem" href="blank.html">View Menu Item 1</a>
<a class="menuItem" href="blank.html">View Menu Item 2</a>
<a class="menuItem" href="blank.html">View Menu Item 3</a>
</div>

<div id="toolsMenu" class="menu">
<a class="menuItem" href="blank.html">Tools Menu Item 1</a>
<a class="menuItem" href="blank.html">Tools Menu Item 2</a>
<a class="menuItem" href="blank.html">Tools Menu Item 3</a>
</div>

<div id="optionsMenu" class="menu">
<a class="menuItem" href="blank.html">Options Menu Item 1</a>
<a class="menuItem" href="blank.html">Options Menu Item 2</a>
<a class="menuItem" href="blank.html">Options Menu Item 3</a>
</div>

<div id="helpMenu" class="menu">
<a class="menuItem" href="blank.html">Help Menu Item 1</a>
<a class="menuItem" href="blank.html">Help Menu Item 2</a>
<a class="menuItem" href="blank.html">Help Menu Item 3</a>
</div>

**bubu-der-uhu** · 04-05-2005 09:13

Das Blöde ist ja wenn ich die Position des Untermenüs weiter nach links schiebe, dass die Tabelle trotzdem als Block und nicht als Spalten dargestellt werden -> obwohl sie den rechten Browserrand noch nicht berühren!!!!

Mit den Tabellen weiter links funzt alles wunderbar!

Weis den keiner darüber bescheid???? Der Code ist voll und ganz lauffähig!

Grüsse, Phil

**bubu-der-uhu** · 04-05-2005 10:57

...OK...

Habs nun doch selbst Hinbekommen

...zwar ziemlich kompliziert mit if-Anweisungen... aber es funzt!

Gibts in Java auch "case" wie in C++????

Thema: Menü mit Untermenü umprogrammieren

LinkBack

Themen-Optionen

Anzeige

Menü mit Untermenü umprogrammieren

Empfehlenswerte Literatur von unserem Partner Terrashop

AW: Menü mit Untermenü umprogrammieren

AW: Menü mit Untermenü umprogrammieren

Ähnliche Themen

PopUp Menü rechtsbündig!?

polldown Menü

JS Menü mit Dreamweaver... Bildaustausch Problem

Aufklapp Menü für Homepage brauche Hilfe

dropdown menü

Lesezeichen

Lesezeichen

Berechtigungen