javascript menu in single file with current document location telling what menu in file to show

Question

I would like to know if it's possible to store a menu in a single javascript file and each consequent links as document location will read a specific menu set in the single page as below

menu start home as it should show on home page

document.write('<ul>');
    document.write('<li>');
    document.write('<a href="index.html">Home</a>');
    document.write('</li><li>');
    document.write('<br /><li>');
    document.write('<a href="link1.html">LINK1</a>');
    document.write('</li><br><li>');
    document.write('<a href="link2.html">LINK2</a>');
    document.write('</li><br><li>');
    document.write('<a href="link3.html">LINK3</a>');
    document.write('</li>
document.write('</ul>');

menu 1 as it should show on page link1

document.write('<ul>');
    document.write('<li>');
    document.write('<a href="index.html">HOME</a>');
    document.write('</li><li>');
    document.write('<br /><li>');
    document.write('<a href="link1.html">LINK1</a>');
    document.write('</li><br><li>');
    document.write('<a href="link1.1.html">link1.1</a>');
    document.write('</li><br><li>');
    document.write('<a href="link1.2.html">link1.2</a>');
    document.write('</li><br><li>');
    document.write('<a href="link1.3.html">link1.3</a>');
    document.write('</li><br><li>');
    document.write('<a href="link2.html">LINK2</a>');
    document.write('</li><br><li>');
    document.write('<a href="link3.html">LINK3</a>');
    document.write('</li>
document.write('</ul>');

menu 2 as it should show on page link2

document.write('<ul>');
    document.write('<li>');
    document.write('<a href="index.html">HOME</a>');
    document.write('</li><li>');
    document.write('<br /><li>');
    document.write('<a href="link1.html">LINK1</a>');
    document.write('</li><br><li>');
    document.write('<a href="link2.html">LINK2</a>');
    document.write('</li><br><li>');
    document.write('<a href="link2.1.html">link2.1</a>');
    document.write('</li><br><li>');
    document.write('<a href="link2.2.html">link2.2</a>');
    document.write('</li><br><li>');
    document.write('<a href="link2.3.html">link2.3</a>');
    document.write('</li><br><li>');
    document.write('<a href="link3.html">LINK3</a>');
    document.write('</li>
document.write('</ul>');

menu 3 as it should show on page link3

document.write('<ul>');
    document.write('<li>');
    document.write('<a href="index.html">HOME</a>');
    document.write('</li><li>');
    document.write('<br /><li>');
    document.write('<a href="link1.html">LINK1</a>');
    document.write('</li><br><li>');
    document.write('<a href="link2.html">LINK2</a>');
    document.write('</li><br><li>');
    document.write('<a href="link3.html">LINK3</a>');
    document.write('</li><br><li>');
    document.write('<a href="link3.1.html">link3.1</a>');
    document.write('</li><br><li>');
    document.write('<a href="link3.2.html">link3.2</a>');
    document.write('</li><br><li>');
    document.write('<a href="link3.3.html">link3.2</a>');
    document.write('</li>
document.write('</ul>');

The html file

I think menu 1, 2 and 3 in the javascript page should have a dedicated name so that when the current document location is link3.html or link3.1.html ... javascript will find and show menu 3. Is that possible in a simple way?

Thanks for any help on this.

Pascal

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

You need to isolate the name of the page you wish to find, then set whatever menu you wish to show. This answer shows a pretty good example how to sniff the URL to get the page name

edited May 23 '17 at 12:20

Community

1
1

answered Mar 24 '14 at 19:07

durbnpoisn

4,666
2
16
30

any javascript only solution - jquery shouldn't be required for something that simple – pascal b Mar 24 '14 at 20:41
You don't need the jQuery part of that. It's only there to see if the page is loaded. You only need to be concerned with the part that says: "if(window.location.href.indexOf("franky") > -1)" In your code, you would look for the indexOf being the name of the page you want the specific menu to load on. If that's the page, load that menu. – durbnpoisn Mar 24 '14 at 20:45
can you please elaborate on how to use indexOf? I am trying if(window.location.indexOf("index") >= 0){document.write... } – pascal b Mar 24 '14 at 21:31

score 0 · Answer 2 · edited Mar 24 '14 at 23:46

0

Okay, got it myself:

if(document.URL.indexOf("index.html") != -1){...}

does the trick!

edited Mar 24 '14 at 23:46

hichris123

10,145
15
56
70

answered Mar 24 '14 at 23:32

pascal b

361
4
16

javascript menu in single file with current document location telling what menu in file to show

2 Answers2