Farver i java-menu
Hvem kan hjælpe med at rette følgende menu til ? Jeg er ved at finpude en javamenu - men kan ikke rigtig finde ud af hvad der er hvad i menuen - Nogle af farvekoderne er det lykkedes mig at finde ud af hvor hører hjemme - men andre kniber det med ! Disse er markeret med ????? Hvis det er muligt vil jeg også gerne have en forklaring på de øvrige menulinier ?<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu prøve</title>
<base target="hovedramme">
<style type="text/css">
body {
margin: 0px;
}
#menuBar {
background-color: #CCCCFF // ????
border-style: solid;
border-width: 0px;
border-top-color: #FF0000 //????
border-top-width: 0px;
border-bottom-color: black; //????
border-bottom-width: 1px;
color: #CCCCFF; //?????
padding: 1px;
padding-top: 2px;
padding-bottom: 2px;
position: absolute;
left: 270px;
top: 0px;
text-align: left;
width: 100%;
z-index: 100;
}
a.menuButton, a.menuButtonActive {
border-style: solid;
border-width: 0px;
border-color: #c0c0c0;
color: #3333FF; //farve på overmenuens fonte inden museklik
cursor: hand;
font-family: "MS Sans Serif", Arial, Tahoma, sans-serif;
font-size: 10pt; //størrelse på overmenuens fonte
font-style: solid;
font-weight: solid;
padding: 2px;
padding-left: 6px;
padding-right: 6px;
position: relative;
left: 0px;
top: 0px;
text-decoration: none;
}
a.menuButton:hover {
border-color: #3333FF #3333FF #3333FF #3333FF; //?????
color: #3333FF //????
}
a.menuButtonActive, a.menuButtonActive:hover {
background-color: #0000FF; //menulinie-kassens farve ved mouseover efter klik***
border-color: #3333FF #3333FF #3333FF #3333FF; //????
color: #FFFFFF; //skriftfarve i menulinie-kasse efter mouseover
left: 1px;
top: 1px;
}
.menu {
background-color: #CCCCFF; //baggrund for undermenu
border-style: solid;
border-width: 0px;
border-top-color: #f0f0f0; //????
border-right-color: #909090; //????
border-bottom-color: #e4d8af; //????
border-left-color: #f0f0f0; //????
padding: 0px;
position: absolute;
text-align: left;
visibility: hidden;
z-index: 101;
}
a.menuItem {
color: #3333FF; //farve på undermenu-punkter - sort
cursor: Hand;
display: block;
font-family: "MS Sans Serif", Arial, Tahoma,sans-serif;
font-size: 10pt; //størrelse på undermenu-punkter
font-style: solid;
font-weight: solid;
margin: 0px;
padding: 2px;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
white-space: nowrap;
}
a.menuItem:hover {
background-color: #3399FF; //undermenu-kassens farve ved mouseover efter klik
border-color: #3333FF #3333FF #3333FF #3333FF; //????
color: #FFFFFF; //skriftfarve
}
.menuItemSep {
border-bottom: 1px solid #f0f0f0; //????
border-top: 1px solid #909090; //????
margin: 3px 2px 3px 2px;
}
</style>
<script type="text/javascript">
// Determine browser and version. Script works for IE 5.5+ and NS 6.0+
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;
}
}
var browser = new Browser();
// For IE, adjust menu bar styling.
if (browser.isIE) {
document.styleSheets[document.styleSheets.length - 1].addRule("#menuBar", "padding-top:4px");
document.styleSheets[document.styleSheets.length - 1].addRule("#menuBar", "padding-bottom:3px");
}
// 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 className;
// If the object clicked on was not a menu button or item, close any
// active menu.
if (browser.isIE)
className = window.event.srcElement.className;
if (browser.isNS)
className = (event.target.className ?
event.target.className : event.target.parentNode.className);
if (className != "menuButton" && className != "menuItem" &&
className != "menuItemSep" && activeButton)
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 || (browser.isNS && browser.version >= 6.1))
y += 2;
if (browser.isNS && browser.version < 6.1) {
x--;
y--;
}
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 stylesrc="forside.htm">
</body>
<!-- Tags for the menu bar. -->
<div id="menuBar" style="width: 664; height: 36"
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'Menu1');"
onmouseover="buttonMouseover(this, 'Menu1');"
>Menu1</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'Menu2');"
onmouseover="buttonMouseover(this, 'Menu2');"
> Menu2</a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'Menu3');"
onmouseover="buttonMouseover(this, 'Menu3');"
> Menu3 </a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'Menu4');"
onmouseover="buttonMouseover(this, 'Menu4');"
>Menu4 </a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'Menu5');"
onmouseover="buttonMouseover(this, 'Menu5');"
>Menu5 </a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'Menu6');"
onmouseover="buttonMouseover(this, 'Menu6');"
>Menu6 </a
><a class="menuButton"
href=""
onclick="return buttonClick(this, 'Menu7');"
onmouseover="buttonMouseover(this, 'Menu7');"
> Menu7</a
></div>
<!-- Tags for the drop down menus. -->
<div id="menu1" class="menu">
<a class="menuItem" target="hovedramme" href="menu1-1.htm">Punkt1</a>
<a class="menuItem" target="hovedramme" href="menu1-2.htm">Punkt2</a>
<a class="menuItem" target="hovedramme" href="menu1-3.htm">Punkt3</a>
</div>
<div id="Menu2" class="menu">
<a class="menuItem" target="hovedramme" href="Menu2-1.htm">Punkt1</a>
<a class="menuItem" target="hovedramme" href="Menu2-2.htm">Punkt2</a>
<a class="menuItem" target="hovedramme" href="Menu2-3.htm">Punkt3</a>
<a class="menuItem" target="hovedramme" href="Menu2-4.htm">Punkt4</a>
</div>
<div id="Menu3" class="menu">
<a class="menuItem" target="hovedramme" href="Menu3-1.htm">Punkt1</a>
<a class="menuItem" target="hovedramme" href="Menu3-2.htm">Punkt2</a>
<a class="menuItem" target="hovedramme" href="Menu3-3.htm">Punkt3</a>
<a class="menuItem" target="hovedramme" href="Menu3-4.htm">Punkt4</a>
</div>
<div id="Menu4" class="menu">
<a class="menuItem" target="hovedramme" href="Menu4-1.htm">Punkt1</a>
<a class="menuItem" target="hovedramme" href="Menu4-2.htm">Punkt2</a>
<a class="menuItem" target="hovedramme" href="Menu4-3.htm">Punkt3</a>
<a class="menuItem" target="hovedramme" href="Menu4-4.htm">Punkt4</a>
</div>
<div id="Menu5" class="menu">
<a class="menuItem" target="hovedramme" href="Menu5-1.htm">Punkt1</a>
<a class="menuItem" target="hovedramme" href="Menu5-2.htm">Punkt2</a>
<a class="menuItem" target="hovedramme" href="Menu5-3.htm">Punkt3</a>
<a class="menuItem" target="hovedramme" href="Menu5-4.htm">Punkt4</a>
</div>
<div id="Menu6" class="menu">
<a class="menuItem" target="hovedramme" href="Menu6-1.htm">Punkt1</a>
<a class="menuItem" target="hovedramme" href="Menu6-2.htm">Punkt2</a>
<a class="menuItem" target="hovedramme" href="Menu6-3.htm">Punkt3</a>
</div>
<div id="Menu7" class="menu">
<a class="menuItem" target="hovedramme" href="Menu7-1.htm">Punkt1</a>
<a class="menuItem" target="hovedramme" href="Menu7-2.htm">Punkt1</a>
</div>
<p align="center">
</p>
<p align="center">
</p>
</html>
