PDA

View Full Version : Drop Down Menu



afreshour
05-29-2011, 05:47 AM
1) Script Title:
AnyLink JS Drop Down Menu v2.2

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem:
I am an elementary school teacher and am in the process of launching my own website that I host and design myself. Because of the complicated navigation, I wanted to be able to use a drop down menu. I bought a website from a graphics person that sells to a lot of teachers, and I love the look of it, I just can't figure out how to do the drop down menus. The navigation of the page is based on images at the top, and I've tried placing this code in there and uploading the corresponding files, but I cannot for the life of me get it to work. I think it has to do with the way she set up the tables, but I could be wrong. I have basic html knowledge, so this more advanced stuff is boggling my mind.

My website link is www.mrsfreshour.com

If anyone could please look at the code and see where I'm supposed to insert the individual commands for the anchors, It would be greatly appreciated. Thanks so much!

~Amber

ddadmin
05-30-2011, 09:09 PM
Simply install the script per the instructions on the script page, and then for your anchor links, you'd add:


class="menuanchorclass" rel="anylinkmenuX"

inside the IMG tag of each of them, where X should be replaced with an integer. The below is the source of your entire page, but with Anylink menu added (additions in red):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Mrs. Freshour's 3rd Grade</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #66FFFF;
background-image: url(images/lk8_bkgnd.gif);
}
-->
</style>

<link rel="stylesheet" type="text/css" href="anylinkmenu.css" />

<script type="text/javascript" src="menucontents.js"></script>

<script type="text/javascript" src="anylinkmenu.js">

/***********************************************
* AnyLink JS Drop Down Menu v2.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")

</script>

</head>
<body link="#000000" vlink="#000000" alink="#000000">
&gt;
<div align="center">
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2" height="101" width="252"><img
src="images/sitename_1x1.gif" height="101" width="252"></td>
<td height="16" width="470"><img
src="images/sitename_1x2.gif" height="16" width="470"></td>
<td rowspan="2" height="101" width="253"><img
src="images/sitename_1x3.gif" height="101" width="253"></td>
</tr>
<tr>
<td height="85" width="470"><img src="images/sitename.gif"
height="85" width="470"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="140" width="188"><img src="images/main_2x1.gif"
height="140" width="188"></td>
<td width="154"><img src="images/main_2x2.gif" height="140"
width="154"></td>
<td width="146"><img src="images/main_2x3.gif" height="140"
width="146"></td>
<td width="143"><img src="images/main_2x4.gif" height="140"
width="143"></td>
<td width="144"><img src="images/main_2x5.gif" height="140"
width="144"></td>
<td width="200"><img src="images/main_2x6.gif" height="140"
width="200"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="images/main_3x1.gif" height="76" width="52"></td>
<td><a href="index.htm"><img src="images/btn1.gif"
height="76" width="136" border="0" class="menuanchorclass" rel="anylinkmenu1"></a></td>
<td><a href="page2.htm"><img src="images/btn2.gif"
height="76" width="154" border="0" class="menuanchorclass" rel="anylinkmenu2"></a></td>
<td><a href="page3.htm" class="menuanchorclass" rel="anylinkmenu3"><img src="images/btn3.gif"
height="76" width="146" border="0"></a></td>
<td><a href="page4.htm"><img src="images/btn4.gif"
height="76" width="143" border="0" class="menuanchorclass" rel="anylinkmenu4"></a></td>
<td><a href="page5.htm"><img src="images/btn5.gif"
height="76" width="144" border="0"></a></td>
<td> <a target="_blank"
href="http://www.swain.k12.nc.us/education/school/school.php?sectionid=98"><img
src="images/btn6.gif" height="76" width="141" border="0"></a></td>
<td><img src="images/main_3x8.gif" height="76" width="59"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="52" background="images/main_4x1.gif">&nbsp;</td>
<td valign="top" width="864" bgcolor="#ffffff">
<p align="center">&nbsp;</p>
<p align="center"><b><font face="Verdana" size="6">Welcome
to Mrs. Freshour's 3rd Grade Class!</font></b></p>
<p align="center"><font face="Verdana" size="4">• • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •</font></p>
<p align="center"><font face="Verdana" size="3">Thanks for
visiting our classroom website! This site is designed to be used by
both parents and students of our classroom as a resource tool. It is
primarily a way to keep everyone up-to-date on the homework, projects,
and activities that are taking place throughout the year. There are
also many fun and interesting things to do and see. Use the tabs at the
top of the page to navigate through the various parts of this
website.&nbsp; Roll up your sleeves, and get ready to dig in!&nbsp;
Enjoy!</font></p>
<p align="center"><font face="Verdana" size="4">• • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •</font></p>
<p align="center"><b><font face="Verdana" size="4">Announcements<br>
</font></b></p>
<table
style="text-align: left; width: 607px; margin-left: auto; margin-right: auto; height: 100px;"
border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">
<div style="text-align: left;">
<div style="text-align: center;"><big><small><small><br>
</small></small>Open House will be Tuesday, August
9th.<br>
<small><small><br>
&nbsp;</small></small>The first day of school is Wednesday, August 10th.<small><small><br>
<br>
</small></small></big></div>
<div style="text-align: center;"><big>The first day
of school will be a half day, and students will dismiss at 11:30 a.m.<small><small><br>
<br>
</small></small></big></div>
</div>
</td>
</tr>
</tbody>
</table>
<p align="center"><br>
</p>
<p align="center"><b><font face="Verdana" size="4"> <small>•

















• • • • • • • • • • • • • • • • • • • •</small></font></b></p>
<b> </b>
<p align="center"><b><font face="Verdana" size="4"><b> <a
href="mailto:afreshour@swainmail.org"> <img src="images/email.gif"
height="60" width="60" border="0"></a><br>
<small>Amber Freshour<br>
</small> </b></font><small><font face="Verdana" size="3"><small><b>West
Elementary
School</b><br>
4142 Highway 19 West<br>
Bryson City, NC 28713<br>
828.488.2119</small></font></small></b></p>
<b> </b>
<p><b>&nbsp; </b></p>
<b> </b></td>
<td width="59" background="images/main_4x3.gif">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="76" width="133"><img src="images/main_5x1.gif"
height="76" width="133"></td>
<td height="76" width="639" background="images/main_5x2.gif">
<p align="center"><font face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
All
Information</font><font face="Times New Roman"> &copy; </font> <font
face="Verdana">2011 Amber Freshour</font></p>
</td>
<td height="76" width="203"><img src="images/main_5x3.gif"
height="76" width="203"></td>
</tr>
<tr>
<td height="68" width="133"><img src="images/main_6x1.gif"
height="68" width="133"></td>
<td height="68" width="639"><img src="images/main_6x2.gif"
height="68" width="639"></td>
<td height="68" width="203"><a
href="http://www.thistlegirldesigns.com" target="_blank"><img
src="images/main_6x3.gif"
alt="This website template was purchased at ThistleGirl Designs."
height="68" width="203" border="0"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Here I've stopped at the 4 anchor, since inside the default menucontents.js, there are only four drop down menus defined (anylinkmenu1, anylinkmenu2, etc). You should define additional drop down menus inside this .js file first before applying it to additional anchor links on your page.