Hallo Leute,
ich gestehe ich habe ganz wenig Ahnung,
Also meine Frage ich benutze NOF 10 und möchte jetzt in meiner Seite ein Script
einfügen , aber irgendwie sind mir die Ideen ausgegangen wie das so geht.
Nun hoffe ich das hier die Profies weiterhelfen können
Sript
PHP-Code:
<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 [url=http://www.brainjar.com]BrainJar.com: Experiments in Web Programming[/url] 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>
Lesezeichen