怎么做IE菜单的效果？？

好象是用JavaScript翻转图来实现:一张普通的按钮,一张凸起的按钮,然后再加函数...
<html>
<head>
<title>BrainJar.com: Menu Bar Demo</title>
<link href="/common/default.css" rel="stylesheet" type="text/css">
<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">// 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>
</head>
<body><div id="demoBox"><h3>Menu Bar Demo</h3><p>This page contains all the code necessary to create a menu bar. Use your
browser's <code>View Source</code> option to see the full source code.</p><p>Note the last item link in the "Edit" menu. It opens a page in a new browser
window and uses an <code>onclick</code> event to deactivate the menu when
clicked.</p><p class="footer"><a href="" onclick="window=null;window.close()">Close</a></p></div><p/><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><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></body>
</html>

调试易

怎么做IE菜单的效果？？

解决方案 »