javascript - Dynamic website-navigation (one file for all pages) in a filesystem - without webserver -

hello have website without webserver in windows-filesystem. refactor old navigation , plan use 1 navigation-file in seperate folder.

in navigation-folder links should set links in dependency root folder. root folder have no specific name, in root folder there start.html.

for e.g.

c:\test\start.html root file  c:\test\foo\foo.html file c:\test\bar\bar.html file c:\test\bar\foobar\foobar.html file 

all files include navigation.js links defined.

     'text' : 'start',      'a_attr' : { 'href': 'start.html'}       'text' : 'foo',      'a_attr' : { 'href': 'foo/foo.html'},       'text' : 'bar',      'a_attr' : { 'href': 'bar/bar.html'},       'text' : 'foobar',      'a_attr' : { 'href': 'bar/foobar/foobar.html'}, 

that works fine when include navigation in start.html. links have correct relation.

but when include in foo.html links have wrong relation. because start.html isn't in foo-folder.

so question, there common way root folder , set navigation-links dynamicly?
or possible check in folder-deep in reference start.html current file is?

all files in test has folder-deep 0 files in foo has folder-deep 1 files in bar has folder-deep 1 files in foobar has folder-deep 2 

i can't use absolute links , there need relative links. when use absolute links, can't move website-folder sub-folders drive.

and when use root-relative link \start.html link related drive, thats wrong too.

ok have possible solution work's not correct first call of page, or reload crtl+f5

in root-folder place png imgage special name e.g. start.png

now call in navigation.js function check if image exist.

function urlexists(url) {    var img = new image();    img.src = url;    if (img.height!= 0){        k = true;    }else{k = false}    return k; }  function createurl(x){     k = "";     while(x>0){         k += "../";     x=x-1;     }     return k; }  var subfolderdeep = "";  x = 8; while(x>0){     urllen = createurl(x);     if(urlexists(urllen + "start.png")){         subfolderdeep = urllen;         break;     }     x=x-1; }  alert(subfolderdeep); startnavigation(subfolderdeep);   'text' : 'start',  'a_attr' : { 'href': subfolderdeep + 'start.html'}   'text' : 'foo',  'a_attr' : { 'href': subfolderdeep + 'foo/foo.html'},   'text' : 'bar',  'a_attr' : { 'href': subfolderdeep + 'bar/bar.html'},   'text' : 'foobar',  'a_attr' : { 'href': subfolderdeep + 'bar/foobar/foobar.html'}, 

but @ first start subfolderdeep ""; when refresh page or when call new page navigationlink right subfolderdeep;

i correct result too, when use @ first call debugger.

for e.g. bar/foobar/foobar subfolderdeep = "../../", @ first call = "";

ok log see problem.

at first call heigth of image 0; refresh next call heigth 24. problem?

"file:///start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///d:/start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///d:/somefolder/start.png" navigation.js:6:3 0 navigation.js:7:3 **"file:///d:/somefolder/rootfolder-test/start.png" navigation.js:6:3 0 navigation.js:7:3** "file:///d:/somefolder/rootfolder-test/k/start.png" navigation.js:6:3 0     "file:///start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///d:/start.png" navigation.js:6:3 0 navigation.js:7:3 "file:///d:/somefolder/start.png" navigation.js:6:3 0 navigation.js:7:3 **"file:///d:/somefolder/rootfolder-test/start.png" navigation.js:6:3 24**