Drop+Down+Menu+Code

The source for this code, as well as the instructions, are adapted from the collapsible division page on "Getting Tricky With Wikis"

 Put drop down menus on your pages: You can turn text into links with a few changes to the basic code. Try the examples in the navigation bar of this site.

 =Instructions:= 1. Copy the code below (at the bottom of this page, not the code under number 2) and insert it into the 'embed widget' 'other html' box. 2. The part you need to edit is the last half of the code, seen below. code PLC Business ecvplc

Team Norms

Collaboration Meetings

Pull Out Days, Trainings, &amp; PLC Planning

Peer Observations

Critical Questions</a>

Team Goals</a>

CST Goal</a>

CAHSEE Results</a>

Course Goals Survey Questions</a>

code 3. Now change my words for yours. Where I have written 'PLC Business' - write your own menu heading. This is the comment link that stays visible on the page. 6. Where I have written the url (http://eldplc.wikispaces.com/Team+Norms), write the url you want to go to. Where I have written 'Team Norms' write the text you want the reader to click on. 7. Now repeat this with as many links as you want, as you can see that I have. Remember to put a line break between them, insert

=**Important Notes!**= <span style="color: #388736; font-family: Impact,Charcoal,sans-serif; font-size: 20px; line-height: 29px;">Putting more than one collapsible menu on the same page, as we have done on this site:

If you want to put more than one script on a page, you will have to give each script a unique name. This is very easy to do. The part of the script you need is these lines below. code /script>PLC Business</a> code The name of the particular script is 'mydiv' If you paste another script with this name, it will not work, but it will operate the first script (because it is looking for the script by that name). You need to rename the script for each one you use on the same page.

I just use numbers to do this ... name my second script 'mydiv2' and my third script 'mydiv3' and so on. Thus I can put as many scripts as I like on a page. The lines for my second script would look like this code /script>Course Information</a> code NOTE: There are 2 places in the script that the name has to be changed.

Final NOTE: I have played with the settings on the original code a little bit. After trial and error (I really want to learn how this stuff really works, but haven't had the time yet), I was able to have the items under the menu heading be offset--indented--from the menu heading. I was also able to change the text sizes to suit my preference. I didn't include instructions for this process, however, because I'm not too competent in HTML myself--I'm just able to play with basic code like this until it does what I want it to do.

=Code used on collapsible menus on this web site:= code <span style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; border-collapse: collapse; font-family: 'Lucida Grande'; font-size: 11px; line-height: normal; white-space: pre-wrap;"><script language="javascript" type="text/javascript"> //<![CDATA[ function toggleDiv(divid){ if(document.getElementById(divid).style.display == 'none'){ document.getElementById(divid).style.display = 'block'; }else{ document.getElementById(divid).style.display = 'none'; } } //]]> <span style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; border-collapse: collapse; font-family: 'Lucida Grande'; font-size: 16px; line-height: normal; white-space: pre-wrap;">PLC Business</a> <span style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; border-collapse: collapse; font-family: 'Lucida Grande'; font-size: 15px; line-height: normal; white-space: pre-wrap;">ecvplc</a>

Team Norms</a>

Collaboration Meetings</a>

Pull Out Days, Trainings, &amp; PLC Planning</a>

Peer Observations</a>

Critical Questions</a>

Team Goals</a>

CST Goal</a>

<a href="http://eldplc.wikispaces.com/CAHSEE+Results">CAHSEE Results</a>

<a href="http://eldplc.wikispaces.com/Course+Goals+Survey+Questions">Course Goals Survey Questions</a>

code