YodaMedlem sedan nov. 2002291 inläggFrågan#1 Jag har en meny på min sida som ligger längst upp på sidan, vågrät. Från den ska det sedan droppa ner undermenyer.
Jag vet inte riktigt hur jag löser detta i js, vet ni?
Här är min meny:
<div id = "menu">
<table>
<tr>
<td width = "100"><a href = "menu_c.php" onClick = "menu()">Kurser</a></td>
<td width = "110"><a href = "menu_s.php">Student</a></td>
<td width = "130"><a href = "menu_u.php">Skolan</a></td>
<td width = "150"><a href = "menu_w.php">Webbkameror</a></td>
<td width = "100"><a href = "menu_k.php">Staden</a></td>
</tr>
</table>
</div>
När man klickar på länken i menyn ska det droppa ner en undermeny och då har jag satt onClick, det är väl rätt så långt?
De länkar som trillar ner under kurser har jag lagt i ett lager i css:en:
#menu_c
{
z-index: 4;
border: 1px solid black;
background: #1f2170;
color: white;
font-weight: bold;
position: absolute;
top: 181px;
left: 25px;
width: 100px;
padding: 10px;
}
Men vad ska funktionen menu() innehålla undrar jag. Jag är ingen höjdare på javascript så är det någon som har lite tips?
Tackar på förhand!
Jesper TMedlem sedan nov. 20017 144 inläggLite dom a lá jojoxx kanske:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jojoxx.net DHTML</title>
<style type="text/css">
<!--
.menu_c
{
z-index: 4;
border: 1px solid black;
background: #1f2170;
color: white;
font-weight: bold;
top: 181px;
left: 25px;
width: 100px;
padding: 10px;
}
-->
</style>
</head>
<body onLoad="initmenu();">
<br>
<div align="center">
<!-- Detta exempel inkluderar även eventet onLoad i body-taggen ovan -->
<script language="JavaScript">
var currentMenu=false;
var menues=new Array('sub1');
function sw(mnu,mode){
if(mode){
if(currentMenu){
if(currentMenu==mnu){changeStyle(mnu,'display','none');currentMenu=false;}else{changeStyle(currentMenu,'display','none');changeStyle(mnu,'display','block');currentMenu=mnu;}
} else {
changeStyle(mnu,'display','block');currentMenu=mnu;
}
} else if (document.getElementById) {
document.getElementById(mnu).style.display=(document.getElementById(mnu).style.display=='block')?'none':'block';
}
}
function changeStyle(Id,Property,Value){
if (document.all){
eval('document.all[Id].style.'+Property+'="'+Value+'"');
} else if (document.layers){
eval('document.layers[Id].'+Property+'="'+Value+'"');
} else if (document.getElementById){
eval('document.getElementById(Id).style.'+Property+'="'+Value+'"');
}
}
function initmenu(){
for(var n=0;n<menues.length;n++){
changeStyle(menues[n],'display','none');
}
}
</script>
<div id = "menu">
<table>
<tr>
<td width = "100" valign="top"><a href = "#" onClick = "sw('sub1')">Kurser</a><div id="sub1" class="menu_c"><a href="#">Val 1</a><br><a href="#">Val 2</a><br><a href="#">Val 3</a></div></td>
<td width = "110" valign="top"><a href = "menu_s.php">Student</a></td>
<td width = "130" valign="top"><a href = "menu_u.php">Skolan</a></td>
<td width = "150" valign="top"><a href = "menu_w.php">Webbkameror</a></td>
<td width = "100" valign="top"><a href = "menu_k.php">Staden</a></td>
</tr>
</table>
</div>
<!-- Här slutar exemplet -->
</div>
</body>
</html>
SsilfverMedlem sedan apr. 200312 679 inlägg
Jesper T skrev:
Lite dom a lá jojoxx kanske:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jojoxx.net DHTML</title>
<style type="text/css">
<!--
.menu_c
{
z-index: 4;
border: 1px solid black;
background: #1f2170;
color: white;
font-weight: bold;
top: 181px;
left: 25px;
width: 100px;
padding: 10px;
}
-->
</style>
</head>
<body onLoad="initmenu();">
<br>
<div align="center">
<!-- Detta exempel inkluderar även eventet onLoad i body-taggen ovan -->
<script language="JavaScript">
var currentMenu=false;
var menues=new Array('sub1');
function sw(mnu,mode){
if(mode){
if(currentMenu){
if(currentMenu==mnu){changeStyle(mnu,'display','none');currentMenu=false;}else{changeStyle(currentMenu,'display','none');changeStyle(mnu,'display','block');currentMenu=mnu;}
} else {
changeStyle(mnu,'display','block');currentMenu=mnu;
}
} else if (document.getElementById) {
document.getElementById(mnu).style.display=(document.getElementById(mnu).style.display=='block')?'none':'block';
}
}
function changeStyle(Id,Property,Value){
if (document.all){
eval('document.all[Id].style.'+Property+'="'+Value+'"');
} else if (document.layers){
eval('document.layers[Id].'+Property+'="'+Value+'"');
} else if (document.getElementById){
eval('document.getElementById(Id).style.'+Property+'="'+Value+'"');
}
}
function initmenu(){
for(var n=0;n<menues.length;n++){
changeStyle(menues[n],'display','none');
}
}
</script>
<div id = "menu">
<table>
<tr>
<td width = "100" valign="top"><a href = "#" onClick = "sw('sub1')">Kurser</a><div id="sub1" class="menu_c"><a href="#">Val 1</a><br><a href="#">Val 2</a><br><a href="#">Val 3</a></div></td>
<td width = "110" valign="top"><a href = "menu_s.php">Student</a></td>
<td width = "130" valign="top"><a href = "menu_u.php">Skolan</a></td>
<td width = "150" valign="top"><a href = "menu_w.php">Webbkameror</a></td>
<td width = "100" valign="top"><a href = "menu_k.php">Staden</a></td>
</tr>
</table>
</div>
<!-- Här slutar exemplet -->
</div>
</body>
</html>
Hum, det där funkar inte för mig :(.
Jesper TMedlem sedan nov. 20017 144 inlägg Om något inte fungerar - Beskriv felet.
Ok, det hade blivit några ofrivilliga radbrytningar. Raderna i javascriptet som börjar .
if(currentMenu==mnu){
skall vara sammansatt(på en rad)
Jesper TMedlem sedan nov. 20017 144 inlägg Eventuellt lite O.T. men jag har försökt att få in den raden i ett [kod]-block, men raden bryts ändå. Varför?
