Hjälp att förbättra min meny

8 svar · 354 visningar · startad av Zune 19 okt. 2004

ZuneMedlem sedan okt. 200410 inlägg

Frågan19 okt. 2004 16:50#1

Undrar om det finns någon som kan hjälpa mig att förbättra min kod till min meny.
Den är inte så stor nu men den kommer att bli väldigt stor när den är färdig, med flera under menyer efter varandra.
Så den kod jag använder till att stänga de meny alt. som inte ska visas kommer att bli lång "med betoning på lång".
Det jag önskar är att lösa det på ett smidigare sätt.

Zune

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Ny sida 1</title>
<script type="text/javascript" language="JavaScript"> 
<!-- 
function show(id) 
{ 
   if(document.getElementById){ 
      var obj = document.getElementById(id); 
   } else if(document.all){ 
      var obj = document.all(id); 
   } 

   if(obj.style.display == 'none'){ 
      obj.style.display = ''; 
   } else{ 
      obj.style.display = 'none'; 
   } 
} 
//---
function hide(id) 
{ 
   if(document.getElementById){ 
      var obj = document.getElementById(id); 
   } else if(document.all){ 
      var obj = document.all(id); 
   } 
if(obj.style.display == 'none')
{ 
      obj.style.display = 'none'; 
   } else{ 
      obj.style.display = 'none'; 
   } 
} 
//--> 
</script> 

</head>

<body>

<!--meny 1 -->

<a href="#" onMouseDown="show('namn')"onMouseUp="hide('namn2'),hide('namn3'),hide('namn1_1')" >Meny huvud</a> 

<div id="namn" style="display: none"; >
<table border="0" width="155">
  <tr>
  <!-- sub 1-->
    <td width="100%"><a href="#" onClick="show('namn1_1')" onMouseUp="hide('namn2'),hide('namn3')" >Meny huvud1_1</a> 
    <div id="namn1_1" style="display: none;" >
    <table border="0" width="155">
    <tr>
    <td width="100%">&nbsp;Länk 1_1</td>
    </tr>
    <tr>
    <td width="100%">&nbsp;Länk 1_2</td>
    </tr>
    <tr>
    <td width="100%">&nbsp;Länk 1_3</td>
    </tr>
    </table>
    </div>
    <!-- slut sub 1-->
    </td>
  </tr>
  <tr>
    <td width="100%">Länk 2</td>
  </tr>
  <tr>
    <td width="100%">Länk 3</td>
  </tr>
</table>
</div>
<!-- slut meny 1 -->
<br>
<!--meny 2 -->
<a href="#" onMouseDown="show('namn2')" onMouseUp="hide('namn3'),hide('namn1_1'),hide('namn')" >Meny huvud 2</a> 

<div id="namn2" style="display: none;" >
<table border="0" width="155">
  <tr>
    <td width="100%">Länk 1</td>
  </tr>
  <tr>
    <td width="100%">Länk 2</td>
  </tr>
  <tr>
    <td width="100%">Länk 3</td>
  </tr>
</table>
</div>
<!--slut meny 2 -->
<br>
<!--meny 3 -->

<a href="#" onMouseDown="show('namn3')" onMouseUp="hide('namn2'),hide('namn1_1'),hide('namn')">Meny huvud 3</a> 

<div id="namn3" style="display: none;" >
<table border="0" width="155">
  <tr>
    <td width="100%">Länk 1</td>
  </tr>
  <tr>
    <td width="100%">Länk 2</td>
  </tr>
  <tr>
    <td width="100%">Länk 3</td>
  </tr>
</table>
</div>
<!--slut meny 3 -->
</body>

</html>

Peter SMedlem sedan dec. 20025 483 inlägg

20 okt. 2004 18:26#2

Utgår man från din befintliga kod skulle du kunna modifiera hide()-funktionen en aning, genom att tillåta multipla argument att skickas med i funktionsanropet; dessa argument är givetvis identifierarna för de element du vill gömma, d.v.s. hide('a1', 'a2', ...).

hide() skulle då kunna se ut enligt följande:

function hide() 
{ 
    var i = arguments.length;
    while (i--)
	(document.getElementById && 
	    (document.getElementById(arguments[i]).style.display = "none")) || 
		(document.all && 
		    (document.all[arguments[i]].style.display = "none"));
}

Exempel på anrop:

<a href="#" onMouseDown="show('namn')"onMouseUp="hide('namn2','namn3','namn1_1')" >Meny huvud</a>

Kan även passa på att säga att då flera sekventiella funktionsanrop sker, separeras dessa med ett semikolon, ej kommatecken.

ZuneMedlem sedan okt. 200410 inlägg

20 okt. 2004 19:49#3

Tack för svaret!
Det fungerar inte riktigt bra, när jag har meny 3 öppen och klickar på meny 1 så stängs inte meny 3. Kan det vara för att i anropet står namn2 före namn3?
Kan man inte göra så att alla menyer stängs utom den som man klickat på?

Zune

dectgapMedlem sedan sep. 20021 655 inlägg

20 okt. 2004 20:40#4

Zune skrev:

Tack för svaret!
Det fungerar inte riktigt bra, när jag har meny 3 öppen och klickar på meny 1 så stängs inte meny 3. Kan det vara för att i anropet står namn2 före namn3?
Kan man inte göra så att alla menyer stängs utom den som man klickat på?

Zune

Det blir betydligt enklare (och snyggare) om du låter ett JavaScript sköta den hanteringen, d.v.s. hålla reda på vilka menyer som ska öppnas och stängas vid vilka tillfällen.

Jag har gjort ett sådant skript, som du kanske kan få använding av:
http://roslund.homeip.net/mattias/tester/jsmeny2.html
Jag har tänkt skriva om koden vid tillfälle, men tillfälle har ännu inte dykt upp.

ZuneMedlem sedan okt. 200410 inlägg

20 okt. 2004 21:12#5

Har kollat ditt script tidigare men gillar inte storleken på filen,
är 20kb utan länkar
Skulle tro att det blir ett hundra tal länkar(kanske mer) och ganska många submenyer då blir filen lite väl stor skulle jag tro?

Zune

dectgapMedlem sedan sep. 20021 655 inlägg

20 okt. 2004 21:16#6

Zune skrev:

Har kollat ditt script tidigare men gillar inte storleken på filen,
är 20kb utan länkar
Skulle tro att det blir ett hundra tal länkar(kanske mer) och ganska många submenyer då blir filen lite väl stor skulle jag tro?

Zune

Nu vet jag inte riktigt vad du talar om.
Filen jag länkade till är, inklusive CSS-kod, 5kb stor.
JavaScript-koden lägger du i en extern fil som du länkar in, så att den bara behöver hämtas en gång.
CSS-koden kan du strunta i om du vill, men bäst vore det om du ändrade den så att den passar just dig.
HTML-koden blir väldigt enkel, eftersom man bara skapar oordnade listor med rubriker och länkar.

ZuneMedlem sedan okt. 200410 inlägg

20 okt. 2004 21:20#7

Då blev det nog inte som det du tänkt.
Jag stoppade in all kod i samma fil inkusive länkar då blev den lite stor!
Zune

ZuneMedlem sedan okt. 200410 inlägg

23 okt. 2004 10:06#8

Pinsamt :r :r
dectgap
Det var inte ditt skript som var 20kb det var ett annat!
ska kolla lite mera på ditt skript nu i helgen.

Zune

ZuneMedlem sedan okt. 200410 inlägg

2 nov. 2004 23:19#9

Det blev ditt menyscript dectgap!
Det fungerar kalas :bire

Zune