
<!--

Welcome to the FreeStyle Menu script!


I suggest using server-side includes for including menu data on all pages of your site.
Try a language like PHP or ASP if your webhost supports it perhaps.

See below for menu examples; there are 2 main modes of operation for this script, using a
The menus have 4 components that you need to copy and paste into your page:
 1) A <link> tag that includes a CSS file, controling menu layout and formatting.
 2) A core <script> tag that includes the main fsmenu.js to control menu behaviour.
 3) The menu data itself, which is either a <ul> list or some <div> tags.
 4) A configuration <script> that activates the menu data.

(1) and (2) must be pasted into your document <head>, while (3) must be pasted
into your document <body>. (4) must be pasted anywhere after (2); you can even
combine the two if you want.
nested UL/LI list, and using un-nested tags in the page.
I recommend you use the list mode, but I've included an example of the other as well.

Good luck - Angus.

-->


 
 <!-- Alternatively, this CSS file is for the second div-based demo menu -->
<!-- <LINK rel="stylesheet" type="text/css" href="/fsmenu/divmenu.css" /> -->

<!--

***** EXAMPLE 1: LIST MENU (v5+ browsers only) *****

You just need a series of <ul> lists, one nested inside another, with <a> tags in each item,
and <ul> tags after <a> tags to trigger another level of submenus.
The script will then automatically manage them as a multilevel popup menu.
Paste your data into here to get started, and be careful to close all your </li> tags!

-->
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" STYLE="margin-bottom:0px; ">
  <!--	<TR>
		<TD STYLE="background-color:#FAED7E; "><IMG SRC="/images/spacer.gif" ALT="spacer" WIDTH="180" HEIGHT="14"></TD>
	</TR>-->
</TABLE>
<!--<IMG SRC="/images/spacer.menu.gif" ALT="spacer" WIDTH="180" HEIGHT="2">-->
<UL class="menulist" id="listMenuRoot">
  <LI CLASS="menuyarns dingbat"><A HREF="/yarns/index.php">Yarns</A> 
    <UL CLASS="submenu">
      <LI STYLE="border:0px; "><A href="/yarns/index.php">Yarns 
        Index</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/100_wool.php">100% 
        Wool Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/100_wool_machinewash.php">Machine 
        Washable Wool Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/luxury_yarns.php">Luxury 
        Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/textured_wool.php">Textured 
        Wool &amp; Wool Blend Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/novelty.php">Novelty 
        Yarns, Ribbons, Chenilles</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/cottons.php">Cottons, 
        Tencel, Hemp, Linen &amp; Bamboo Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/acrylic_blends.php">Acrylic 
        Blend Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/sock_yarns.php">Sock 
        Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/lace_yarns.php">Lace 
        Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/baby_yarns.php">Baby 
        Yarns</A></LI>
      <LI STYLE="border:0px; "><A href="/yarns/designer.php">Yarns By Designer/Brand</A></LI>
    </UL>
    <!-- kits -->
  </LI>
</UL>
<UL class="menulist">
  <LI CLASS="menukits dingbat"><a href="/kits/index.php">Kits</a> 
    <UL CLASS="submenu">
      <LI STYLE="border:0px; "><A href="/kits/index.php">Knitting 
        Kits Index</A></LI>
      <LI STYLE="border:0px; "><A href="/kits/sweater_kits.php">Adult 
        Sweater-Vest Kits </A></LI>
      <LI STYLE="border:0px; "><A href="/kits/sweater_kits_kids.php">Kids 
        Sweater-Vest Kits </A></LI>
      <LI STYLE="border:0px; "><A href="/kits/mitten_kits.php">Mitten 
        Kits</A></LI>
      <LI STYLE="border:0px; "><A href="/kits/hat_kits.php">Hat 
        Kits</A></LI>
      <LI STYLE="border:0px; "><A href="/kits/sock_kits.php">Sock 
        Kits</A></LI>
      <LI STYLE="border:0px; "><A href="/kits/scarf_afghankits.php">Scarf 
        Kits</A></LI>
      <LI STYLE="border:0px; "><A href="/kits/bag_kits.php">Bag 
        Kits</A></LI>
      <LI STYLE="border:0px; "><A href="/kits/quick_knit_kits.php">Quick 
        Knit Kits</A></LI>
      <LI STYLE="border:0px; "><A href="/kits/learn_to_kits.php">&quot;Learn 
        to&quot; Kits</A></LI>
    </UL>
  </LI>
  <!-- spinning -->
  <LI CLASS="menuspinning dingbat"><a href="/spinning/index.php">Spinning</a> 
    <UL CLASS="submenu">
      <LI STYLE="border:0px; "><a href="/spinning/index.php">Spinning 
        Main Page</a></LI>
      <LI STYLE="border:0px; "><a href="/spinning/wheels.php">Wheels</a></LI>
      <LI STYLE="border:0px; "><a href="/spinning/fibers.php">Fibers</a></LI>
      <LI STYLE="border:0px; "><a href="/spinning/accessories.php">Accessories</a></LI>
      <LI STYLE="border:0px; "><a href="/spinning/spinning_learn_to_kits.php">Spinning 
        &quot;Learn to&quot; Kits</a></LI>
    </UL>
  </LI>
  <!-- weaving -->
  <LI CLASS="menuweaving dingbat"><a href="/weaving/index.php">Weaving</a> 
    <UL CLASS="submenu">
      <LI STYLE="border:0px; "><A href="/weaving/index.php">Weaving 
        Index</A> </LI>
      <LI STYLE="border:0px; "><A href="/weaving/floor_looms.php"> 
        Weaving Looms-Floor &amp; Tabletop</A> </LI>
      <LI STYLE="border:0px; "><A href="/weaving/rigid_looms.php">Rigid 
        Heddle Looms</A> </LI>
      <LI STYLE="border:0px; "><A href="/weaving/shuttles.php">Weaving 
        Accessories</A> </LI>
      <LI STYLE="border:0px; "><A href="/weaving/warping_boards.php">Warping 
        Boards</A> </LI>
      <LI STYLE="border:0px; "><A href="/weaving/weaving_yarns.php">Weaving 
        Yarns</A> </LI>
    </UL>
  </LI>
  <!-- felting -->
  <LI CLASS="menufelting dingbat"><A HREF="/felting/index.php">Felting</A> 
    <UL CLASS="submenu">
      <LI STYLE="border:0px; "><A href="/felting/index.php">Felting 
        Index</A> </LI>
      <LI STYLE="border:0px; "><A href="/felting/felting_fibers.php">Felting 
        Fibers</A> </LI>
      <LI STYLE="border:0px; "><A href="/felting/felting_needles.php">Needle 
        Felting Needles</A> </LI>
      <LI STYLE="border:0px; "><A href="/felting/silk_backing.php">Silk 
        for Nuno Felting</A> </LI>
      <LI STYLE="border:0px; "><A href="/felting/embellishments.php">Embellishments</A>	
      </LI>
      <LI STYLE="border:0px; "><A href="/felting/learn_to_felt.php">&quot;Learn 
        to&quot; Needle Felt Kits</A> </LI>
    </UL>
  </LI>
  <!-- books -->
  <LI CLASS="menubooks dingbat"><a href="/books/index.php">Books 
    &amp; Dyes</a> 
    <UL CLASS="submenu">
      <LI STYLE="border:0px; "><A href="/books/index.php">Books 
        &amp; Dyes Main Page</A> </LI>
      <LI STYLE="border:0px; "><A href="/books/crochet.php">Crochet</A>	
      </LI>
      <LI STYLE="border:0px; "><A href="/books/felting.php">Felting</A>	
      </LI>
      <LI STYLE="border:0px; "><A href="/books/knitting.php">Knitting</A>	
      </LI>
      <LI STYLE="border:0px; "><A href="/books/spinning.php">Spinning</A>	
      </LI>
      <LI STYLE="border:0px; "><A href="/books/weaving.php">Weaving</A>	
      </LI>
    </UL>
  </LI>
  <!-- made in vt, free patterns, directions, history of silk, gift certificates, classes, policies, events -->
  <li> <a href="../yarns/accessories.php">Accessories</a></li>
  <li><a href="/vermont_yarns/index.php">Made in Vermont</a></li>
  <LI CLASS="menupatterns"><a href="/free_patterns.php">Free 
    Patterns</a></LI>
  <LI CLASS="menudirections"><a href="/find_us.php">Directions 
    &amp; Hours</a></LI>
  <LI CLASS="menusilk"><a href="/history_silk.php">History 
    of Silk in VT</a></LI>
  <LI CLASS="menugiftcertificates"><a href="/gift_certificates.php">Gift 
    Certificates</a></LI>
  <LI CLASS="menuclasses"><a href="/classes.php">Class Schedule</a></LI>
  <LI CLASS="menupolicies"><a href="/policies.php">Policies</a></LI>
  <LI CLASS="menuevents"><a href="/events.php">Events</a></LI>
  <LI><a href="/othersites.php">Other Interesting Sites</a></LI>
  <LI CLASS="menuhomepage"><a href="/index.php">Home Page</a></LI>
</UL>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <!--	<TR>
		<TD STYLE="background-color:#FAED7E; "><IMG SRC="/images/spacer.gif" ALT="spacer" WIDTH="180" HEIGHT="14"></TD>
	</TR>-->
</TABLE>
<SCRIPT type="text/javascript">
//<![CDATA[

// For each menu you create, you must create a matching "FSMenu" JavaScript object to represent
// it and manage its behaviour. You don't have to edit this script at all if you don't want to;
// these comments are just here for completeness. Also, feel free to paste this script into the
// external .JS file to make including it in your pages easier!

// Here's a menu object to control the above list of menu data:
var listMenu = new FSMenu('listMenu', true, 'visibility', 'visible', 'hidden');

// The parameters of the FSMenu object are:
//  1) Its own name in quotes.
//  2) Whether this is a nested list menu or not (in this case, true means yes).
//  3) The CSS property name to change when menus are shown and hidden.
//  4) The visible value of that CSS property.
//  5) The hidden value of that CSS property.
//
// Next, here's some optional settings for delays and highlighting:
//  * showDelay is the time (in milliseconds) to display a new child menu.
//  * switchDelay is the time to switch from one child menu to another child menu.
//    Set this higher and point at 2 neighbouring items to see what it does.
//  * hideDelay is the time it takes for a menu to hide after mouseout.
//  * cssLitClass is the CSS classname applied to parent items of active menus.
//  * showOnClick will, suprisingly, set the menus to show on click. Pick one of 3 values:
//    0 = all mouseover, 1 = first level click, sublevels mouseover, 2 = all click.

//listMenu.showDelay = 0;
//listMenu.switchDelay = 125;
listMenu.hideDelay = 500;
listMenu.cssLitClass = 'highlighted';
//listMenu.showOnClick = 1;


// Now the fun part... animation! This script supports animation plugins you can add to each
// menu object you create. Here's two to get you started. To enable animation, add one or
// more functions to the menuObject.animations array, and set menuObject.animSpeed to the
// desired percentage of animation to be completed per frame.
// Animation functions are called with a reference to the menu element being animated,
// and a counter variable that changes from 0 to 100 depending on the animation progress.

function animClipDown(ref, counter)
{
 var cP = Math.pow(Math.sin(Math.PI*counter/200),0.75);
 ref.style.clip = (counter==100 ?
  ((window.opera || navigator.userAgent.indexOf('KHTML') > -1) ? '':
   'rect(auto, auto, auto, auto)') :
    'rect(0, ' + ref.offsetWidth + 'px, '+(ref.offsetHeight*cP)+'px, 0)');
};

function animFade(ref, counter)
{
 var f = ref.filters, done = (counter==100);
 if (f)
 {
  if (!done && ref.style.filter.indexOf("alpha") == -1)
   ref.style.filter += ' alpha(opacity=' + counter + ')';
  else if (f.length && f.alpha) with (f.alpha)
  {
   if (done) enabled = false;
   else { opacity = counter; enabled=true }
  }
 }
 else ref.style.opacity = ref.style.MozOpacity = counter/100.1;
};

// I'm applying them both to this menu and setting the speed to 20%. Delete this to disable.
// listMenu.animations[listMenu.animations.length] = animFade;
listMenu.animations[listMenu.animations.length] = animClipDown;
listMenu.animSpeed = 200;


// Finally, on page load you have to activate the menu by calling its 'activateMenu()' method.
// I've provided an "addEvent" method that lets you easily run page events across browsers.
// You pass the activateMenu() function two parameters:
//  (1) The ID of the outermost <ul> list tag containing your menu data.
//  (2) A node containing your submenu popout arrow indicator.
// If none of that made sense, just cut and paste this next bit for each menu you create.

var arrow = null;
if (document.createElement && document.documentElement)
{
// arrow = document.createElement('span');
 // arrow.appendChild(document.createTextNode('>'));
 // Feel free to replace the above two lines with these for a small arrow image...
 //arrow = document.createElement('img');
// arrow.src = '/images/menutriangle.gif';
// arrow.style.borderWidth = '0';

// arrow.className = 'subind';
}

addEvent(window, 'load', new Function('listMenu.activateMenu("listMenuRoot", arrow)'));


// You may wish to leave your menu as a visible list initially, then apply its style
// dynamically on activation for better accessibility. Screenreaders and older browsers will
// then see all your menu data, but there will be a 'flicker' of the raw list before the
// page has completely loaded. If you want to do this, remove the CLASS="..." attribute from
// the above outermost UL tag, and uncomment this line:
//addEvent(window, 'load', new Function('getRef("listMenuRoot").className="menulist"'));


// To create more menus, duplicate this section and make sure you rename your
// menu object to something different; also, activate another <ul> list with a
// different ID, of course :). You can hae as many menus as you want on a page.

//]]>
</SCRIPT>

