Advertisement

02.01.2007 at 08:27PM PST, ID: 22146542
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
7.0

[1000 Points] Need to add dynamic menu as a horizontal menu bar on a website - logic provided

Asked by super786 in Cascading Style Sheets (CSS)

Tags: ,

OK Experts: I need super-fast help on this one.

The menubar on this website (actual) www.shantycreek.com/beta is really not working right. So I downloaded a template of a dynamic menubar. All I want to do now is to be able to modify it a little bit to reflect MY items. So now I have the following files:

- index.html
- topmenu.js

Following is the logic I have right now for both of them:

----------------INDEX.HTML-------------------------
<html>

<head>
<title>Shanty Creek Resort & Club (Bellaire, MI) - Northern Michigan Golf, Ski, Dining and Meetings</title>
<meta name="Keywords" content="Shanty Creek, Shanty Creek Resort, Shanty Creek Hotel, Shanty Creek Lodge, Shanty
      Creek Golf, Shanty Creek Ski, Shanty Creek Bellaire, Schuss Mountain Mancelona, Schuss Mountain Bellaire, Northern
      Michigan Meetings, Michigan Meetings, Shanty Creek Board Schuss Mountain, Shanty Creek Michigan, Shanty Creek
      Resort Michigan, Schuss Mountain Michigan, Summit, Summit Village, Summit Michigan, Cedar River, Cedar River Village,
      Cedar River Michigan, Schuss Mountain Golf, The Legend, Legend, The Legend Golf, Legend Golf, Summit Golf, Schuss Golf,
      shantycreek.com, schussmountain.com, michigan skiing, michigan golfing, michigan ski, michigan golf,  Northern Michigan
       Hotel, Northern Michigan Motel, Northern Michigan Resort, Northern Michigan Vacation, Northern Michigan Family vacation,
        Northern Michigan family resort, Northern Michigan real estate, Northern Michigan Golf, Northern Michigan skiing,
        Northern Michigan Ski, Northern Michigan snowboarding, Northern Michigan Boarding, ">
<meta name="Description" content="The whole family can enjoy the comforts of a home-away-from-home at this remarkable
      European-inspired Northern Michigan Resort in Bellaire, MI. An array of Michigan guest accommodations-villas, condos">
      
      
<LINK REL="stylesheet" HREF="css/style.css" TYPE="TEXT/CSS">
<SCRIPT LANGUAGE="JavaScript" SRC="js/fullday.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="slideimage.js"></SCRIPT>
<script type="text/javascript" src="js/dropdown.js"></script>
<SCRIPT language=JavaScript src="js/calendarpop.js"></SCRIPT>
<SCRIPT language=JavaScript src="js/pita.js"></SCRIPT>
<SCRIPT language=JavaScript src="js/pita2.js"></SCRIPT>
<SCRIPT language=JavaScript>document.write(CalendarPopup_getStyles());</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
      background-image: url(images/snowbg.jpg);
}
-->
</style>
</head>

<body bgcolor="#ffffff" onload="init();runSlideShow();">
<center><table width="800" cellpadding="0" cellspacing="0" border="0" bgcolor="#b9d9ef"><tr>
<td width="5"></td><td valign="top" class="topsm"><a href="evtcalendar.html">Events Calendar</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;<a href="creekconcierge.html">Creek Concierge</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;<a href="directions.html">Directions</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;<a href="gallery.html">Photo Gallery</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;<a href="store.html">Shanty Store</a>
            </td>
<td align="right" class="topsm"><a class="topsm" href="http://68.178.180.117/po/login.htm" target="_blank">Property Owners</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="topsm" href="http://68.178.180.117/mtcreek/login.htm" target="_blank">Club Members</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="topsm" href="index.html">Home</a></td><td width="5"></td></tr></table>
<table width="800" cellpadding="0" cellspacing="0" height="100%" border="0" bgcolor="#ffffff"><tr>
<td valign="top" class="main"><table width="800" cellspacing="0" cellpadding="0" border="0"  bgcolor="#1b437f" background="images/snowflaketopbg.gif">
<tr height="140">
<td valign="top" width="244" class="topko" align="center"><center><img src="blank.gif" width="100" height="8"></center>
<img src="images/logodkblu.gif" width="214" height="92" alt="Shanty Creek Resort & Club" hspace="20"/>
<center>One Shanty Creek Road &middot;
Bellaire, MI 49615<br />
(866) 408-5218 &middot; (231) 533-8621</center>
</td><td class="main" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
  id="shantytop" width="545" height="120">
  <param name="movie" value="http://www.shantycreek.com/shantytop.swf">
  <param name="bgcolor" value="#1b437f">
  <param name="quality" value="high">
  <param name="allowscriptaccess" value="samedomain">
  <embed type="application/x-shockwave-flash"
   pluginspage="http://www.macromedia.com/go/getflashplayer"
   width="600" height="120"
   name="shantytop" src="http://www.shantycreek.com/shantytop.swf"
   bgcolor="#464966" quality="high"
   swLiveConnect="true" allowScriptAccess="samedomain"
  ></embed>
</object>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
  id="sound" width="120" height="20" align="right">
    <param name="movie" value="sound.swf">
      <param name="bgcolor" value="#1b437f">
    <param name="quality" value="high">
      <embed type="application/x-shockwave-flash"
      width="120" height="20" src="sound.swf"
         bgcolor="#464966" quality="high" name="sound"
      pluginspage="http://www.macromedia.com/go/getflashplayer"
      ></embed>
  </object>

</td></tr>
</table>

<!-- TOP MENU NAVIG -->
<table width="800" cellspacing="0" cellpadding="0" border="0" bgcolor="#b9d9ef">
<tr height="20">
<td><table cellpadding="0" cellspacing="0" align="center" border="0" width="768"><tr>
<td class="main" width="80" align="center"><a class="topnav" href="villages/index.html"><div id="menu5_parent" align="center">The Villages</div></a>
<div id="menu5_child" style="padding-left:10px;">
<table width="125" cellpadding="3" cellspacing="0" border="0" class="navtab">
<tr><td><a class="topnavko" href="villages/cedar/index.html">Cedar River Village</a></td></tr>
<tr><td><a class="topnavko" href="villages/schuss/index.html">Schuss Village</a></td></tr>
<tr><td><a class="topnavko" href="villages/summit/index.html">Summit Village</a></td></tr>
</table></div>
<script type="text/javascript">
at_attach("menu5_parent", "menu5_child", "hover", "y", "pointer");
</script></a></td><td class="topsm" width="2">|</td>
<td class="main" width="155" align="center"><a class="topnav" href="dining/index.html">
  <div id="menu4_parent" align="center"><center>Dining & Entertainment</center></div></a>
<div id="menu4_child" style="padding-left:5px;">
<table width="140" cellpadding="3" cellspacing="0" border="0" class="navtab">
<tr><td><a class="topnavko" href="dining/sundaybrunch.html">Sunday Brunch</a></td>
</tr>
<tr><td><a class="topnavko" href="dining/entcalendar.html">Entertainment Calendar</a></td>
</tr>
</table></div>
<script type="text/javascript">
at_attach("menu4_parent", "menu4_child", "hover", "y", "pointer");
</script></a></td><td class="topsm" width="2">|</td>
<td class="main" width="50" align="center"><a class="topnav" href="golf/index.html"><div id="menu_parent" align="center"><center>Golf</center></div></a>
<div id="menu_child" style="padding-left:10px;">
<table width="160" cellpadding="3" cellspacing="0" border="0" class="navtab">
<tr><td><a class="topnavko" href="golf/packages.html">Golf Packages</a></td></tr>
<tr><td><a class="topnavko" href="golf/courses.html">Golf Courses</a></td></tr>
<tr><td><a class="topnavko" href="golf/academy.html">Shanty Creek Golf Academy</a></td></tr>
</table></div>
<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "y", "pointer");
</script></a></td><td class="topsm" width="2">|</td>
<td class="main" width="90" align="center"><a class="topnav" href="snowsports/index.html"><div id="menu2_parent" align="center">Snowsports</div></a>
<div id="menu2_child" style="padding-left:10px;">
<table width="140" cellpadding="3" cellspacing="0" border="0" class="navtab">
<tr><td><a class="topnavko" href="snowsports/skipackages.html">Ski Packages</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/snowconditions.html">Snow Conditions</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/seasonpasses.html">Season Passes</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/lifttickets.html">Lift Tickets</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/rentals.html">Rentals</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/hoursofop.html">Hours of Operation</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/trailmap.html">Trail Map</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/clinics.html">Clinics & Lessons</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/childrenprograms.html">Children's&nbsp;Programs</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/tubing.html">Tubing</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/terrainparks.html">Terrain Parks</a></td></tr>
<tr><td><a class="topnavko" href="snowsports/crosscountry.html">Cross Country</a></td></tr>
</table></div>

<script type="text/javascript">
at_attach("menu2_parent", "menu2_child", "hover", "y", "pointer");
</script></a></td><td class="topsm" width="2">|</td>
<td class="main" width="100" align="center"><a class="topnav" href="spa/index.html"><div id="menu3_parent" align="center">Spa & Fitness</div></a>
<div id="menu3_child" style="padding-left:5px;">
<table width="120" cellpadding="3" cellspacing="0" border="0" class="navtab">
<tr><td><a class="topnavko" href="spa/packages.html">Spa Packages</a></td></tr>
<tr><td><a class="topnavko" href="spa/treatments.html">Spa Treatments</a></td></tr>
<tr><td><a class="topnavko" href="spa/fitness.html">Fitness</a></td></tr>
</table></div>
<script type="text/javascript">
at_attach("menu3_parent", "menu3_child", "hover", "y", "pointer");
</script></a></td><td class="topsm" width="2">|</td>
<td class="main" width="77" align="center"><a class="topnav" href="recreation/index.html"><div id="menu7_parent" align="center">Recreation</div></a>
<div id="menu7_child" style="padding-left:10px;">
<table width="90" cellpadding="3" cellspacing="0" border="0" class="navtab">
<tr><td><a class="topnavko" href="recreation/spring.html">Spring</a></td></tr>
<tr><td><a class="topnavko" href="recreation/summer.html">Summer</a></td></tr>
<tr><td><a class="topnavko" href="recreation/fall.html">Fall</a></td></tr>
<tr><td><a class="topnavko" href="recreation/winter.html">Winter</a></td></tr>
</table></div>
<script type="text/javascript">
at_attach("menu7_parent", "menu7_child", "hover", "y", "pointer");
</script></a></td><td class="topsm" width="2">|</td>
<td class="main" width="125" align="center"><a class="topnav" href="meeting/index.html">
  <div id="menu8_parent" align="center">Meetings & Events</div></a>
<div id="menu8_child" style="padding-left:15px;">
<table width="120" cellpadding="3" cellspacing="0" border="0" class="navtab">
<tr><td><a class="topnavko" href="villages/cedar/meet.html">Cedar River Facilities</a></td></tr>
<tr><td><a class="topnavko" href="villages/summit/meet.html">Summit Facilities</a></td></tr>
<tr><td><a class="topnavko" href="villages/schuss/meet.html">Schuss Facilities</a></td></tr>
<tr><td><a class="topnavko" href="meeting/wedding.html">Weddings</a></td>
</tr>
<tr><td><a class="topnavko" href="meeting/banquet.html">Banquet Menus</a></td>
</tr>
<tr><td><a class="topnavko" href="meeting/rfp.html">RFP</a></td>
</tr>
</table></div>
<script type="text/javascript">
at_attach("menu8_parent", "menu8_child", "hover", "y", "pointer");
</script></a></td><td class="topsm" width="2">|</td>
<td class="main" width="80" align="center"><a class="topnav" href="contact.html">Contact Us</a></td>
</tr></table></td>
</tr></table>



<!-- opener-->
<table width="800" cellpadding="0" cellspacing="0">
<tr height="18"><td align="center"><span class="small"></td></tr>
<tr height="260" bgcolor="#72a5c6">
<td width="150" class="main" valign="top" align="center" background="images/snowbg.jpeg"><FORM name=checkaressrch action=http://www.secure-res.com/res/vn2/checka.asp
method=get><DIV align=center>
    <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0
cellPadding=0  border=0>
  <TBODY>
  <TR>
    <TD colSpan=2 class="cal"><br><br><B>Check-In
      Date:&nbsp;&nbsp;</B> <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SELECT size=1 name=month class="small"> <OPTION value=1
        selected>Jan</OPTION> <OPTION value=2>Feb</OPTION> <OPTION
        value=3>Mar</OPTION> <OPTION value=4>Apr</OPTION> <OPTION
        value=5>May</OPTION> <OPTION value=6>Jun</OPTION> <OPTION
        value=7>Jul</OPTION> <OPTION value=8>Aug</OPTION> <OPTION
        value=9>Sep</OPTION> <OPTION value=10>Oct</OPTION> <OPTION
        value=11>Nov</OPTION> <OPTION
      value=12>Dec</OPTION></SELECT>&nbsp; <SELECT size=1 name=day class="small">
        <OPTION value=1 selected>1</OPTION> <OPTION value=2>2</OPTION> <OPTION
        value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION value=5>5</OPTION>
        <OPTION value=6>6</OPTION> <OPTION value=7>7</OPTION> <OPTION
        value=8>8</OPTION> <OPTION value=9>9</OPTION> <OPTION
        value=10>10</OPTION> <OPTION value=11>11</OPTION> <OPTION
        value=12>12</OPTION> <OPTION value=13>13</OPTION> <OPTION
        value=14>14</OPTION> <OPTION value=15>15</OPTION> <OPTION
        value=16>16</OPTION> <OPTION value=17>17</OPTION> <OPTION
        value=18>18</OPTION> <OPTION value=19>19</OPTION> <OPTION
        value=20>20</OPTION> <OPTION value=21>21</OPTION> <OPTION
        value=22>22</OPTION> <OPTION value=23>23</OPTION> <OPTION
        value=24>24</OPTION> <OPTION value=25>25</OPTION> <OPTION
        value=26>26</OPTION> <OPTION value=27>27</OPTION> <OPTION
        value=28>28</OPTION> <OPTION value=29>29</OPTION> <OPTION
        value=30>30</OPTION> <OPTION value=31>31</OPTION></SELECT>&nbsp; <SELECT
      size=1 name=year class="small">
        <SCRIPT language=javascript>
                                                                                                                  var tdate = new Date()
                                                                                                                  var curyr = tdate.getFullYear();
                                                                                                                  for (var jj=0; jj<3; jj++) {
                                                                                                                        document.write('<option value=' + (curyr+jj) + '>' + (curyr+jj) + '</option>');
                                                                                                                  }
                                                            </SCRIPT>
      </SELECT><A  class="small" id=anchor
      onclick="cal.showCalendar('anchor',getDateString(document.checkaressrch.year,document.checkaressrch.month,document.checkaressrch.day)); return false;"
      href="http://www.secure-res.com/res/vn2/search-box2.htm#"
      name=anchor><img src="images/calendar.gif" width="19" height="18" align="absmiddle" border="0" /></A></FONT></FONT></TD></TR>
  <TR>
    <TD align=left width=90 class="cal"><B><BR>Nights:</B> <SELECT
      size=1 name=nights class="small"> <OPTION value=1>1</OPTION> <OPTION
        value=2>2</OPTION> <OPTION value=3 selected>3</OPTION> <OPTION
        value=4>4</OPTION> <OPTION value=5>5</OPTION> <OPTION value=6>6</OPTION>
        <OPTION value=7>7</OPTION> <OPTION value=8>8</OPTION> <OPTION
        value=9>9</OPTION> <OPTION value=10>10</OPTION> <OPTION
        value=11>11</OPTION> <OPTION value=12>12</OPTION> <OPTION
        value=13>13</OPTION> <OPTION value=14>14</OPTION></SELECT></TD>
    <TD width=90 class="cal" align="right"><B><BR>&nbsp;Rooms:
      </B>&nbsp;<SELECT size=1 name=rooms class="small"> <OPTION value=1
        selected>1</OPTION> <OPTION value=2>2</OPTION> <OPTION
        value=3>3</OPTION> <OPTION value=4>4</OPTION></SELECT></TD></TR>
  <TR>
    <TD vAlign=bottom align=left width=90 class="cal"><B>Adults:</B> <SELECT size=1 name=adults class="small"> <OPTION value=1
        selected>1</OPTION> <OPTION value=2>2</OPTION> <OPTION
        value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION value=5>5</OPTION>
        <OPTION value=6>6</OPTION> <OPTION value=7>7</OPTION> <OPTION
        value=8>8</OPTION> <OPTION value=9>9</OPTION></SELECT></TD>
    <TD vAlign=bottom width=90 class="cal" align="right"><B><BR>Children:</B></FONT> <SELECT size=1 name=children class="small"> <OPTION
        value=0 selected>0</OPTION> <OPTION value=1>1</OPTION> <OPTION
        value=2>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION>
        <OPTION value=5>5</OPTION> <OPTION value=6>6</OPTION> <OPTION
        value=7>7</OPTION> <OPTION value=8>8</OPTION> <OPTION
      value=9>9</OPTION></SELECT></TD></TR></TBODY></TABLE></DIV>
<P align=center class="main" title="Check availability for your Shanty Creek getaway"><INPUT type=submit value="Check Availability" name=B1 class="button" style="cursor:hand; width:125px; height:23px;"></P><INPUT
type=hidden value=2818 name=hotelid> </FORM>
<center><img src="images/weatherhold.gif" width="180" height="75" /></center></td>
<td valign="bottom"><center>
<img src="images/home1.jpg" name='SlideShow'  width="590" height="260"/>  <!-- Front Flash Pictures-->
</center></td></tr>
</table>
<!--bottom table-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"><tr>
<td valign="top" width="559" class="pad"><br />
<h4>Experience the Wintry Wonderland of Schuss and Summit Mountains at Shanty Creek Resort & Club in Michigan.
</h4>
<p>Discover the grandeur of snow-covered majestic mountains, a skier and snowboarder's paradise, right in your own backyard.
    <span class="pad"></span></p>
<span class="pad"><p>Surrender yourself to the tranquil splendor of awe-inspiring landscapes in Northern MI at our beautiful Michigan hotel.  After an invigorating day on the slopes, cozy up to a roaring fire while sipping your favorite winter delight. Our extensive family programs allow parents and children to design a personalized vacation that is sure to please every member. Shanty Creek's state-of-the-art facilities coupled with inspiring views from every window make for an environment conducive to maximum productivity, creating the perfect venue to mix business and pleasure. Invite your guests to experience the unrivaled beauty and excitement of our mountain retreat by hosting your next corporate event or the Michigan wedding of your dreams at Shanty Creek Resort.<br><br>
Cherish the ones you love in our enchanting hideaway - a place where passion is inspired and families connect. Share a romantic sunset dinner overlooking picturesque Lake Bellaire or make S'mores with your family as you warm your hands and hearts at Ivan's Fire Pit. <br><br>
Explore a world of wondrous adventure in one Bellaire, Michigan resort. From horse-drawn carriage rides through the north woods to snowboarding the slopes of Schuss Mountain, Shanty Creek Resort provides a magical setting for your Michigan winter getaway. Exquisite amenities, extensive services and exciting programs make Shanty Creek Resort & Club the best place to vacation in Michigan.<br>
</p>
<p>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="560" height="155">
    <param name="movie" value="ShantyFilmStrip.swf">
    <param name="quality" value="high"><param name="SCALE" value="exactfit">
    <embed src="ShantyFilmStrip.swf" width="560" height="155" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" scale="exactfit"></embed>
  </object>
</p>
</span></td>
<td width="20"></td>
<td valign="top" width"140"><!--bottom main --><center><img src="blank.gif" width="100" height="8"></center>
<center><img src="blank.gif" width="100" height="4"></center><table cellpadding="0" cellspacing="0" width="140"><tr>
<!-- villages-->
<td width="140" valign="top"><span class="btnav"><a href="hotels/index.html"><span class="header">OUR VILLAGES</span></a><hr size="1">
<div class="dash"><img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="villages/cedar/index.html">Cedar River Village</a></div>
<center><img src="blank.gif" width="100" height="3"></center>
<div class="dash"><img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="villages/summit/index.html">Summit Village</a></div>
<center><img src="blank.gif" width="100" height="3"></center>
<div class="dash"><img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="villages/schuss/index.html">Schuss Village</a></div>
</td></tr>
<tr height="10"><td class="main"></td></tr><tr>
<!-- guide-->
<td valign="top" width="140"><span class="btnav"><a href="#"><span class="header">GUIDE TO...</span></a><hr size="1" width="140" align="left">
<div class="dash"><img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="snowsports/index.html">Snowsports</a></div>
<center><img src="blank.gif" width="100" height="3"></center>
<div class="dash"><img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="golf/index.html">Golf</a></div>
<center><img src="blank.gif" width="100" height="3"></center>
<div class="dash"><img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="meeting/index.html">Meetings & Events</a></div>
<center><img src="blank.gif" width="100" height="3"></center>
<div class="dash"><img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="dining/index.html">Dining & Entertainment</a></div>
<center><img src="blank.gif" width="100" height="3"></center>
<img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="spa/index.html">Spa & Fitness</a>
<div class="dash"></div><center><img src="blank.gif" width="100" height="3"></center>
<img src="images/arrowxm.gif" width="8" height="8" align="absmiddle"/> <a class="btnav" href="recreation/index.html">Recreation & Activities</a>
</td></tr>
</table>
 <br /><br />
</td>
</tr></table></td></tr>
<tr height="20"><td bgcolor="#72a5c6">&nbsp;&nbsp;<a class="topsm" href="aboutus.html">About Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="topsm" href="news.html">Current News</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="topsm" href="press.html">Press Room</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="topsm" href="jobs.html">Employment</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="topsm" href="realestate.html">Real Estate</a></td></tr>
</table>
<center><img src="blank.gif" width="100" height="3"></center>
<table width="800" cellpadding="0" cellspacing="0">
<tr><td><span class="small">&nbsp;&nbsp;Another <a href="http://www.wrsol.com/partners/wrsdevelopment.html" target="_blank" class="small">WRS</a>/<a href="http://www.iciwebsolutions.com" target="_blank" class="small">ICI</a> Production
</td><td align="right"><span class="small">&nbsp;&nbsp;<a class="small" href="sitemap.html">Site Map</a> &nbsp;&nbsp;|&nbsp;&nbsp;<a class="small" href="privacy.html">Privacy Statement</a>&nbsp;&nbsp;|&nbsp;&nbsp;&copy; <SCRIPT language="JavaScript"> document.write(WriteYearOptions(1)); </SCRIPT> <a class="small" href="http://www.shantycreek.com">Shanty Creek Resort & Club</a> &nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>


</body>

</html>
-------------------------------------------------------------------------------------------------------


-----------------TOPMENU.JS--------------------------------


<!-- Begin
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
}
// Hide timeout.
var popTimer = 0;
// Array showing highlighted menu items.
var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = 'visible';
      }
   }
}
function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}
function getTree(menuNum, itemNum) {

// Array index is the menu number. The contents are null (if that menu is not a parent)
// or the item number in that menu that is an ancestor (to light it up).
itemArray = new Array(menu.length);

while(1) {
itemArray[menuNum] = itemNum;
// If we've reached the top of the hierarchy, return.
if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
   }
}

// Pass an array and a boolean to specify colour change, true = over colour.
function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
// Change the colours of the div/layer background.
with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
         }
      }
   }
}
function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}

// *** MENU CONSTRUCTION FUNCTIONS ***

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {
// True or false - a vertical menu?
this.isVert = isVert;
// The popout indicator used (if any) for this menu.
this.popInd = popInd
// Position and size settings.
this.x = x;
this.y = y;
this.width = width;
// Colours of menu and items.
this.overCol = overCol;
this.backCol = backCol;
// The stylesheet class used for item borders and the text within items.
this.borderClass = borderClass;
this.textClass = textClass;
// Parent menu and item numbers, indexed later.
this.parentMenu = null;
this.parentItem = null;
// Reference to the object's style properties (set later).
this.ref = null;
}

function Item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
// Reference to the object's style properties (set later).
this.ref = null;
}

function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
// Variable for holding HTML for items and positions of next item.
var str = '', itemX = 0, itemY = 0;

// Remember, items start from 1 in the array (0 is menu object itself, above).
// Also use properties of each item nested in the other with() for construction.
for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;

// The width and height of the menu item - dependent on orientation!
var w = (isVert ? width : length);
var h = (isVert ? length : width);

// Create a div or layer text string with appropriate styles/properties.
// Thanks to Paul Maden (www.paulmaden.com) for helping debug this in IE4, apparently
// the width must be a miniumum of 3 for it to work in that browser.
if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
if (backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' +  w + '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';

// Add mouseover handlers and finish div/layer.
str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';

// Add contents of item (default: table with link inside).
// In IE/NS6+, add padding if there's a border to emulate NS4's layer padding.
// If a target frame is specified, also add that to the <a> tag.

str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>';
if (target > 0) {

// Set target's parents to this menu item.
menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;

// Add a popout indicator.
if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}

// Insert a div tag to the end of the BODY with menu HTML in place for IE4.
if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}

// In NS4, create a reference to a new layer and write the items to it.
if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
   }
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
   }
}

// Syntaxes: *** START EDITING HERE, READ THIS SECTION CAREFULLY! ***
//
// menu[menuNumber][0] = new Menu(Vertical menu? (true/false), 'popout indicator', left, top,
// width, 'mouseover colour', 'background colour', 'border stylesheet', 'text stylesheet');
//
// Left and Top are measured on-the-fly relative to the top-left corner of its trigger, or
// for the root menu, the top-left corner of the page.
//
// menu[menuNumber][itemNumber] = new Item('Text', 'URL', 'target frame', length of menu item,
//  additional spacing to next menu item, number of target menu to popout);
//
// If no target menu (popout) is desired, set it to 0. Likewise, if your site does not use
// frames, pass an empty string as a frame target.
//
// Something that needs explaining - the Vertical Menu setup. You can see most menus below
// are 'true', that is they are vertical, except for the first root menu. The 'length' and
// 'width' of an item depends on its orientation -- length is how long the item runs for in
// the direction of the menu, and width is the lateral dimension of the menu. Just look at
// the examples and tweak the numbers, they'll make sense eventually :).

var menu = new Array();

// Default colours passed to most menu constructors (just passed to functions, not
// a global variable - makes things easier to change later in bulk).
var defOver = '#336699', defBack = '#003366';

// Default 'length' of menu items - item height if menu is vertical, width if horizontal.
var defLength = 22;

// Menu 0 is the special, 'root' menu from which everything else arises.
menu[0] = new Array();
// A non-vertical menu with a few different colours and no popout indicator, as an example.
// *** MOVE ROOT MENU AROUND HERE ***  it's positioned at (5, 0) and is 17px high now.
menu[0][0] = new Menu(false, '', 5, 0, 17, '#669999', '#006666', '', 'itemText');
// Notice how the targets are all set to nonzero values...
// The 'length' of each of these items is 40, and there is spacing of 10 to the next item.
// Most of the links are set to '#' hashes, make sure you change them to actual files.
menu[0][1] = new Item('  File', '#', '', 40, 10, 1);
menu[0][2] = new Item('  Edit', '#', '', 40, 10, 2);
menu[0][3] = new Item('  Help', '#', '', 40, 10, 3);
// An example of a link with a target frame/window as well...
menu[0][4] = new Item('  Site', 'http://gusnz.cjb.net', '_new', 40, 10, 0);

// File menu.
menu[1] = new Array();
// The File menu is positioned 0px across and 22 down from its trigger, and is 80 wide.
// All text in this menu has the stylesheet class 'item' -- see the <style> section above.
// We've passed a 'greater-than' sign '>' as a popout indicator. Try an image...?
menu[1][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[1][1] = new Item('Open', '#', '', defLength, 0, 0);
menu[1][2] = new Item('Save', '#', '', defLength, 0, 0);
// Non-zero target means this will trigger a popout -- menu[4] which is the 'Reopen' menu.
menu[1][3] = new Item('Reopen', '#', '', defLength, 0, 4);
menu[1][4] = new Item('Exit', '#', '', defLength, 0, 0);

// Edit menu.
menu[2] = new Array();
menu[2][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[2][1] = new Item('Cut', '#', '', defLength, 0, 0);
menu[2][2] = new Item('Copy', '#', '', defLength, 0, 0);
menu[2][3] = new Item('Paste', '#', '', defLength, 0, 0);

// Help menu
menu[3] = new Array();
menu[3][0] = new Menu(true, '<', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[3][1] = new Item('Contents', '#', '', defLength, 0, 0);
menu[3][2] = new Item('Index', '#', '', defLength, 0, 0);
menu[3][3] = new Item('About', '#', '', defLength, 0, 5);

// Reopen menu
menu[4] = new Array();
// This is across but not down... a horizontal popout (with crazy stylesheets :)...
menu[4][0] = new Menu(true, '>', 85, 0, 120, '#333366', '#666699', 'crazyBorder', 'crazyText');
// These items are lengthier than normal, and have extra spacing due to the fancy borders.
menu[4][1] = new Item('Recent Doc 1:<br>Schedule', '#', '', 36, 4, 0);
menu[4][2] = new Item('Recent Doc 2:<br>Plan', '#', '', 36, 7, 0);
menu[4][3] = new Item('Etc. etc...', '#', '', defLength, 0, 0);

// Help About popout
menu[5] = new Array();
// Leftwards popout with a negative x and y relative to its trigger.
menu[5][0] = new Menu(true, '>', -85, -17, 80, defOver, defBack, 'itemBorder', 'itemText');
menu[5][1] = new Item('Leftwards!<br>And up!', '#', '', 40, 0, 0);


//  End -->
-----------------------------------------------------------------------------------------


Here are the ACTUAL menu items I want displayed, with their sub-menus:

The Villages
---Cedar River Village
---Schuss Village
---Summit Village

Dining & Entertainment
---Sunday Brunch
---Entertainment Calendar

Golf
---Golf Packages
---Golf Courses
---Shanty Creek Golf Academy
 
Snowsports
---Ski Packages
---Snow Conditions
---Season Passes
---Lift Tickets
---Rentals
---Hours of Operation
---Trail Map
---Clinics & Lessons
---Children's Programs
---Tubing
---Terrain Parks
---Cross Country
 
Spa & Fitness
---Spa Packages
---Spa Treatments
---Fitness
 
Recreation
---Spring
---Summer
---Fall
---Winter

Meetings & Events
---Cedar River Facilities
---Summit Facilities
---Schuss Facilities
---Weddings
---Banquets
---RFP



I just don't know how to edit and integrate topmenu.js to match the menu items you see in www.shantycreek.com/beta. PLease Help. I just want to be able to plug and play.

[If it works right, I can re-post and award you an addnl 500 points]


THanks.Start Free Trial
[+][-]02.01.2007 at 09:02PM PST, ID: 18450298

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zone: Cascading Style Sheets (CSS)
Tags: menu, at_attach
Sign Up Now!
Solution Provided By: VirusMinus
Participating Experts: 1
Solution Grade: C
 
 
[+][-]02.01.2007 at 09:19PM PST, ID: 18450357

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]02.01.2007 at 09:53PM PST, ID: 18450452

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]02.01.2007 at 10:25PM PST, ID: 18450518

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]02.01.2007 at 10:38PM PST, ID: 18450547

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]02.01.2007 at 11:55PM PST, ID: 18450717

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]02.02.2007 at 03:16PM PST, ID: 18456920

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]02.02.2007 at 03:22PM PST, ID: 18456952

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32