brethart.info
01-17-2007, 12:07 PM
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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="robots" content="all" />
<meta name="author" content="Kevin Smith(www.BRETHART.info)" />
<meta name="Copyright" content="www.brethart.info" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="images/style.css" rel="stylesheet" type="text/css" />
<title>
</title>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="header">
</div>
<div id="left_column">
<div id="menu">
<hr></hr>
<a href="index.php" accesskey="h" title="Accesskey: H"><span class="underline">H</span>OME<span class="black">Go to homepage</span></a>
<a href="info.php" accesskey="i" title="Accesskey: I"><span class="black1">.</span><span class="underline">I</span>NFO<span class="black">Info on Bret Hart</span></a>
<a href="thedungeon.php" accesskey="t" title="Accesskey: T"><span class="underline">T</span>HE DUNGEON<span class="black">Multimedia</span></a>
<a href="merchandise.php" accesskey="m" title="Accesskey: M"><span class="underline">M</span>ERCHANDISE<span class="black">Store</span></a>
<a href="about.php" accesskey="a" title="Accesskey: A"><span class="underline">A</span>BOUT<span class="black">Who are we?</span></a>
<a href="news.php" accesskey="n" title="Accesskey: N"><span class="underline">N</span>EWS<span class="black">Latest news!</span></a>
<hr></hr>
<p> </p>
<h2>Links</h2>
<p><a href="http://www.thehartfoundation.com">The Hart Foundation</a></p>
<p><a href="http://www.kingofharts.com">Owen Hart</a></p>
<p><a Href="http://www.harrybulldogsmith.com">Harry Smith</a></p>
</div>
</div>
<div id="right_column">
<div class="main_article">
<p> </p>
<h2 align="center">Welcome to</h2>
<p> </p>
<h2 align="center"><img src="../images/logos/brethartinfo.gif" alt="www.brethart.info" /></h2>
<h2> </h2>
<h2 align="center">The only online home for Hitman fans worldwide, Bret
Hart's Number 1 Fansite! Please click here for <a href="help.php">Help</a>,
and information on the features of this Bret Hart fansite, including
the best ways to view it.</h2>
<p align="center"> </p>
<p align="center">Forum guys if you find this PM me before telling anyone!</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="other">
<div class="right">
<h2>Headlines</h2>
<p><?php include("../phpnews/headlines.php");?></p>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
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!
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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="robots" content="all" />
<meta name="author" content="Kevin Smith(www.BRETHART.info)" />
<meta name="Copyright" content="www.brethart.info" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="images/style.css" rel="stylesheet" type="text/css" />
<title>
</title>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="header">
</div>
<div id="left_column">
<div id="menu">
<hr></hr>
<a href="index.php" accesskey="h" title="Accesskey: H"><span class="underline">H</span>OME<span class="black">Go to homepage</span></a>
<a href="info.php" accesskey="i" title="Accesskey: I"><span class="black1">.</span><span class="underline">I</span>NFO<span class="black">Info on Bret Hart</span></a>
<a href="thedungeon.php" accesskey="t" title="Accesskey: T"><span class="underline">T</span>HE DUNGEON<span class="black">Multimedia</span></a>
<a href="merchandise.php" accesskey="m" title="Accesskey: M"><span class="underline">M</span>ERCHANDISE<span class="black">Store</span></a>
<a href="about.php" accesskey="a" title="Accesskey: A"><span class="underline">A</span>BOUT<span class="black">Who are we?</span></a>
<a href="news.php" accesskey="n" title="Accesskey: N"><span class="underline">N</span>EWS<span class="black">Latest news!</span></a>
<hr></hr>
<p> </p>
<h2>Links</h2>
<p><a href="http://www.thehartfoundation.com">The Hart Foundation</a></p>
<p><a href="http://www.kingofharts.com">Owen Hart</a></p>
<p><a Href="http://www.harrybulldogsmith.com">Harry Smith</a></p>
</div>
</div>
<div id="right_column">
<div class="main_article">
<p> </p>
<h2 align="center">Welcome to</h2>
<p> </p>
<h2 align="center"><img src="../images/logos/brethartinfo.gif" alt="www.brethart.info" /></h2>
<h2> </h2>
<h2 align="center">The only online home for Hitman fans worldwide, Bret
Hart's Number 1 Fansite! Please click here for <a href="help.php">Help</a>,
and information on the features of this Bret Hart fansite, including
the best ways to view it.</h2>
<p align="center"> </p>
<p align="center">Forum guys if you find this PM me before telling anyone!</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="other">
<div class="right">
<h2>Headlines</h2>
<p><?php include("../phpnews/headlines.php");?></p>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
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!