Thread: adding a menu bar from DynamicDrive.com

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?

Use the insert html option

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.

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)

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?

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!!!!!

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>

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? :)

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

I used this page...

http://www.dynamicdrive.com/dynamici...ashdot_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

Code:

<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ 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:

Code:

<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

Originally Posted by PennieNPence

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)

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.

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

Code:

<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.

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.

Originally Posted by PennieNPence

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.

Originally Posted by PennieNPence

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

Originally Posted by Aliens Anonymous

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.

I already have big plans to make it fit-in better to my site I just need a working version of it before I modify it.

I created the template with that menu bar in mind.

Ces la vie!

Aliens and the guys know their way around CSS, scripting, and Flash, so.....

OH MY GOODNESS!! Tiny mistake on my part, oopsie.

I provided a link to the page where I copied the menu code to be inserted into the html box in BV. HOWEVER, the code that I posted in Step "2)" is what DynamicDrive provided on the slashdot's menu's page.

On that page, there is a link towards the bottom that reads:
"Developer's View" that takes you to a page with html code for a page with the menu BUT WITHOUT the menu customization elements.

try changing the code in your html box to:

Code:

<div id="my_menu" class="sdmenu">
<div>
<span>Online Tools</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
<a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
<a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
<a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
<a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
</div>
<div class="collapsed">
<span>Partners</span>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.codingforums.com">CodingForums</a>
<a href="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>

That worked perfectly.

I don't think I can say thank you enough times.

I couldn't have gotten this far without you guys.

And an even bigger thanks to robert for the above, and beyond help you have given me.

Here is something I found kind of cool to say thank you:

i found this very interesting

TWO TOUGH QUESTIONS

Question 1:


If you knew a woman who was pregnant, who had 8 kids
already, three who were deaf, two who were blind, one
mentally retarded, and she had syphilis,
would you recommend that she have an abortion?




Read the next question before looking at the answer
for this one.


Question 2:


It is time to elect a new world leader, and only your
vote counts.
Here are the facts about the three leading candidates.


>Candidate A -

Associates with crooked politicians, and consults with
astrologists. He''s had two Mistresses. He also chain
smokes and drinks 8 to 10 martinis a day.



>Candidate B -

He was kicked out of office twice, sleeps until noon ,
used opium in college and drinks a quart of whiskey
every evening.


>Candidate C -

He is a decorated war hero. He''s a vegetarian, doesn''t
smoke, drinks an occasional beer and never cheated on
his wife.





Which of these candidates would be your Choice?





Decide first, no peeking, then scroll down for the
answer.





>Candidate A: is
Franklin D. Roosevelt .


>Candidate B: is
Winston Churchill .


>Candidate C: is
Adolph Hitler .



And, by the way, the answer to the abortion question:
If you said yes, you just killed Beethoven.



Pretty interesting isn''t it? Makes a person think
before judging someone.



Never be afraid to try something new. Remember:

Amateurs built the
Ark

Professionals built the Titanic

and in case you never saw this one..! ....


Can you imagine working for a company that has a
little more than 500 employees and has the following
statistics:

* 29 have been accused of spousal abuse

* 7 have been arrested for fraud

* 19 have been accused of writing bad checks

* 117 have directly or indirectly bankrupted at least
2 businesses

* 3 have done time for assault

* 71 cannot get a credit card due to bad credit

* 14 have been arrested on drug-related charges

* 8 have been arrested for shoplifting

* 21 are currently defendants in lawsuits

* 84 have been arrested for drunk driving in the last
year



Can you guess which organization this is?

Give up yet?




It''s the 535 members of the United States Congress.
The same group of idiots (not my word) that crank out hundreds of new laws each year designed to keep the rest of us in line.

Thanks again guys