JavaScript vertical menu displaying horizontal, Links are also not clickable Options

[BlondOverBlue]

I have a very basic web site I am making that is hosted on a shared network drive, so I don't have access to PHP, or SSI. However, the site will be link-intensive with a simple, text-only vertical menu on the left. Instead of updating every single page when I update the links, I'd like to have changes be made automatically across all pages.

I wrote a simple piece of JS, but I can't get it to show vertically; it shows horizontally with no spacing, nor are the links clickable.

It seems given my lack of server-side resources, JavaScript will be my best bet, I think. How do I get this to show "active", display vertically, and with spacing? Below is the code.

CODE

document.write("<div style='color:blue; font-size:12pt;'>");
document.write("Link 1");
document.write("Link 2");
document.write("Link 3");
document.write("Link 4");
document.write("Link 5");
document.write("</div>");

[Christian J]

That script doesn't output any links, just the plain text inside the quotes ("Link 1" etc). Try something like

CODE

document.write('<a href="...">Link 1<\/a> ');

where "..." is the link's URL. (The backslash in the link end tag may not be necessary in today's browsers, it's traditionally used to prevent javascript from thinking the forward slash ended the string.)

There are several ways to make the links display vertically (using either HTML or CSS), which one to use depends on the rest of your page layout.

It's also a good idea to keep CSS in a separate file, instead of using STYLE attributes in the HTML. See http://htmlhelp.com/reference/css/style-html.html

[BlondOverBlue]

That script doesn't output any links, just the plain text inside the quotes ("Link 1" etc). Try something like

CODE

document.write('<a href="...">Link 1<\/a> ');

where "..." is the link's URL. (The backslash in the link end tag may not be necessary in today's browsers, it's traditionally used to prevent javascript from thinking the forward slash ended the string.)

There are several ways to make the links display vertically (using either HTML or CSS), which one to use depends on the rest of your page layout.

It's also a good idea to keep CSS in a separate file, instead of using STYLE attributes in the HTML. See http://htmlhelp.com/reference/css/style-html.html

Thanks, Christian. I was able to get the links active now. Half the battle...

The vertical positioning is the other half. The site uses a very basic CSS-based layout (header, left menu where these links will be, content area, footer. It's becoming a challenge to try and get this menu created and incorporated into the site.

I think I may just default to using a frames-based layout. Uglier, but it's functional.

[Christian J]

The vertical positioning is the other half. The site uses a very basic CSS-based layout (header, left menu where these links will be, content area, footer.

Make the links "display: block", and they should end up below each other. Then float the DIV, and it should shrink to fit its content:

CODE

<style type="text/css">
#nav  {
float: left;
color: blue;
background: pink;
}

#nav a {display: block;}
</style>

<script type="text/javascript">
document.write('<div id="nav">');
document.write('<a href="">Link 1<\/a> ');
document.write('<a href="">Link 2<\/a> ');
document.write('<a href="">Link 3<\/a> ');
document.write('<\/div>');
</script>

If you want the footer to appear below the nav menu you also need to clear the float:

CODE

footer {clear: left;}

I think I may just default to using a frames-based layout. Uglier, but it's functional.

Frames cause lots of other problems: http://htmlhelp.com/faq/html/frames.html#frame-problems