Drop down menu help please [Archive] - Den Games Network Forums

View Full Version : Drop down menu help please

Yorkie

11-02-2007, 07:13 AM

Hey all,

Tiny problem, I need help with, if anybody can please.

As you all know, I have built a website to mess around with. The time has come to update with Novembers reviews but timy problem as the yahoo site builder that I have used will only let me have a page of a certain lemgth, so therefore I am gonna need to add drop down menus for each section. i.e.

Childrens with a drop down that offers different months.
http://www.theliterarywalk.com

I have looked on the net but it gives me tonnes of codes and I don't know what to do with them.

Any help will be appreciated.

Many thanks in advance

Yorkie :)

ShadowClaw

11-02-2007, 11:08 AM

I am working on a solution for you but I have to go to class at the moment so I will finish and post it later today.

One question though: does the site builder that your using allow you to edit the actual html code of the page?

Yorkie

11-03-2007, 05:15 PM

Thanks for your help ShadowClaw, I have just checked and yes it allows me to add code :)

ShadowClaw

11-04-2007, 12:14 AM

Ok then, now for the fun part. I'm assuming that you have basic understanding of html for this to make any sense. If not then its no trouble, I'll just post some pictures showing where to put everything:D I've also added so comments in the code so that you know what is doing what.

Now then,
Inside the <head> tag add the following:

<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

</script>

then add this inside of the <style> tag:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

and finally locate the <div id="e13"> tag and replace the <table> tags and everything contained in them with this (this is the actual menu):

<ul id="nav"> 
<li><a href="index.html" onMouseOver="document.images

['i14'].src='sitebuilder/images/navbar2-0-mouseOver-41107.png'"
onMouseOut="document.images['i14'].src='sitebuilder/images/navbar2-0-active-
41074.png'"><img name="i14" src="sitebuilder/images/navbar2-0-active-41074.png"
width="134" height="25" border="0" alt=""/></a>
</li>

<li><a href="#" onMouseOver="document.images['i15'].src='sitebuilder/images/navbar2-1-
mouseOver-41259.png'" onMouseOut="document.images
['i15'].src='sitebuilder/images/navbar2-1-inactive-41162.png'"><img name="i15"
src="sitebuilder/images/navbar2-1-inactive-41162.png" border="0" width="134" height="25"
alt=""/></a>
<ul>

<li><a href="childrens_october.html">October</a></li>
<li><a href="childrens_november.html">November</a></li>
<li><a href="childrens_december.html">December</a></li>
</ul>
</li>

<li><a href="#" onMouseOver="document.images['i16'].src='sitebuilder/images/navbar2-2-
mouseOver-41399.png'" onMouseOut="document.images
['i16'].src='sitebuilder/images/navbar2-2-inactive-41295.png'"><img name="i16"
src="sitebuilder/images/navbar2-2-inactive-41295.png" border="0" width="134" height="25"
alt=""/></a>
<ul>
<li><a href="horror_october.html">October</a></li>
<li><a href="horror_november.html">November</a></li>
<li><a href="horror_december.html">December</a></li>
</ul>
</li>

<li><a href="#" onMouseOver="document.images['i17'].src='sitebuilder/images/navbar2-3-
mouseOver-41535.png'" onMouseOut="document.images
['i17'].src='sitebuilder/images/navbar2-3-inactive-41436.png'"><img name="i17"
src="sitebuilder/images/navbar2-3-inactive-41436.png" border="0" width="134" height="25"
alt=""/></a>
<ul>
<li><a href="romance_october.html">October</a></li>
<li><a href="romance_november.html">November</a></li>
<li><a href="romance_december.html">December</a></li>
</ul>
</li>

<li><a href="#" onMouseOver="document.images['i18'].src='sitebuilder/images/navbar2-4-
mouseOver-41683.png'" onMouseOut="document.images
['i18'].src='sitebuilder/images/navbar2-4-inactive-41575.png'"><img name="i18"
src="sitebuilder/images/navbar2-4-inactive-41575.png" border="0" width="134" height="25"
alt=""/></a>
<ul>
<li><a href="sci-fi_october.html">October</a></li>
<li><a href="sci-fi_november.html">November</a></li>
<li><a href="sci-fi_december.html">December</a></li>
</ul>
</li>

<li><a href="#" onMouseOver="document.images['i19'].src='sitebuilder/images/navbar2-5-
mouseOver-41852.png'" onMouseOut="document.images
['i19'].src='sitebuilder/images/navbar2-5-inactive-41721.png'"><img name="i19"
src="sitebuilder/images/navbar2-5-inactive-41721.png" border="0" width="134" height="25"
alt=""/></a>
<ul>
<li><a href="thrillers_october.html">October</a></li>
<li><a href="thrillers_november.html">November</a></li>
<li><a href="thrillers_december.html">December</a></li>
</ul>
</li>

<li><a href="#" onMouseOver="document.images['i20'].src='sitebuilder/images/navbar2-6-
mouseOver-41987.png'" onMouseOut="document.images
['i20'].src='sitebuilder/images/navbar2-6-inactive-41889.png'"><img name="i20"
src="sitebuilder/images/navbar2-6-inactive-41889.png" border="0" width="134" height="25"
alt=""/></a>
<ul>
<li><a href="other_fiction_october.html">October</a></li>
<li><a href="other_fiction_november.html">November</a></li>
<li><a href="other_fiction_december.html">December</a></li>
</ul>
</li>

<li><a href="#" onMouseOver="document.images['i21'].src='sitebuilder/images/navbar2-7-
mouseOver-42138.png'" onMouseOut="document.images
['i21'].src='sitebuilder/images/navbar2-7-inactive-42041.png'"><img name="i21"
src="sitebuilder/images/navbar2-7-inactive-42041.png" border="0" width="134" height="25"
alt=""/></a>
<ul>
<li><a href="non_fiction_october.html">October</a></li>
<li><a href="non_fiction_november.html">November</a></li>
<li><a href="non_fiction_december.html">Decemer</a></li>
</ul>
</li>

<li><a href="The_Works.html" onMouseOver="document.images

['i22'].src='sitebuilder/images/navbar2-8-mouseOver-42275.png'"
onMouseOut="document.images['i22'].src='sitebuilder/images/navbar2-8-inactive-
42175.png'"><img name="i22" src="sitebuilder/images/navbar2-8-inactive-42175.png"
border="0" width="134" height="25" alt=""/></a>
</li>

<li><a href="Forum.html" onMouseOver="document.images

['i23'].src='sitebuilder/images/navbar2-9-mouseOver-42411.png'"
onMouseOut="document.images['i23'].src='sitebuilder/images/navbar2-9-inactive-
42311.png'"><img name="i23" src="sitebuilder/images/navbar2-9-inactive-42311.png"
border="0" width="134" height="25" alt=""/></a>
</li>

<li><a href="Sophs_Bit.html" onMouseOver="document.images

['i24'].src='sitebuilder/images/navbar2-10-mouseOver-42555.png'"
onMouseOut="document.images['i24'].src='sitebuilder/images/navbar2-10-inactive-
42449.png'"><img name="i24" src="sitebuilder/images/navbar2-10-inactive-42449.png"
border="0" width="134" height="25" alt=""/></a>
</li>

<li><a href="contact_us.html" onMouseOver="document.images
['i25'].src='sitebuilder/images/navbar2-11-mouseOver-99050.png'"
onMouseOut="document.images['i25'].src='sitebuilder/images/navbar2-11-inactive-
98910.png'"><img name="i25" src="sitebuilder/images/navbar2-11-inactive-98910.png"
border="0" width="134" height="25" alt=""/></a>
</li>
</ul>

To add more menu options add another "<li><a href="non_fiction_december.html">Decemer</a></li>" to each menu just replace the page name in the link with whatever the real name of the page is (this is also the only thing that you would have to change in the above code unless you decide to go with page names I put in as temporary place holders). This method also requires that each month have its own page which is not that hard if you have a template. The only thing I'm not sure about is the way that the rollover images will work because I don't have the actual images so when I tested the menu it just had the image place holders but it should work the same as it does now.

Sorry about the length of this post but computer code can get like that some times.:) And if you have any other questions feel free to ask, because when dealing with a computer language there is no such thing as a stupid question.

Yorkie

11-04-2007, 04:05 PM

Thanks ShadowClaw, I can honestly say I am new to this it will be the first time I have ever worked with codes apart from at school when we did the Go to 10 thing and it scrolled ya name up the screen :lol:

I thought I was doing okay until I got to this bit, I found that bit of the file but can't see the <table> tag in that line :\

and also do I have to copy it all including the bit I have highlighted in the quote?

and finally locate the <div id="e13"> tag and replace the <table> tags and everything contained in them with this (this is the actual menu):

<ul id="nav"> 
<li><a href="index.html" onMouseOver="document.images

It sounded like a really easy thing to do but it turns out site building is hard :(

ShadowClaw

11-05-2007, 08:00 AM

<div id="e13" style="position:absolute;left:1;top:282;width:134;height:443;"><table border="0" cellspacing="0" cellpadding="0"><tr><td><a href="index.html"the <table> tag is a couple lines below. The <table> tag begins in the above quote and ends in the following quote:

height="25" alt=""/></a></td></tr></table>
</div>
<div id="e26" style="position:absolute;left:659;top:362;width:183;height:138;">

you can copy it if you want to or not, any text contained within  is considered a comment and does not effect the rest of code. I put those in so that you could understand what was actually making the menus in case you ever needed to add more options:D

And don't worry, after a couple of times of messing with the html you'll get the hang of it. Html is, in my opinion, one of the easier computer languages to learn mainly because you don't need any special software to use (I actually used notepad to write a sample page to test the code for the menu) and it is mostly self explanatory once you get the hang of it. (for example the code <table> </table> makes a data table and <font> </font> allows you to change the different font settings)

Yorkie

11-05-2007, 04:00 PM

I am sorry to be a massive pain but I just don't get it I did everything you said and I still messed it up somehow :cry:

The SS below shows what I got when I asked it to show me the page in a browser, I think it's probably time for me to admit defeat and just give up cos I just can't do it :dunce:

Thanks for all your help though ShadowClaw :)

ShadowClaw

11-05-2007, 04:49 PM

If you can attach the page to a post I'll take a look at the code for you. And its really no big deal, I enjoy helping people with computer problems.:)

Yorkie

11-05-2007, 05:12 PM

God you are so patient and that is a really good thng when it comes to me and this sort of stuff hehehe!!

Anyway after my ages of total frustration at not getting it right I came out of it without saving so it should have returned to the original coding.

This is what I did though opened up Yahoo sitebuilder and opened the index page, then first of all couldn't find anywhere to add the codes so opened up the browser option and got to the code through page then view source and altered the code in there.

Went to save it and it wouldn't let me at first so ended up saving it in my documents, but that made no difference to the page when I refreshed.

Soooooo hohum went back to index page in builder right clicked all over trying to find somewhere to put all the code and found only bits to change so went into the insert bit and told it to insert htlm it gave me a box so pasted the code I had copied earlier into it and the result was the screenshot.

This all took me about an hour or so :lol:

I will take some screenshots of stuff tomorrow when I don't really feel like throwing the laptop out of the window and hopefully from them you can work out why I am so stupid :(

ShadowClaw

11-05-2007, 05:48 PM

Well right off the bat I can tell you why refreshing the page after saving it didn't work. This is because the browser had opened the page from wherever the site builder saves them. So when you edited the page code and then saved it to "My Documents", the browser still had the page opened from original document which wasn't changed. To see the changes simply go into your "My documents" folder and open the saved web page. After opening the page from here, you can right-click on the file and select 'edit'. This will open the file in notepad. Now you can make changes to the code in notepad, click 'save', then click 'Refresh' in the browser to see what the changes do.

Yorkie

11-06-2007, 03:09 PM

Okay I will try all that and hopefully finger and toes crossed it will work :D

If not the laptop is going out the window :tantrum: