Implementing a Drop Down Nav Bar Using Javascript

[mrdegrandis]

I would like to create a customized sidebar navigation. I have the code (see below), but not sure where each part should be placed. The comments do tell you where it goes if you are generating the HTML yourself, but I am not sure how to map it over to BlogHarbor. For example, do I create a Custom Component or directly edit the CSS?

Any guidence would be appreciated.

<!-- Paste this code into the CSS section of your HTML document --

.menu {
position:relative;
background-color:gold;
border:1px solid darkblue;
width:150;
font-size:11px;
font-family:verdana;
font:bold;
position:absolute;
cursor:se-resize;
}

.item_panel {
width:150;
border-left:1px solid darkblue;
border-right:1px solid darkblue;
clip:rect(0,150,0,0);
position:absolute;
}

.item_panel a {
text-decoration:none;
color:black;
cursor:hand;
}

.item {
background-color:lightyellow;
width:148;
font-size:10px;
font-family:verdana;
}



<!-- Paste this code into an external JavaScript file named: sliding_menu.js.js --

/* This script and many more are available free online
at
The JavaScript Source ::
http://javascript.internet.com
Created by: ScriptBreaker ::
http://www.scriptbreaker.com/ */

var height = 20; // height of the menu headers
var iheight = 15; // height of the menu_items

var bgc = "lightyellow" // background color of the
item
var tc = "black" // text color of the item

var over_bgc = "silver";
var over_tc = "red";

var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 152
var self_menu = new Array();

function write_menu() {
smc = 0; // count the position of the self_menu
document.write("<div style='position:absolute'");
mn = 0;
mni = 1;
start = -1;

for(i=0;i<Link.length;i++) {
la = Link[i].split("|");
if (la[0] == "0") {
if(start == 0) {
document.write("</div");
h = csmc * iheight;
tmn = mn; //-h
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write("<div class='menu'
style='top:"+mn+";height:"+height+"' id='down"+smc+"'
onclick='pull_down("+smc+","+mni+")' "+ la[1] +
"</div");
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
} else {
if(start == 1) {
if(N)mn+=2;
document.write("<div class='item_panel'
id='down"+smc+"' style='top:"+mn+"'");
start = 0;
}

document.write("<a href='"+la[2]+"'");
if (la[3] != "") document.write(" target='" +
la[3] + "' ");
document.write("<div class='item' id='d"+i+"'
style='height:"+iheight);
if (N) document.write(";width:150");
document.write("' onmouseover='color(this.id)'
onmouseout='uncolor(this.id)' "+ la[1] +
"</div</a");
csmc++;
}
}
if (start == 0) {
document.write("</div");
h = csmc * iheight;
tmn = mn + 5; //-h
self_menu[smc] = new Array(tmn,h,0);
name = "down" + (self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor = "darkblue";
obj.style.borderBottomWidth = 1;
obj.style.borderBottomStyle = "solid";
}
document.write("</div");
}

function color(obj) {
document.getElementById(obj).style.backgroundColor =
over_bgc;
document.getElementById(obj).style.color = over_tc
}

function uncolor(obj) {
document.getElementById(obj).style.backgroundColor =
bgc;
document.getElementById(obj).style.color = tc
}

function pull_down(nr,c) {
if (timerID == "") {
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0) {
self_menu[nr+1][2] = 1;
if(nr == self_menu.length-2) {to++;}
epull_down(begin,to,0);
} else {
to = 0;
self_menu[nr+1][2] = 0;
name = "down"+(nr+2);
open_item = 0;
for(i=0;i<nr;i++) {
if(self_menu[i][2] == 1)
{open_item += self_menu[i][1];
}
}
if (N == false) {open_item-= (c*1)};
if (nr== self_menu.length-2) {val =
self_menu[self_menu.length-1][1];to=-1;}
else val =
parseInt(document.getElementById(name).style.top)
-(open_item)-(c*height);
epull_up(begin,to,val);
}
}
}

function epull_down(nr,to,nowv) {
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip =
"rect(0,"+width+","+(nowv+1)+",0)";
for (i=nr;i<self_menu.length;i++) {
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID =
setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function epull_up(nr,to,nowv) {
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip =
"rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++) {
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv to) timerID =
setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function startup(nr) {
write_menu();
if (nr != 0) {
for(i=0;i<self_menu.length;i++)
{
if(self_menu[i][3] == nr) pull_down(i,nr)
i==self_menu.length;
}
}
}



<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. --

<script type="text/javascript"
src="sliding_menu.js.js"</script



<!-- Paste this code into the BODY section of your HTML document --

<table width=150<tr<td
<script language="JavaScript"
//Link[nr] = "position [0 is menu/1 is
item],Link name,url,target (blank|top|frame_name)"
var Link = new Array();
Link[0] = "0|Home";
Link[1] = "1|Home|http://www.javascriptsource.com|";
Link[2] = "1|More
Scripts|http://www.javascript.com|";
Link[3] =
"1|Contact|http://www.javascriptsource.com/contact-us.html|";
Link[4] = "1|Traffic|http://www.thecounter.com|";
Link[5] = "0|Access";
Link[6] = "1|Login|Login.asp|";
Link[7] = "1|Logout|Logout.asp|"
Link[8] = "0|Scripts";
Link[9] = "1|Asp|http://www.javascriptsource.com|";
Link[10] =
"1|JavaScript|http://www.javascriptsource.com|";
Link[11] = "0|Links";
Link[12] = "1|JavaScript
sites|http://www.javascripts.com|blank";

startup(4);
</script
</td</tr</table

[john]

One tip: the most recent release of this forum software seems to have a problem when you enable HTML and try to past code. Check the button for Disable HTML when you are pasting code into your post...

Anyhow, let's break this down for you. You want to implement what appears to be a Slide Down Menu (was that the one?) and need to add some code to your blog.

Paste this code into the CSS section of your HTML document

What you want to do here is edit the style template. See this thread which explains the process of editing your style template. Add your code to the Custom CSS area instead of the code shown on that thread.

Paste this code into an external JavaScript file named: sliding_menu.js.js

Create a file on your computer using that code and upload that file to the top level of your File Manager.

Paste this code into the HEAD section of your HTML document

See this page for instructions and this page for background on adding content to the HEAD area.

You're probably going to want to add a leading slash to this code, like this:

[mrdegrandis]

John, I thought I was careful implementing this solution. Somehow, the style sheet is messed up and the bolg itself is totally messed up now.

One thing I noted as I folowed your very clear instructions was that I could not make changes to the style sheet after the edit. Don't know why.

[john]

Where is the blog you tried to implement this on?

[john]

Please go back to the original page from which you obtained the source code, there is a problem with the code you entered into your Sliding Menu custom component... Get the source code again and update your Sliding Menu component with the original source code and see what happens...

[mrdegrandis]

Went back and redid every step very carefully. Surely I have made a mistake somewhere, but I was very careful about the source code for the CSS. The blog now has no columns at all. Weird. Any thoughts?

[john]

You're copying and pasting from this forum, not from the original source of the script. Your Sliding Menu custom component contains this code:

[mrdegrandis]

OK, almost there. I realize now that the CSS code need to have the comment removed. Now, however, everytime I try to edit it, the change doesn't occur. I click CHANGE, but nothing changes. What am I doing wrong?

[john]

Now you've got the CSS in the wrong place... Go back and reread our original instructions, the CSS does not go in your Custom Component, the code from Paste this code into the BODY section of your HTML document goes in your custom component... I just put it there for you.

Also, we said to add the leading slash to your Javascript link. So it's not this: