JAVASCRIPT EXAMPLES: Instructions for Sliding Navigational Menu

Uncle Jim's JavaScript Examples

Instructions for Sliding Navigational Menu

INSTALLATION INSTRUCTIONS

COPY - Insert Between Head Tags: <HEAD></HEAD>

<style type="text/css">
#main_panel
{
 border:1px solid white;
 position:relative;
 left:0px;
 top:160px;
 overflow:hidden;
}
.head_item
{
 background-color:#e0ffff;
 font-size:14px;
 font-family:Arial;
 font:bold;
 color:8b0000;
 border-top:1px solid white;
 border-bottom:1px solid white;
 position:absolute;
 left:0px;
 cursor:hand;
 text-align:left;
}
.item
{
 background-color:#e0ffff;
 font-family:arial;
 font-size:12px;
 color:8b0000:
 left:0px;
 position:relative;
 text-align:left;
}
.item_panel
{
 position:absolute;
 background-color:#e0ffff;
 left:0px;
}
  .item_panel a
  {
   text-decoration:none;
   color:8b0000;
   cursor:hand;
  }
input        { padding:0; font-family: Arial Narrow; font-size: 10pt; color: #ff0000; 
               border: 0px solid #23195D; background-color: #e0ffff }
</style>
<script type="text/javascript" src="start_links.js"></script>
<script type="text/javascript">
/*
 _____________________________________
/ЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇ\
| Another JavaScript from Uncle Jim   |
| Feel free to copy, use and change   |
| this script as long as this part    |
| remains unchanged. You can visit    |
| my website at http://jdstiles.com   |
| for more scripts like this one.     |
| Created: 1996 Updated: 2006         |
\_____________________________________/
 ЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇ
*/
  var Link = new Array();
  Link[0] = "0|JavaScript Categories";
  Link[1] = "1|Main Page|http://jdstiles.com/javamain.html|Main";
  Link[2] = "1|Navigation|http://jdstiles.com/java/navigation.html|Navigation";
  Link[3] = "1|Page Effects|http://jdstiles.com/java/effects.html|Effects";
  Link[4] = "1|Forms|http://jdstiles.com/java/forms.html|Forms";
  Link[5] = "1|Utilities|http://jdstiles.com/java/utilities.html|Utilities";
  Link[6] = "0|Microsoft Office";
  Link[7] = "1|Main Page|http://jdstiles.com/jds.main_office.html/|Main";
  Link[8] = "1|Office Tips|http://jdstiles.com/tips/|Tips Home";
  Link[9] = "1|Access Tutorial|http://jdstiles.com/mso2k/access/|Access";
  Link[10] = "1|Excel Tutorial|http://jdstiles.com/mso2k/excel/|Excel";
  Link[11] = "1|PowerPoint Tutorial|http://jdstiles.com/ppt/|ppt";
  Link[12] = "1|Word Tutorial|http://jdstiles.com/mso2k/word/|Word";
  Link[13] = "1|Binder Tutorial|http://jdstiles.com/mso2k/binder/|Binder";
  Link[14] = "0|Design Sets";
  Link[15] = "1|Theme Sets|http://jdstiles.com/|Sets";
  Link[16] = "1|Border Sets|http://jdstiles.com/|Sets Doc";
  Link[17] = "0|Other Links";
  Link[18] = "1|Art Collection|http://jdstiles.com/hwm/|Art";
  Link[19] = "1|Redneck Retirement|http://jdstiles.com/redneck/|Redneck";
  Link[20] = "1|North Carolina Trip|http://jdstiles.com/nc/|NC"; 
  Link[21] = "1|Outlook Tutorial|http://jdstiles.com/class/class.html|OL Class";
  Link[22] = "1|Star Trek Trivia|http://jdstiles.com/st/trivia1.html|Star Trek";  
  Link[23] = "1|Music Center|http://jdstiles.com/dj.html|DJ"; 
  Link[24] = "1|Pjoto Gallery|http://jdstiles.com/|Gallery"; 
  Link[25] = "1|Slide Show|http://jdstiles.com/ipw-web/gallery/slideshow.php?set_albumName=OurChildren|Slideshow"; 
  Link[26] = "1|Sitemap|http://jdstiles.com/sitetree.html|Site Map"; 
  Link[27] = "1|Pug Page|http://jdstiles.com/dogs.html|Pugs"; 
  Link[28] = "1|Cisco ICND|http://jdstiles.com/java/cisco1.htm|ICND"; 
  Link[29] = "1|Bandwidth Test|http://jdstiles.com/java/speedtest.html|Speed"; 
  Link[30] = "0|More Links";
  Link[31] = "1|Weather|http://jdstiles.com/weather.html|Weather";
  Link[32] = "1|Easter Eggs|http://jdstiles.com/eggs.html|Eggs"; 
  Link[33] = "1|Singing Horses|http://jdstiles.com/nags1.html|Nags";
  Link[34] = "1|Virus Information|http://jdstiles.com/virus.html|Virus";
  Link[35] = "1|WTC Memorial|http://jdstiles.com/wtc.html|WTC"; 
  Link[36] = "1|Newsletter|http://jdstiles.com/java/newsletter|Newsletter";
  Link[37] = "1|OTHER|http://www.jdstiles.com/|OTHER";
  Link[38] = "1|ANOTHER|http://jimstiles.com/|ANOTHER";
  Link[39] = "1|Tutorials|http://jdstiles.com/jdstut.html|tuts"; 
  Link[40] = "1|Feedback|http://jdstiles.com/java/feedback.html|feedback";
  Link[41] = "1|Guestbook|http://jdstiles.com/java/guestbook.html|GB";
   
start(1);
</script>
<SCRIPT type="text/javascript">
<!--
/*
 _____________________________________
/ЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇ\
| Another JavaScript from Uncle Jim   |
| Feel free to copy, use and change   |
| this script as long as this part    |
| remains unchanged. You can visit    |
| my website at http://jdstiles.com   |
| for more scripts like this one.     |
| Created: 1996 Updated: 2006         |
\_____________________________________/
 ЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇ
*/
   NS4 = (document.layers) ? 1 : 0;
   IE4 = (document.all) ? 1 : 0;
  ver4 = (NS4 || IE4) ? 1 : 0;   
 isMac = (navigator.appVersion.indexOf("Mac") != -1) ? 1 : 0;
isMenu = (NS4 || (IE4 && !isMac)) ? 1 : 0;

function popUp(){return};
function popDown(){return};
function startIt(){return}

if (!ver4) event = null;
//-->
</script>
<script type="text/javascript">

</script>

COPY - Insert Inside Body: <BODY></BODY>

<div align='left">
<div style="position: absolute; left: 1; top: 1; width: 176; height: 176">
<a href="http://jdstiles.com/">
<img src="http://jdstiles.com/images/jd_logo.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" width="100" height="100"></a></div>
<script type="text/javascript">
<!--
/*
 _____________________________________
/ЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇ\
| Another JavaScript from Uncle Jim   |
| Feel free to copy, use and change   |
| this script as long as this part    |
| remains unchanged. You can visit    |
| my website at http://jdstiles.com   |
| for more scripts like this one.     |
| Created: 1996 Updated: 2006         |
\_____________________________________/
 ЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇЇ
*/
////change number of images below 
var number_of_images=2
//change speed below (in seconds)
var speed=5
var step=1
var whichimage=1

function slideit(){
	if (!document.images)
	return
	if (document.all)
	slide.filters.blendTrans.apply()
	document.images.slide.src=eval("image"+step+".src")
	if (document.all)
	slide.filters.blendTrans.play()
	whichimage=step
	if (step<number_of_images)
	step++
	else
	step=1
	if (document.all)
	setTimeout("slideit()",speed*1000+3000)
	else
	setTimeout("slideit()",speed*1000)
}
-->
</script>

COPY - Insert into Body Tag: <BODY 'CODE HERE'>

Click Here & Save this file as start_links.js

Close This Window