add a CSS menu toolbar (with links)

**poe** · May 23 '08, 06:26 PM

You cannot achieve this with CSS, but you could do it with JavaScript. Just create a function in an external JS file that is loaded into the page. In that function, simply response.write the HTML to want to appear.

For instance,

Code:

function WriteNavigation(){
  var theHtml = '<ul>' + 
                        '<li><a href="#">Link 1</a></li>' +
                        '<li><a href="#">Link 2</a></li>' +
                      '</ul>';

  response.write(theHtml);
}

**Death Slaught** · May 23 '08, 07:31 PM

Use PHP.

[CODE=php]<?php include("toolba r.php"); ?>[/CODE]

In the toolbar.php file include the HTML for your toolbar and change the extension of your pages from .html to .php

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")

**beacon** · May 23 '08, 09:19 PM

Death, I was under the impression that you couldn't use PHP for client side apps. Since I don't have the means to do server side scripting, I figured that PHP wasn't possible.

Also, I created a NavMenu.js file with a function NavMenu() contained within. For every tag that wasn't contained in a tag, I wrapped single quotes around it and added a + sign after it to match what Poe suggested.

However, I'm getting error messages about string constants and about an onject being required.

In the <head> of the html page, I have the following:
[code=html]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html> 
<head> 

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

<script language="Javas cript" src="NavMenu.js "></script>
[/code]

In the <body>, this is what I typed what may be causing my problem:
[code=html]
<script language="Javas cript" src="NavMenu.js ">
function NavMenu();

document.write( showMenu);
</script>
[/code]

In the NavMenu.js file, here's a small snippet of what I typed:
[code=html]
function NavMenu(){

var menu = '<b><a style="color:#C 11B17">Introduc tion</a></b>' +
'<br />' +

'<a class="left" target="_top" style="text-decoration:none "
href="file:\\ds hsntwfd01\publi c\Computer Help Center\HTML Docs\CHC-Introduction\Qu ickStart.htm"
onmouseover="th is.style.textDe coration='under line';
this.style.font Weight='bold';
window.status=' QuickStart';ret urn true"
onmouseout="thi s.style.textDec oration='none';
this.style.font Weight='';
window.status=' '">QuickStar t
</a>' + '<br />' +

'<a class="left" target="_top" style="text-decoration:none "
href="I:\Comput er Help Center\HTML Docs\Contacts\A ccessHR Helpdesk.html"
onmouseover="th is.style.textDe coration='under line';
this.style.font Weight='bold';
window.status=' Contacts - AccessHR Helpdesk';retur n true"
onmouseout="thi s.style.textDec oration='none';
this.style.font Weight='';
window.status=' '">AccessHR Helpdesk
</a>' + '<br />';

response.write( menu);

}
[/code]

I'm not too well versed in javascript to know exactly what needs to be done, so any help would be appreciated.

If it would be more appropriate for me to repost this in the javascript forum, please let me know and I'll happily oblige.

**eWish** · May 23 '08, 10:47 PM

beacon,

Since this this can not be done with HTML/CSS I will be glad to move this thread for you. Which forum would you like it moved to?

Kevin

**beacon** · May 24 '08, 05:57 PM

I guess it needs to go to the Javascript forum.

Thanks...

**gits** · May 26 '08, 07:04 AM

since you already have a html-snippet in your navMenu function you may use the following steps:

1. create a div with an id="my_nav" where you want to have the menu appear
2. leave out the response.write( ) in your function and replace it with:

[CODE=javascript]document.getEle mentById('my_na v').innerHTML = menu;[/CODE]
3. in the body's onload use:

[CODE=javascript]<body onload="navMenu ();">[/CODE]
to call your function ...

kind regards

**acoder** · May 26 '08, 09:22 AM

Moved to the JavaScript forum.

**beacon** · May 27 '08, 05:05 PM

Originally posted by gits

since you already have a html-snippet in your navMenu function you may use the following steps:

1. create a div with an id="my_nav" where you want to have the menu appear
2. leave out the response.write( ) in your function and replace it with:

[CODE=javascript]document.getEle mentById('my_na v').innerHTML = menu;[/CODE]
3. in the body's onload use:

[CODE=javascript]<body onload="navMenu ();">[/CODE]
to call your function ...

kind regards

Hi Gits,

I want to make sure I understand what you're suggesting so I'll number them the way you did.

1. Somebody suggested to me that I put a single quotation around each of my tags in the javascript file (NavMenu.js). Is this still necessary?

Also, when I create the div, are you saying that I need to put it in the NavMenu.js file and give it the id = "my_nav" or do I put this in each of my html files where the menu needs to be?

2. I'm not sure how the getElementById works, but I can apply it like you suggested. If you want to explain it, I'm all ears, but if not I can always look it up when I have time.

3. Do I need to include the <script> tags (for javascript) in the <head> of the html document before I call the NavMenu function in the onload event in the <body> tag?? Also, does your example take into account that my NavMenu function is in a separate javascript file called NavMenu.js?

Thanks...

**gits** · May 27 '08, 07:20 PM

ok let me explain it with an example:

we have the following js-file called: my_js.js

[CODE=javascript]
var menu = '<a href="http://bytes.com">byte s</a>';

function init_menu(id) {
var menu_container = document.getEle mentById(id);
menu_container. innerHTML = menu;
}
[/CODE]
the global variable menu gets initialized with a string that is a number of characters that build a line of html-markup ... in this case just a link that refers to bytes.com :)

the next lines build a js-function called init_menu. this function gets a parameter passed called id. when the function is called the passed parameter is used to get a reference to a node in the document that has the instance of the parameter as an id assigned. THAT is what getElementById does. we store that reference in another var called menu_container and use it in the next line to assign the string stored in our first var menu to the innerHTML property of the referenced node where the variablename menu_container actually stands for ...

so now have a look at our html-file:

[HTML]<html>
<head>
<script type="text/javascript" src="my_js.js"/>
</head>
<body onload="init_me nu('my_id');">
<div id="my_id"></div>
</body>
</html>
[/HTML]
first we have to include the js-file ... of course ;) ... next we use the body's onload-handler to call the above described js-function with the id of the div where we want to have the menu (the above mentioned html-markup stored in the global variable menu) appear ...

and yes ... you have to do that for every page where you want to use that menu ;)

i hope it is a bit more clear now?

kind regards

**beacon** · May 27 '08, 09:18 PM

I took what I had equal to the variable menu and placed it before the NavMenu function so it would be global to the file.

Then I renamed the NavMenu function init_menu() so that it would make a little more sense. I typed exactly what you suggest gits using the menu container and the getElement and then setting the menu container equal to the menu variable.

Then, in my main html doc, I placed my include in <head> and I inserted the onload event in the <body>.

I created a new div and the id element equal to "my_id". Then I closed the div without putting anything in between the two tags.

I saved and tried to open the page, but it's not blank where the menu should be.

**gits** · May 28 '08, 12:10 AM

as far as i can see the string that you use is corrupt from a js-point of view, since you mix up single and double quotes ... a string in js is:

[CODE=javascript]var s = 'something';

// or

var o = "something" ;[/CODE]
so you should ensure that you just use single quotes within the doubles or vice versa. in case you need/want to use it another way then you have to escape the quotes in question with a backslash like this:

[CODE=javascript]var s = 'something that uses a \' within a regular string';[/CODE]
try to fix that and show what you have in case it will not work.

kind regards

**beacon** · May 28 '08, 02:31 PM

Originally posted by gits

as far as i can see the string that you use is corrupt from a js-point of view, since you mix up single and double quotes ... a string in js is:

[CODE=javascript]var s = 'something';

// or

var o = "something" ;[/CODE]
so you should ensure that you just use single quotes within the doubles or vice versa. in case you need/want to use it another way then you have to escape the quotes in question with a backslash like this:

[CODE=javascript]var s = 'something that uses a \' within a regular string';[/CODE]
try to fix that and show what you have in case it will not work.

kind regards

Does it matter that nearly everything that's in the variable is html code?

Thanks for being patient with me and still coming up with ideas. I'm going to try this out and I'll provide you with a new snippet when I get finished.

**gits** · May 28 '08, 02:34 PM

it is no html-code from a js-point of view ... just plain text ... that could be rendered when when using it as html-code in your page ... so: no it doesn't matter ... the string just has to be valid ...

kind regards

**beacon** · May 28 '08, 02:51 PM

Ok, so this is in my javascript file:
[code=javascript]
var menu = "<b><a style="color:#C 11B17">Introduc tion</a></b>" +
"<br />" +

"<a class='left/' target='_top/' style='text-decoration:none/'
href='file:\\ds hsntwfd01\publi c\Computer Help Center\HTML Docs\CHC-Introduction\Qu ickStart.htm'
onmouseover='th is.style.textDe coration='under line';
this.style.font Weight='bold';
window.status=' QuickStart';ret urn true/'
onmouseout='thi s.style.textDec oration='none';
this.style.font Weight='';
window.status=' '/'>QuickStart
</a>" + "<br />" +

"<a class='left/' target='_top/' style='text-decoration:none/'
href='file:\\ds hsntwfd01\publi c\Computer Help Center\HTML Docs\CHC-Introduction\LA N Presentation.pp s'
onmouseover='th is.style.textDe coration='under line';
this.style.font Weight='bold';
window.status=' LAN Presentation';r eturn true/'
onmouseout='thi s.style.textDec oration='none';
this.style.font Weight='';
window.status=' '/'>LAN Presentation
</a>" + "<br />";

function init_menu(id){

var menu_container = document.getEle mentById(id);
menu_container. innerHTML = menu;

}
[/code]

And this is in the body of the html document:

Code:

<body onload="init_menu('my_id');" bgcolor="#B7CEEC">

<table style="margin-left:1px; margin-top:115px" width="880px" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="175" class="content" valign="top"><br />

<center>
<font class="notice">
Navigation<br/>
Menu</font></center>

<hr class="blue" />

<div id="my_id"></div>

add a CSS menu toolbar (with links)

add a CSS menu toolbar (with links)

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment