Defektes (?) Menü - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign)

Lydia.h · registriert: 25-07-2005

Hallo Leute,

ich habe in diesem Forum folgendes Menü gefunden, was ich sehr schön finde.
Allerdings steht die Combobox im Vordergrund, und ich weiß nicht, warum.
Hat da jemand eine Idee?

Gruß Lydia.

Code:

<html>
<head>
<link href="style.css" rel=stylesheet>
<title>Menubar</title>
</head>

<body>
<table width=100% cellpadding=3 cellspacing=1 border=0>
      <tr>
        <td class=title2 width="80">Titel</td>
        <td class=body2 width=400>Menubar&nbsp;</td>
      </tr>
      <tr>
        <td class=body2 colspan="2"><style type="text/css">

#menuBar {
  background-color: #c0c0c0;
  border: 2px solid;
  border-color: #f0f0f0 #808080 #808080 #f0f0f0;
  color: #000000;
  font-size: 1pt;
  padding: 4px 2px 4px 2px;
  text-align: left;
  width: 80%;
}

a.menuButton, a.menuButtonActive {
  background-color: transparent;
  border: 1px solid #c0c0c0;
  color: #000000;
  cursor: default;
  font-family: "MS Sans Serif", 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: #c0c0c0;
  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: "MS Sans Serif", 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">
<!-- ---------------------------------------------------- -->
<!-- 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');"
>File</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'editMenu');"
    onmouseover="buttonMouseover(this, 'editMenu');"
>Edit</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'viewMenu');"
    onmouseover="buttonMouseover(this, 'viewMenu');"
>View</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'toolsMenu');"
    onmouseover="buttonMouseover(this, 'toolsMenu');"
>Tools</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'optionsMenu');"
    onmouseover="buttonMouseover(this, 'optionsMenu');"
>Options</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'helpMenu');"
    onmouseover="buttonMouseover(this, 'helpMenu');"
>Help</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 class="menuItemSep"></div>
<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>

<div id="editMenu" class="menu">
<a class="menuItem" href="blank.html">Edit Menu Item 1</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Edit Menu Item 2</a>
<a class="menuItem" href="blank.html">Edit Menu Item 3</a>
<a class="menuItem" href="blank.html">Edit Menu Item 4</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html"
   target="_blank"  onclick="resetButton(activeButton);return true;">Edit Menu Item 5</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 class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Tools Menu Item 4</a>
<a class="menuItem" href="blank.html">Tools Menu Item 5</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>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Help Menu Item 3</a>
</div>
&nbsp;</td>
      </tr>
 <tr><td><select name="liste"><option value'lydia'>lydia</option>
 </td></tr>
</table>
</body>
</html>

**AW: Defektes (?) Menü -** 17-09-2005, 17:28

Moin!

Während die meisten Browser inzwischen damit korrekt umgehen (wenn entsprechende z-indizes gesetzt sind), sind selects in IE gegenüber HTML-Containern immer im Vordergrund. Den Effekt kannst Du vermeiden, indem Du das select beim Öffnen des Menüs unsichtbar machst oder aber einen Iframe (das ist in IE das einzige Element, das ein select überdecken kann) drüber legst. Den wiederum mußt Du unter Dein Menü packen.

Ahoi - Pit

Lydia.h · registriert: 25-07-2005

Schnieff, Pit, das sind für mich alles "böhmische" Dörfer.
Wie und wo setze ich denn das IFrame ein?

Wäre für ein Beispiel dankbar.

Gruß
Lydia.

Zitat:

Zitat von pit-r

Moin!

Während die meisten Browser inzwischen damit korrekt umgehen (wenn entsprechende z-indizes gesetzt sind), sind selects in IE gegenüber HTML-Containern immer im Vordergrund. Den Effekt kannst Du vermeiden, indem Du das select beim Öffnen des Menüs unsichtbar machst oder aber einen Iframe (das ist in IE das einzige Element, das ein select überdecken kann) drüber legst. Den wiederum mußt Du unter Dein Menü packen.

Ahoi - Pit

**AW: Defektes (?) Menü -** 17-09-2005, 17:44

Hi!

Wenn Du magst bau ich Dir das ins Menü-Script ein, dauert dann aber etwas...

Ahoi - Pit

Lydia.h · registriert: 25-07-2005

Ich mag :-) und koch derweil einen Kaffee für Dich und leg Kekse raus ...

Aber weil ich lern und willig bin, hihihi, sorry, gnigger, würde ich es ja auch gerne lernen, wenn es nicht allzu kompliziert ist ...
Lieben Gruß
Lydia.

**AW: Defektes (?) Menü -** 17-09-2005, 18:12

Hi!

Also:
1. Du brauchst 'n iframe:
<iframe style="z-index: 1;position:absolute;display:none;" id="ifr"></iframe>
(hab ich unmittelbar vor den </body>-Tag gesetzt)

2. Das select bekommt'n z-index von 0 (jedefalls niedriger als der iframe):
<select name="liste" style="z-index: 0">
<option value'lydia'>lydia</option>
</select>

3. Alle in Frage kommenden divs erhalten einen höheren z-index als der iframe (oben im css):
.menu {
/*vorhandene Zuweisungen*/
z-index:2;
}

4. Wenn ein Menü "aufklappt", iframe sichtbar machen und Position sowie Größe an den Menü-Div anpassen:
// Position and show the menu.
button.menu.style.left = x + "px";
button.menu.style.top= y + "px";
button.menu.style.visibility = "visible";
if (browser.isIE){//ab hier neu
i=document.getElementById('ifr');
i.style.display = "block";
i.style.left = x + "px";
i.style.top= y + "px";
i.style.width= button.menu.offsetWidth + "px";
i.style.height= button.menu.offsetHeight + "px";
}

5. Wenn Menü zuklappt, iframe verschwinden lassen:
// Hide the button's menu.
if (button.menu){
button.menu.style.visibility = "hidden";
if (browser.isIE)document.getElementById('ifr').style.display = "none";
}

Fertig!

Auch wenn's viel code ist - hier das Ganze komplett:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Menubar</title>
<link href="style.css" rel=stylesheet>
<style type="text/css">
#menuBar {
background-color: #c0c0c0;
border: 2px solid;
border-color: #f0f0f0 #808080 #808080 #f0f0f0;
color: #000000;
font-size: 1pt;
padding: 4px 2px 4px 2px;
text-align: left;
width: 80%;
}
a.menuButton, a.menuButtonActive {
background-color: transparent;
border: 1px solid #c0c0c0;
color: #000000;
cursor: default;
font-family: "MS Sans Serif", 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: #c0c0c0;
border: 2px solid;
border-color: #f0f0f0 #808080 #808080 #f0f0f0;
padding: 0px;
position: absolute;
text-align: left;
visibility: hidden;
z-index:2;
}
a.menuItem {
background-color: transparent;
color: #000000;
cursor: default;
display: block;
font-family: "MS Sans Serif", 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">
<!-- ---------------------------------------------------- -->
<!-- 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";
if (browser.isIE){
i=document.getElementById('ifr');
i.style.display = "block";
i.style.left = x + "px";
i.style.top= y + "px";
i.style.width= button.menu.offsetWidth + "px";
i.style.height= button.menu.offsetHeight + "px";
}
// 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";
if (browser.isIE)document.getElementById('ifr').style.display = "none";
}
// 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>
</head>
<body>
<table width=100% cellpadding=3 cellspacing=1 border=0>
<tr>
<td class=title2 width="80">Titel</td>
<td class=body2 width=400>Menubar&nbsp;</td>
</tr>
<tr>
<td class=body2 colspan="2">
<!-- Tags for the menu bar. -->
<div id="menuBar"><a class="menuButton" href="" onclick="return buttonClick(this, 'fileMenu');" onmouseover="buttonMouseover(this, 'fileMenu');">File</a>
<a class="menuButton" href="" onclick="return buttonClick(this, 'editMenu');" onmouseover="buttonMouseover(this, 'editMenu');">Edit</a>
<a class="menuButton" href="" onclick="return buttonClick(this, 'viewMenu');" onmouseover="buttonMouseover(this, 'viewMenu');">View</a>
<a class="menuButton" href="" onclick="return buttonClick(this, 'toolsMenu');" onmouseover="buttonMouseover(this, 'toolsMenu');">Tools</a>
<a class="menuButton" href="" onclick="return buttonClick(this, 'optionsMenu');" onmouseover="buttonMouseover(this, 'optionsMenu');">Options</a>
<a class="menuButton" href="" onclick="return buttonClick(this, 'helpMenu');" onmouseover="buttonMouseover(this, 'helpMenu');">Help</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 class="menuItemSep"></div>
<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>
<div id="editMenu" class="menu">
<a class="menuItem" href="blank.html">Edit Menu Item 1</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Edit Menu Item 2</a>
<a class="menuItem" href="blank.html">Edit Menu Item 3</a>
<a class="menuItem" href="blank.html">Edit Menu Item 4</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html" target="_blank"onclick="resetButton(activeButton);return true;">Edit Menu Item 5</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 class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Tools Menu Item 4</a>
<a class="menuItem" href="blank.html">Tools Menu Item 5</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>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Help Menu Item 3</a>
</div>
&nbsp;</td></tr>
<tr><td>
<select name="liste" style="z-index: 0">
<option value'lydia'>lydia lydia lydia lydia lydia</option></select>
</td></tr>
</table>
<iframe style="z-index: 1;position:absolute;display:none;" id="ifr"></iframe>
</body>
</html>

Ich würde das Menü noch so ändern, daß auch bei deaktiviertem JS eine Navigation vorhanden ist! Außerdem errechnet IE so wie das Script damit umgeht die Position der Untermenüs falsch. Aber immerhin weißte jetzt, wie das mit dem iframe und dem select geht.

Ahoi - Pit

Lydia.h · registriert: 25-07-2005

Hallo Pit,

super-herzlich-vielen Dank für die Umsetzung.
Technisch habe ich es verstanden, aber als ich das in mein bestehendes Menü einbauen wollte, funktionierte dieses plötzlich nicht mehr.

Hätte ich doch gleich einen Fachmann gefragt :-)

Nicht so schlimm, ich werde Dein Menü nehmen und meine Anpassungen übertragen.

Nochmals vielen Dank!

Lieben Gruß
Lydia.

**AW: Defektes (?) Menü -** 17-09-2005, 18:43

Moin!

Gern geschehen. Wo ist der Kaffee und wo sind die Kekse??

(Brauch ich aber nich im Ernst: trinke gerade ein Feierabend-Bier).

Gruß - Pit

Lydia.h · registriert: 25-07-2005

Hallo Pit,

ich bins nochmal, wollte nur kurz 'ne Rückmeldung machen: Habe mir das Script angeschaut und das meiste verstanden. Werde wohl auch in der Lage sein, die falsch berechnete Position im IE zu korrigieren.

Nur das mit der Version "ohne Javascript" habe ich von Dir nicht ganz verstanden. Inhaltlich schon, aber layouttechnisch läßt sich das doch garnicht umsetzen?

Liebe Grüße
Lydia.

**AW: Defektes (?) Menü -** 19-09-2005, 15:46

Hi!

Zitat:

Zitat von Lydia.h

Nur das mit der Version "ohne Javascript" habe ich von Dir nicht ganz verstanden. Inhaltlich schon, aber layouttechnisch läßt sich das doch garnicht umsetzen?

Wenn jemand die Seite(n) besucht und kein JS am Start hat, was ist dann wichtiger? Das Vorhandensein der Möglichkeit zu navigieren oder das Layout?

Gruß - Pit

Lydia.h · registriert: 25-07-2005

Das fragst Du ein Mädchen? ts,ts, natürlich das LAYOUT! hihi.
Nein, im Ernst, da es sich hier um eine interne Verwaltung handelt (ich glaube, man nennt es CMS) und die User alle bekannt sind, ist eine Alternative zu dem Menü nicht nötig.

Besten Dank aber dennoch für den Hinweis!

Lydia.

PS: Sorry, dass ich manchmal so spät antworte, aber ich bekomme keine Mails von diesem Forum?!?!?!

Lieben Gruß
Ly.

Zitat:

Zitat von pit-r

Hi!Wenn jemand die Seite(n) besucht und kein JS am Start hat, was ist dann wichtiger? Das Vorhandensein der Möglichkeit zu navigieren oder das Layout?

Gruß - Pit

**AW: Defektes (?) Menü -** 22-09-2005, 11:23

Hi!

Zitat:

Zitat von Lydia.h

PS: Sorry, dass ich manchmal so spät antworte, aber ich bekomme keine Mails von diesem Forum?!?!?!

Im Benutzerkontrollzentrum => Einstellungen => E-Mails, Private Nachrichten & Benachrichtigungen => Themen abonnieren kannst Du festlegen, ob und wie Du über Posts informiert wirst.

Gruß - Pit

Lydia.h · registriert: 25-07-2005

Hallo Pit,

ein blindes Hähnchen findet auch ein Körnchen, wenns der Pit einem vor die Füße wirft! Sorry, ich habe echt mehrmals da rein gekuckt und es nicht gesehen.
Jetzt läufts :-)

Besten Dank.
Ly.