Menubjælke i java - vandret
Jeg søger med lys og lygte et script til en menubjælke i java script.Men ikke bare et hvilket som helst!
Bjælken skal være vandret og havde 7 menuer i en bredde af 129 pxl. (logoet er 900 pxl)
Disse menuer skal så have en række under menuer.
Når musen rammer menu ’boks’ skal tekst og farve på ’menu’ skifte og i samme moment skal den lave en dropdown således man kan se undermenuerne. Disse skal naturligvis også skifte farve i både tekst og menu når musen rører ’undermenuen’
Men her stopper mit problem ikke. For denne funktion har jeg teoretisk på plads. Mit problem er at jeg vil have det centeret, uden at skulle spekulere i hvilke skræm opløsning folk benytter!
Som jeg har det nu skal jeg i gang med et større regne stykke i det som jeg har fået det stykket sammen (se nedenunder) er den sat til at starte i henhold til pxl afstand til venstre side… Og det er lidt noget hø. (dette er kun en test – med 5 menuer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>Demoside</title>
<meta name="robots" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css" media="screen">
<!--
div#menubox {
position:absolute;
top:20px;
left:20px;
}
.topmenu {
position:absolute;
z-index:99;
}
.submenu {
position:absolute;
z-index:99;
display:none;
}
#topmenu1{
left:10px;
top:10px;
}
#topmenu2{
left:145px;
top:10px;
}
#topmenu3{
left:280px;
top:10px;
}
#topmenu4{
left:415px;
top:10px;
}
#topmenu5{
left:550px;
top:10px;
}
a.knap {
z-index:99;
background-color: #900;
color:#fff;
display: block;
font: normal bold 12px arial, helvetica, sans-serif;
text-align: left;
text-decoration: none;
margin-bottom:1px;
border:2px outset #d00;
border-top-color:#ff6600;
border-left-color:#ff6600;
border-right-color:#990000;
border-bottom-color:#990000;
padding: 2px 12px 2px 12px;
width:130px;
height:22px;
}
html>body .knap {
width:102px;
height:14px;
}
.knap:hover {
background-color: #cc0000;
color: #fff;
text-decoration: none;
border-style: inset;
border-top-color:#990000;
border-left-color:#990000;
border-right-color:#ff6600;
border-bottom-color:#ff6600;
}
-->
</style>
<script type="text/javascript">
<!--
function collapseObjekt(objekt){
var blok = document.getElementById(objekt).style;
blok.display="none"
}
function expand(objekt,onoff){
skjulAlle();
var blok = document.getElementById(objekt).style;
if (onoff==true)
blok.display=(onoff) ? "block" : "none"
}
function skjulAlle(){
for (nr=1;nr<6;nr++)
collapseObjekt('menu'+nr)
}
//-->
</script>
</head>
<body>
<div id="menubox">
<div class="topmenu" onmouseover="expand('menu1',true)" onmouseout="skjulAlle()" id="topmenu1"><a class="knap" href="blank.php">test1</a>
<div class="submenu" id="menu1">
<div><a class="knap" href="blank.php">test2</a></div>
<div><a class="knap" href="blank.php">test3</a></div>
<div><a class="knap" href="blank.php">test4</a></div>
</div>
</div>
<div class="topmenu" onmouseover="expand('menu2',true)" onmouseout="skjulAlle()" id="topmenu2"><a class="knap" href="java script:void(null)">test5</a>
<div class="submenu" id="menu2">
<div><a class="knap" href="blank.php">test6</a></div>
<div><a class="knap" href="blank.php">test7</a></div>
<div><a class="knap" href="blank.php">test8</a></div>
<div><a class="knap" href="blank.php">test9</a></div>
</div>
</div>
<div class="topmenu" onmouseover="expand('menu3',true)" onmouseout="skjulAlle()" id="topmenu3"><a class="knap" href="java script:void(null)">test10</a>
<div class="submenu" id="menu3">
<div><a class="knap" href="blank.php">test11</a></div>
<div><a class="knap" href="blank.php">test12</a></div>
<div><a class="knap" href="blank.php">test13</a></div>
</div>
</div>
<div class="topmenu" onmouseover="expand('menu4',true)" onmouseout="skjulAlle()" id="topmenu4"><a class="knap" href="java script:void(null)">test14</a>
<div class="submenu" id="menu4">
<div><a class="knap" href="blank.php">test15</a></div>
<div><a class="knap" href="blank.php">test16</a></div>
<div><a class="knap" href="blank.php">test17</a></div>
<div><a class="knap" href="blank.php">test18</a></div>
<div><a class="knap" href="blank.php">test19</a></div>
</div>
</div>
<div class="topmenu" onmouseover="expand('menu5',true)" onmouseout="skjulAlle()" id="topmenu5"><a class="knap" href="java script:void(null)">tester28</a>
<div class="submenu" id="menu5">
<div><a class="knap" href="blank.php">test20</a></div>
<div><a class="knap" href="blank.php">test21</a></div>
<div><a class="knap" href="blank.php">test22</a></div>
<div><a class="knap" href="blank.php">test23</a></div>
</div>
</div>
</div>
</body>
</html>
Hvis nogen kan lose mit problem er der ikke mindre end 100 point til den dygtige!
//Alvira
