adding a menu bar from DynamicDrive.com

[PennieNPence]

Hello all I've completed most of my pages and want to add this menu bar to my site that was found on Dynamic Drive.

http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

I don't know how to go about inserting it into the page. Can any body help? It is the only menu bar that really fits my site design.

Please?

[Watdaflip]

Re: adding a menu bar from DynamicDrive.com

Use the insert html option

[PennieNPence]

Re: adding a menu bar from DynamicDrive.com

Thanks for your quick reply, but it's java script not html.

When I put it into the "Insert script" it doesn't do any thing.

I have the GIF files that came with it but don't understand where to put them or how exactly to apply the script.

Thanks again for helping.

[Watdaflip]

Re: adding a menu bar from DynamicDrive.com

I know its javascript, it still goes in an html box. Javascript uses the html <script> tag to execute.

And most likely the image just gets uploaded in the same directory as the file with the javascript code. (I cant say for sure without seeing the javascript code)

[PennieNPence]

Re: adding a menu bar from DynamicDrive.com

OH thank you soooo much.

This is the script:

function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
return false;
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName("div");
this.remember = true;
this.speed = 4;
this.markCurrent = true;
this.oneSmOnly = true;
}
SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}
}
if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}
}
};
SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == "collapsed")
this.expandMenu(submenu);
else
this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
fullHeight += links[i].offsetHeight;
var moveBy = Math.round(this.speed * links.length);

var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight + moveBy;
if (newHeight < fullHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "";
mainInstance.memorize();
}
}, 30);
this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight - moveBy;
if (newHeight > minHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "collapsed";
mainInstance.memorize();
}
}, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
}
};
SDMenu.prototype.expandAll = function() {
var oldOneSmOnly = this.oneSmOnly;
this.oneSmOnly = false;
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className == "collapsed")
this.expandMenu(this.submenus[i]);
this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i < this.submenus.length; i++)
states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
}
};


Do I just add <script> to the top, and </script> to the bottom?

[PennieNPence]

Re: adding a menu bar from DynamicDrive.com

The down load also came with this CSS:

div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}

and it came with 6 gif images.

I don't understand where any of it goes.

I know I'm a novice, and this is a little over my head, But I am trying to start my own E-commerce site and need it to look as professional as possible.

PLEASE HELP!!!!!

[Watdaflip]

Re: adding a menu bar from DynamicDrive.com

Yeah, you are going to want to enclose it with.

<script language="javascript">
</script>

As for the css, it needs to go inbetween the pages <head> tag, there should be a way to edit what goes into those tags with bv, perhaps someone will be able to tell you exact instructions for that (I don't use BV, no idea, sorry). Make sure that css is enclosed with

<style>
</style>

[PennieNPence]

Re: adding a menu bar from DynamicDrive.com

Thanks again

I already had a transparent style in-between the head tags. Do I make it a separate <style></style> tag, or just put it between the same ones?

You keep coming to my rescue......are you a digital white night? :)

[Robert]

Re: adding a menu bar from DynamicDrive.com

are you just wanting to put the menu, as is, onto your page?

I used this page...

http://www.dynamicdrive.com/dynamicindex1/slashdot_dev.htm

...for an easier look at the menu's html code and used it to accomplish the task. I only had to download the "sdmenu.zip' and unzip it then this is what I did:

1) insert the code below in between the HEAD tags on the page you want the menu to appear

<link rel="stylesheet" type="text/css" href="[URL="http://www.dynamicdrive.com/dynamicindex1/sdmenu/sdmenu.css"][COLOR=#0000ff]sdmenu/sdmenu.css[/COLOR][/URL]" />
<script type="text/javascript" src="[URL="http://www.dynamicdrive.com/dynamicindex1/sdmenu/sdmenu.js"][COLOR=#0000ff]sdmenu/sdmenu.js[/COLOR][/URL]">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: [URL]http://www.dynamicdrive.com[/URL]
* Visit Dynamic Drive at [URL]http://www.dynamicdrive.com/[/URL] for full source code
***********************************************/
</script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>

2) Insert this next code into an HTML BOX on your page in BlueVoda:

<div id="my_menu" class="sdmenu">
<div>
<span>Online Tools</span>
<a href="<A href="http://tools.dynamicdrive.com/imageoptimizer/">Image">http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
<a href="<A href="http://tools.dynamicdrive.com/favicon/">FavIcon">http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
<a href="<A href="http://www.dynamicdrive.com/emailriddler/">Email">http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
<a href="<A href="http://tools.dynamicdrive.com/password/">htaccess">http://tools.dynamicdrive.com/password/">htaccess Password</a>
<a href="<A href="http://tools.dynamicdrive.com/gradient/">Gradient">http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
<a href="<A href="http://tools.dynamicdrive.com/button/">Button">http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="<A href="http://www.dynamicdrive.com/recommendit/">Recommend">http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
<a href="<A href="http://www.dynamicdrive.com/link.htm">Link">http://www.dynamicdrive.com/link.htm">Link to Us</a>
<a href="<A href="http://www.dynamicdrive.com/resources/">Web">http://www.dynamicdrive.com/resources/">Web Resources</a>
</div>
<div class="collapsed">
<span>Partners</span>
<a href="<A href="http://www.javascriptkit.com">JavaScript">http://www.javascriptkit.com">JavaScript Kit</a>
<a href="<A href="http://www.cssdrive.com">CSS">http://www.cssdrive.com">CSS Drive</a>
<a href="<A href="http://www.codingforums.com">CodingForums</a">http://www.codingforums.com">CodingForums</a>
<a href="<A href="http://www.dynamicdrive.com/style/">CSS">http://www.dynamicdrive.com/style/">CSS Examples</a>
</div>
<div>
<span>Test Current</span>
<a href="?foo=bar">Current or not</a>
<a href="./">Current or not</a>
<a href="index.html">Current or not</a>
<a href="index.html?query">Current or not</a>
</div>
</div>

3) Save and Publish
4) BlueFTP the "sdmenu" folder that contains the 6 images, sdmenu.css, and sdmenu.js files to the same directory that you published the page to.

Your done!

--remember that the top-left corner of the HTML BOX is where the menu's top-left corner starts, so wherever you place the box in BV...keep in mind the width of the menu.

Here's mine--> http://graphxntrix.com/test/temp/page_with_menu.html

[Watdaflip]

Re: adding a menu bar from DynamicDrive.com

Thanks again

I already had a transparent style in-between the head tags. Do I make it a separate <style></style> tag, or just put it between the same ones?

You keep coming to my rescue......are you a digital white night? :)

You should put them both in the same tag, (although it shouldn't hurt for them to be in separate tags)

[PennieNPence]

Re: adding a menu bar from DynamicDrive.com

Thank you guys SOOOOO much.

I finally got it to display, but in the sub menu it isn't displaying the title of the link....it's displaying the actual link.

For instance it is displaying:(http://tools.dynamicdrive.com/imageoptimizer/)
instead of:
Image Optimizer

Thank you for your help up to now, and sorry to bother you guys again.

[Robert]

Re: adding a menu bar from DynamicDrive.com

look at the code you inserted into the html box and make sure the html for "Image Optimizer" sub menu looks like this:

<a href="<A href="http://tools.dynamicdrive.com/imageoptimizer/">Image">http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>

Its usually good practice, that when copying code from one document to another(e.g. from the web to BV), paste it into Notepad first then copy it to your document or application. Be sure to turn the "word wrap" feature off in Notepad because in some instances it causes undesireable results, depending on how the code is used.

[PennieNPence]

Re: adding a menu bar from DynamicDrive.com

I've checked the code, and it all seems to add up correctly.
here is the link to the page:
http://penniesnpence.com/header20%menu.html

You guys have been so helpful, I feel bad bothering you over and over again. Sorry and thanks again.

[Aliens Anonymous]

Re: adding a menu bar from DynamicDrive.com

I've checked the code, and it all seems to add up correctly.
here is the link to the page:

http://penniesnpence.com/header20%menu.html

You guys have been so helpful, I feel bad bothering you over and over again. Sorry and thanks again.

Just a little bit of advice don't put that menu on your page it looks terrible it spoils your hole template. look around for some that will suit your site.

[PennieNPence]

Re: adding a menu bar from DynamicDrive.com

I've checked the code, and it all seems to add up correctly.
here is the link to the page:

http://penniesnpence.com/header20%menu.html

You guys have been so helpful, I feel bad bothering you over and over again. Sorry and thanks again.

Oops sorry forgot the WWW.
Here is the correct one:

http://www.penniesnpence.com/header%20menu.html