Avatar billede cjannic Nybegynder
05. marts 2002 - 10:18 Der er 2 kommentarer og
1 løsning

farver i javamenu ???

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');"
>&nbsp;&nbsp; Menu2</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'Menu3');"
    onmouseover="buttonMouseover(this, 'Menu3');"
>&nbsp;&nbsp; Menu3&nbsp;&nbsp; </a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'Menu4');"
    onmouseover="buttonMouseover(this, 'Menu4');"
>Menu4&nbsp;&nbsp;&nbsp; </a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'Menu5');"
    onmouseover="buttonMouseover(this, 'Menu5');"
>Menu5&nbsp;&nbsp; </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');"
>&nbsp;&nbsp; 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">
&nbsp;</p>


<p align="center">
&nbsp;</p>


</html>

Avatar billede logical Nybegynder
05. marts 2002 - 10:19 #1
Prøv i javascript gruppen istedet.
Avatar billede anjensen1 Novice
05. marts 2002 - 13:02 #2
Husk venligst at lukke dette spørgsmål HER
mvh a.
Avatar billede cjannic Nybegynder
05. marts 2002 - 16:29 #3
Det prøver jeg ! Spørgsmålet lukkes her og oprettes under java-script
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester