Avatar billede scarlett Nybegynder
11. juni 2004 - 02:51 Der er 6 kommentarer og
1 løsning

oprettelse af ekstern menu fil

Jeg er ved at lave en hjemmeside til vores rideklub, men er løbet ind i problemer med menuen. Den funger optimalt, men koderne til den er på alle siderne og det er derfor uoverskuligt når der skal tilføjes nye sider.
Mit spørgsmål er så om det er muligt at lave en ekstern fil til menuen, så jeg kun skal redigerer et sted.

Sidens opbygning ser således ud.

<html>

<head>
<script type="text/javascript">
var ver3 = (navigator.appVersion.charAt(0) <= "3") ?     true : false;
var dom = (document.getElementById) ?     true : false;
var ie4 = (document.all && !document.getElementById) ?     true : false;
var ns4 = (document.layers) ?     true : false;
var ie5 = (document.all && document.getElementById) ?     true : false;
var n6 = (document.getElementById && !document.all) ?  true : false;
var msie = (document.all) ?true:false;

function findObjekt(objekt) {
var blok;
      if (dom)
            blok = document.getElementById(objekt).style;
      else
    if (ie4)
            blok = document.all[objekt].style;
      else
    if (ns4)
            blok = document.layers[objekt];
      return blok;
}

function expand(objekt){
var blok = findObjekt(objekt);
blok.display="block"
}

function expandInline(objekt){
var blok = findObjekt(objekt);
blok.display="inline"
}

function collapse(objekt){
var blok = findObjekt(objekt);
blok.display="none"
}

function visMenu(objekt,onoff){
skjulAlle();
    var blok = findObjekt(objekt);
        blok.display=(onoff) ? "block" : "none";
}
function skjulAlle(){
    for (nr=1;nr<9;nr++)
        collapse('menu'+nr)
}
/*
function visTestMenu(objekt,onoff){
skjulAlle()
    var blok = findObjekt(objekt);
        blok.display=(onoff) ? "block" : "none";
}
function skjulAlle(){
    for (nr=1;nr<3;nr++)
        collapse('menu_'+nr)
}
*/
</script>

<meta http-equiv="Content-Type" content="text/html; harset=ISO-8859-1">

<title>Sallingsund-Hesteklub</title>

<link rel="stylesheet" type="text/css" href="start.css" />

<meta name="Description" content="En beskrivelse af siden">
<meta name="Keywords" content="søgeord1,søgeord2,søgeord3">
</head>

<body>
  <div id="logo">
    <img src="SH-Logo-hvid.gif" WIDTH="164" HEIGHT="83">
  </div>
 
<div id="banner">
    <h1>Sallingsund hesteklub</h1>
  </div>
 
<div id="leftcol">
<div id="mainMenu">
  <ul id="menuList">
   
<li class="menubar"><a href="java script:visMenu('menu1',true)">Hvem er vi</a>
<ul id="menu1" class="menu">
        <li><a href="profil.htm">Profil</a></li>
        </ul>
    </li>
   
<li class="menubar"><a href="java script:visMenu('menu2',true)">Hvor bor vi</a>
        <ul id="menu2" class="menu">
    <li><a href="Hvor%20bor%20vi.htm">Her bor vi</a></li>
      </ul>
    </li>
   
<li class="menubar"><a href="java script:visMenu('menu3',true)">Aktikviteter</a>
      <ul id="menu3" class="menu">
        <li><a href="sti%20fil">navn knap </a></li>
      </ul>
    </li>
   
<li class="menubar"><a href="java script:visMenu('menu4',true)">Undervisning</a>
    <ul id="menu4" class="menu">
        <li><a href="begyndere.htm">Begyndere</a></li>
      </ul>
    </li>
   
<li class="menubar"><a href="java script:visMenu('menu5',true)">Medlemmernes side</a>
  <ul id="menu5" class="menu">
        <li><a href="sti%20fil">navn knap </a></li>
      </ul>
    </li>
   
<li class="menubar"><a href="java script:visMenu('menu6',true)">Markedspladsen</a>
    <ul id="menu6" class="menu">
        <li><a href="til%20salg.htm">Til salg</a></li>
<li><a href="efterlyses.htm">Efterlyses</a></li>
      </ul>
    </li>
   
<li class="menubar"><a href="java script:visMenu('menu7',true)">Medlemskab og opstaldning</a>
  <ul id="menu7" class="menu">
        <li><a href="medlemskab.htm">Medlemskab</a></li>
<li><a href="opstaldning.htm">Opstaldning</a></li>
      </ul>
    </li>
   
<li class="menubar"><a href="java script:visMenu('menu8',true)">Kontakt</a>
<ul id="menu8" class="menu">
        <li><a href="sti%20fil">navn knap </a></li>
      </ul>
    </li>


</ul>
</div>

<div class="newsbox">
      <h3>Nyheder</h3>
      [ Aktuel meddelelse ]
    </div>
 
<div class="newsbox">
      [ Søgefelt ]
    </div>
  </div>
 
  <div id="indhold">
  <h1></h1>
<!--<div id="rightpane">    <div class="newsbox">        [ <h3>Aktuelle meddelelser</h3> ]        [ Boks til undermenu eller aktuel meddelelse ]      </div>      <div class="newsbox">        [ <h3>Eksemplerne</h3> ]        [ Kommentarboks inde i indholdskassen ]      </div>    </div>-->
 
<div id="manchet">

    </div>

   
<img src="forside.png" align="middle" hspace="10" vspace="10">
<p><h3>Sallingsund Hesteklub er en lille klub,<br>
hvor alle kan være medlem uanset, hvilken<br>
interesse de har inden for heste. Her ses<br>
nogle af medlemmerne i aktion.</h3></p>
  </div>
 
  <div id="footer">
    <p></p>
  </div>
  </body>

</html>
Avatar billede thedeathart Nybegynder
11. juni 2004 - 02:59 #1
<script src="dinmenu.js" type="text/javascript"></script>

dvs. du gemmer bare scriptet som dinmenu.js og sætte overstående linje ind, så burde det virke :)
Avatar billede fixxxer Nybegynder
11. juni 2004 - 08:50 #2
thedeathhart >> nu siger karma jo ikke alt - og alligevel :-)
Det er ikke godt nok bare at smide scriptet i en js fil, og så skulle alt virker. Hans HTML indhold, hvad vil du gøre med det?

scarlett >> Det du gør er at lave hele din menu om til et JavaScript på følgende måde:

Dit javascript kan du som thedeathhart rigtig nok skriver, smide i en JS fil og inkludere med <script src="menu.js"></script>

Men selve menuen, skal du rode lidt med, og også gemme denne i en js fil, fx "htmlmenu.js" og inkludere på samme måde, men i din body med <script src="htmlmenu.js">

I principet går det ud på at du bruger document.write(''); til at skrive din menu fra et JavaScript. Dvs. at du konvertere din HTML kode, til JavaScript's document.write(); så fx linien <div id="mainMenu"> bliver til document.write('<div id="mainMenu">');

Nu var det så roenving der tidligere har gjort mig opmærksom på at man kan smide hele sin html kode over i en JavaScript streng, som man så udskriver med document.write(minhtml);
Det kan gøres lettes ved at difinere en streng med

var minhtml;
minhtml = '';
minhtml += minhtml + '<div id="mainMenu">';
minhtml += minhtml + '<ul id="menuList">';
...

document.write(minhtml);


Nu skrev jeg engang et program der kunne stå for en konvertering både fra og til ovenstående format, og det kunne jeg jo lige gøre igen, da det altid er hurtigere at få en computer til at gøre det, end at man selv skal sidde og fedte med det.

Håber du kan bruge det til noget.
Avatar billede fixxxer Nybegynder
11. juni 2004 - 09:21 #3
scarlett >> prøv min lille konverter her:

http://html-js.easysoftinc.dk
Avatar billede roenving Novice
11. juni 2004 - 13:44 #4
-- og lige en lille, men væsentlig fejl i fixxxers eksempel:

var minhtml;
minhtml = '';
minhtml += '<div id="mainMenu">';
minhtml += '<ul id="menuList">';
...

document.write(minhtml);


-- enten skal man bruge

x = x + mere;

eller også

x += mere;
Avatar billede fixxxer Nybegynder
11. juni 2004 - 18:01 #5
Tak roenving, jeg synes nemlig bare at kunne huske noget med += i et eksempel du skrev for noget tid siden, og det undrede mig også at det godt virkede med et par linjer, men gav man den nogle flere linjer, nægtede browseren næsten at starte :-)

Så det forklare jo en hel del. Jeg har også rettet den til x = x + mere; nu
Avatar billede roenving Novice
11. juni 2004 - 18:13 #6
Jeg kom selv fra noget Basic-agtig programmering før jeg fik lært at bruge javascript, men jeg synes faktisk den anden notation er mere logisk, for den understreger, at der er tale om en akkumulering !-)

Så jeg vil absolut anbefale den korteste:

x += mere;
Avatar billede thedeathart Nybegynder
11. juni 2004 - 19:34 #7
fixxxer: jeg havde forstået det som at det kun var javascriptet som skulle includeres, ikke html-koden.Og så ville mit forslag være nok.

Og jeg er lidt ligeglad med karma, specielt fra folk som ikke skriver navn, spørgsmål, og grund.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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