Menyfråga

2 svar · 257 visningar · startad av Obbelix 23 juni 2004

ObbelixMedlem sedan okt. 2002257 inlägg

Frågan23 juni 2004 16:05#1

Hej.

Jag har nedanstående meny i en egen frame.
Jag har kommit så långt att mouseover/out/click funkar som jag vill.
MEN, jag vill att när sidan laddas ska det översta menyvalet vara markerat (class menutext2) samt att när man klickar på ett menyval som redan är markerad ska den inte avmarkeras (som det görs nu).
Har testat med att sätta className=menutext2 på det översta menyvalet i body onload, men då avmakeras inte det när man klickar på ett annat val.

Skulle det gå att fixa med funktioner istället? så det inte blir så mycket kod på varje td rad? Kanske onödigt, men koden skulle se snyggare ut.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Meny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.menutext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	text-indent: 10px;
	cursor: Hand;
}
.menutext1 {
	border-width: 1px; 
	border-style: dashed; 
	border-color: #2F99E8;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	text-indent: 9px;
	cursor: Hand;
}
.menutext2 {
	background-color: #2F99E8;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	text-indent: 10px;
	cursor: Hand;
}
.menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	text-indent: 10px;
}
</style>
<script language="JavaScript" type="text/javascript">
active=false;
</script>
</head>
<body bgcolor="#EAEAEA" topmargin="10" leftmargin="10" rightmargin="0" bottommargin="0">
 <table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="135">
  <tr>
   <td class="menu">&nbsp;</td>
  </tr>
  <tr>
   <td width="135" height="20" valign="middle" onMouseover="if(this!=active){this.className='menutext1'};" onMouseout="if(this!=active){ this.className='menutext' }" onClick="if(active){ active.className='menutext' }; if(this!=active){this.className='menutext2'}; active=this; location='#';" class="menutext" >Meny 1</td>
  </tr>
  <tr>
   <td width="135" height="20" valign="middle" onMouseover="if(this!=active){this.className='menutext1'};" onMouseout="if(this!=active){ this.className='menutext' }" onClick="if(active){ active.className='menutext' }; if(this!=active){this.className='menutext2'}; active=this; location='#';" class="menutext">Meny 2</td>
  </tr>
  <tr>
   <td width="135" height="20" valign="middle" onMouseover="if(this!=active){this.className='menutext1'};" onMouseout="if(this!=active){ this.className='menutext' }" onClick="if(active){ active.className='menutext' }; if(this!=active){this.className='menutext2'}; active=this; location='#';" class="menutext">Meny 3</td>
  </tr>
  <tr>
   <td width="135" height="20" valign="middle" onMouseover="if(this!=active){this.className='menutext1'};" onMouseout="if(this!=active){ this.className='menutext' }" onClick="if(active){ active.className='menutext' }; if(this!=active){this.className='menutext2'}; active=this; location='#';" class="menutext">Meny 4</td>
  </tr>
  <tr>
   <td width="135" height="20" valign="middle" onMouseover="if(this!=active){this.className='menutext1'};" onMouseout="if(this!=active){ this.className='menutext' }" onClick="if(active){ active.className='menutext' }; if(this!=active){this.className='menutext2'}; active=this; location='#';" class="menutext">Meny 5</td>
  </tr>
  <tr>
   <td width="135" height="20" valign="middle" onMouseover="if(this!=active){this.className='menutext1'};" onMouseout="if(this!=active){ this.className='menutext' }" onClick="if(active){ active.className='menutext' }; if(this!=active){this.className='menutext2'}; active=this; location='#';" class="menutext">Meny 6</td>
  </tr>
  <tr>
   <td class="menu">&nbsp;</td>
  </tr>
 </table>
 </body>
</html>

Har i koden ovan ersatt länkarna med #, så den är inget problem.

Tack på förhand!

Jesper TMedlem sedan nov. 20017 144 inlägg

24 juni 2004 08:07#2

Tog bort tabellen också. du kanske ville ha den..?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Meny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,html{
background:#EAEAEA;
margin:10px 0 0 10px;
}
.menutext {
    padding:2px 0 0 10px;
	border:1px solid #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	cursor: pointer;
	height:20px;
}
.menutext1 {
    padding:2px 0 0 10px;
	border:1px dashed #2F99E8;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	cursor: pointer;
	height:20px;
}
.menutext2 {
    padding:2px 0 0 10px;
	background:#2F99E8;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	cursor: pointer;
	height:20px;
}
.menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	width:135px;
	background:#ffffff;
	padding:1px;
}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
var active = false;
function mover(que){
	var id = document.getElementById(que);
		if(id!=active){id.className='menutext1'};
};
function mout(que){
	var id = document.getElementById(que);
		if(id!=active){id.className='menutext'}
};
function oclick(que){
	var id = document.getElementById(que);
		if(active){ active.className='menutext'; active=false;}; 
			if(id!=active){id.className='menutext2'}; 
			active=id; 
			var location='#';
};
window.onload=function(){oclick('m1')};
//-->
</script>
</head>
<body>

<div class="menu">

   <div id="m1" onMouseover="mover(this.id)" onMouseout="mout(this.id)" onClick="oclick(this.id)" class="menutext">Meny 1</div>
   <div id="m2" onMouseover="mover(this.id)" onMouseout="mout(this.id)" onClick="oclick(this.id)" class="menutext">Meny 2</div>
   <div id="m3" onMouseover="mover(this.id)" onMouseout="mout(this.id)" onClick="oclick(this.id)" class="menutext">Meny 3</div>
   <div id="m4" onMouseover="mover(this.id)" onMouseout="mout(this.id)" onClick="oclick(this.id)" class="menutext">Meny 4</div>
   <div id="m5" onMouseover="mover(this.id)" onMouseout="mout(this.id)" onClick="oclick(this.id)" class="menutext">Meny 5</div>
   <div id="m6" onMouseover="mover(this.id)" onMouseout="mout(this.id)" onClick="oclick(this.id)" class="menutext">Meny 6</div>

</div>

 </body>
</html>

ObbelixMedlem sedan okt. 2002257 inlägg

24 juni 2004 16:36#3

Funkar klockrent!

Tack!