怎么做IE菜单的效果？？

cokeyang 2003-09-18 07:39:23

就是IE上面的文件编辑什么的！就像一些在线的html编辑器的按钮！！鼠标放上去会产生凸起的效果！
我感觉是用表格产生凸起效果！

怎么弄呀！弄了半天没有弄好！
谢谢大家了！

...全文

44 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

hcsunjun 2003-09-18

打赏
举报

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

hcsunjun 2003-09-18

打赏
举报

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