Simple Tree menu help

ksmith316 · Jan 15, 2007

Hey guys,
Once again I find myself turning to the geniuses of the internet in search for help!

Site in question: http://www.brethart.info/New/index.php

Subject: The Menu

Problem: I need the "Information" and "The Dungeon" on the menu to simply drop down and display the items within those headings. For example "Information" has "Match History", "Title History" etc etc. It needs to be displayed exactly the same as they are now when expanded, no indentations or anything like that, as I will edit the CSS file to change the colour of the extended items.

I just have no clue how to do it. I have seen several tutorials but they leave me clueless as I have no idea about javascript or anything like that. Ideally the menu code will be in a seperate .js or .php file to reduce code on the physical page and to allow for easy editing.

Any ideas?

Code for the index.php and style.css will follow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

</hr>
HOMEGo to homepage
.INFOInfo on Bret Hart
THE DUNGEONMultimedia
MERCHANDISEStore
ABOUTWho are we?
NEWSLatest news!

</hr>

Links

The Hart Foundation

Owen Hart

Harry Smith

Welcome to

The only online home for Hitman fans worldwide, Bret
Hart's Number 1 Fansite! Please click here for Help,
and information on the features of this Bret Hart fansite, including
the best ways to view it.

Forum guys if you find this PM me before telling anyone!

Headlines

<?php include("../phpnews/headlines.php");?>

body {
margin: 0px;
padding: 0px;
font-size: 70%;
font-family: "Arial", Tahoma, Sans-Serif;
background: #000000;
color: #fff;
}

/* LINKS */
a {
color: #ff00ff;
text-decoration: none;
background-color: inherit;
}

a:hover {
color: #ffffff;
background-color: inherit;
}

/* HEADINGS */
h1 {
padding: 0px 0px 22px 0px;
font-size: 1.4em;
}

h2 {
font-size: 1.2em;
margin: 0px;
}

h3 {
width: 100%;
font-size: 1.5em;
color: #ffffff;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.5em;
padding: 0px 0px 0px 30px;
background-color: inherit;
background-image: url(titlebg.gif);
background-repeat: no-repeat;
background-position: center left;
}

.red {
color: #ff00ff;
background-color: inherit;
}

/* PARAGRAPH */
p {
font-size: 1em;
color: #ffffff;
font-weight: bold;
line-height:1.6em;
margin: 0px 0px 5px 0px;
padding: 0px;
background-color: inherit;
}

/*-------------------------
DIVS IN ORDER OF APPEARANCE
-------------------------*/

/* WRAP, HOLDS EVERYTHING TOGETHER */
#wrap {
margin: 0px auto;
padding: 0px;
width: 780px;

}

#container {
float: left;
margin: 0px;
padding: 0px;
width: 780px;
background: url(middle.gif) repeat-y top left;
}

#top {
width: 780px;
height: 25px;
margin: 0px;
padding: 0px;
background: url(top.gif) no-repeat top left;
}

#header {
margin: 0px;
padding: 0px 0 0 0px;
background-color: inherit;
background-image: url(header.gif);
background-repeat: no-repeat;
height: 310px;
color: #ffffff;
font-weight: bold;
font-size: 0px;
}

/* LEFT COLUMN */
#left_column {
float: left;
margin: 0px 0px 0px 10px;
width: 160px;
}

html>body #left_column {
float: left;
margin: 0px 0px 0px 19px;
width: 160px;
}

#left_column p {
color: #828482;
padding: 7px;
margin: 0px;
background-color: inherit;
}

/* MAIN MENU (LEFT) */
#menu {
}

#menu a {
display: block;
line-height: 20px;
padding: 0px 0px 0px 4px;
color: #ff00ff;
background: #000000;
}

#menu a:hover {
background: #64686c;
color: #FFF;
}

/* LINK TITLE - visible on hover */
.underline {
font-weight: bold;
font-size: 1.5em;
border-bottom: 1px dotted #ffffff;
}

.black {
color: #000;
font-size: 0.9em;
background-color: inherit;
background: url(menudivider.gif);
background-repeat: no-repeat;
background-position: center left;
padding: 0px 0px 0px 8px;
}

.black1 {
color: #000;
font-size: 0.9em;
background-color: inherit;
}

#right_column {
float: left;
width: 560px;
margin: 0px 15px 0px 15px;
padding: 0px;
}

/* MAIN ARTICLES */
.main_article {
width: 522px;
margin: 0px 0px 2px 15px;
padding: 0px 0px 8px 0px;
}

.main_article p {
padding: 3px 8px 0px 4px;
}

/* THE FOLLOWING SHORT ARTICLES */
.other {
margin: 0px 0px 0px 0px;
}

.other p {
padding: 5px;
color: #808080;
background-color: inherit;
}

/* LEFT SHORT ARTICLE */
.left {

width: 48%;
float: left;
background: #fff;
padding: 5px;
color: #ff00ff;
}

/* RIGHT SHORT ARTICLE */
.right {
float: left;
width: 98%;
background: url(newsbg.gif);
padding: 5px;
color: #ffffff;
border-width: 2px;
border-style: outset;
border-color: #ff00ff;
}

/* FOOTER */

#footer {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 780px;
height: 37px;
background-color: inherit;
background-image: url(bottom.gif);
background-repeat: no-repeat;
color: #000000;
}

#footer a {
}

/* {END} */

I know I'm probably being dumb, but I really am f'in clueless on this!

ksmith316 · Jan 16, 2007

This is a half bump/half bribe post! lol

If anyone is actually prepared to code it for me the way I need it doing I will be prepared to either upgrade there membership here, or buy them something off amazon or something similar(about £15). I know its not a lot but i really need this doing, and just cant figure it out!

PM me if interested.

Simple Tree menu help

ksmith316

ksmith316

Top Contributors this Month