KODREHBERİ - menu ornekleri

menu ornekleri

açılır menü
<style> 
BODY { font-family:verdana, arial, helvetica; font-size:70%; } 
    H1 { font-size:120%; font-style:italic; } 
     
    DIV#divMenuBar { background-color:#6699CC; } 
    TABLE#tblMenuBar TD { font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default; } 
    TABLE#tblMenuBar TD.MenuMadde { font-weight:bold; cursor:hand; } 
     
    DIV.clsMenu {  
        font-size:90%; background-color:#6699CC;  
        position:absolute; visibility:hidden; width:130px;  
        padding:5px 5px 5px 8px; border-top:1 white solid;  
    } 
    DIV.clsMenu A { text-decoration:none; color:white; font-weight:bold; } 
    DIV.clsMenu A:hover { color:moccasin; }

BUTTON { font-family:tahoma; font-size:100%; } 
</style>

<SCRIPT LANGUAGE="Javascript"> 
var eOpenMenu = null;

function OpenMenu(eSrc,eMenu) 
    { 
        eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft; 
        eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop; 
        eMenu.style.visibility = "visible"; 
        eOpenMenu = eMenu; 
    }

function CloseMenu(eMenu) 
    { 
        eMenu.style.visibility = "hidden"; 
        eOpenMenu = null; 
    }

function document.onmouseover() 
    { 
        var eSrc = window.event.srcElement; 
        if ("MenuMadde" == eSrc.className) 
        { 
            eSrc.style.color = "moccasin";  
            var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")]; 
            if (eOpenMenu && eOpenMenu != eMenu)  
            { 
                CloseMenu(eOpenMenu); 
            } 
            if (eMenu)  
            { 
                OpenMenu(eSrc,eMenu); 
            } 
        } 
        else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc))  
        { 
            CloseMenu(eOpenMenu); 
        } 
    } 
     
    function document.onmouseout() 
    { 
        var eSrc = window.event.srcElement; 
        if ("MenuMadde" == eSrc.className) 
        { 
            eSrc.style.color = "";  
        } 
    }

</SCRIPT>

Aşağısı Body Kısmına Eklenecek-------------------------

<DIV ID="divMenuBar"> 
<TABLE ID="tblMenuBar" BORDER="0"> 
<TR> 
        <TD CLASS="MenuMadde" ID="tdMenuBarItem01">MENÜ MADDE 01</TD> 
<TD>|</TD> 
        <TD CLASS="MenuMadde" ID="tdMenuBarItem02">MENÜ MADDE 02</TD> 
<TD>|</TD> 
        <TD CLASS="MenuMadde" ID="tdMenuBarItem03">MENÜ MADDE 03</TD> 
</TR> 
</TABLE> 
</DIV>

<DIV CLASS="clsMenu" ID="divMenu01"> 
<DIV CLASS="clsMenuAra"></DIV> 
    <DIV><A TARGET="_new" HREF="01.asp">Madde 01</A></DIV> 
    <DIV><A TARGET="_new" HREF="02.asp">Madde 02</A></DIV> 
    <DIV><A TARGET="_new" HREF="03.asp">Madde 03</A></DIV> 
    <DIV><A TARGET="_new" HREF="04.asp">Madde 04</A></DIV> 
    <DIV><A TARGET="_new" HREF="05.asp">Madde 05</A></DIV> 
</DIV>

<DIV CLASS="clsMenu" ID="divMenu02"> 
<DIV CLASS="clsMenuAra"></DIV> 
    <DIV><A TARGET="_new" HREF="11.asp">Madde 01</A></DIV> 
    <DIV><A TARGET="_new" HREF="12.asp">Madde 02</A></DIV> 
    <DIV><A TARGET="_new" HREF="13.asp">Madde 03</A></DIV> 
    <DIV><A TARGET="_new" HREF="14.asp">Madde 04</A></DIV> 
    <DIV><A TARGET="_new" HREF="15.asp">Madde 05</A></DIV> 
</DIV>

<DIV CLASS="clsMenu" ID="divMenu03"> 
<DIV CLASS="clsMenuAra"></DIV> 
    <DIV><A TARGET="_new" HREF="21.asp">Madde 01</A></DIV> 
    <DIV><A TARGET="_new" HREF="22.asp">Madde 02</A></DIV> 
    <DIV><A TARGET="_new" HREF="23.asp">Madde 03</A></DIV> 
    <DIV><A TARGET="_new" HREF="24.asp">Madde 04</A></DIV> 
    <DIV><A TARGET="_new" HREF="25.asp">Madde 05</A></DIV> 
</DIV>

menü html kod
<HEAD>
<STYLE type=text/css>UL {
MARGIN-TOP: 120pt
}
A:hover {
COLOR: #0000ff
}

.LeftNavSubOff {
BACKGROUND-COLOR: #000066; BORDER-BOTTOM: AQUA 1px solid; 
BORDER-LEFT:AQUA 1px solid; BORDER-RIGHT: AQUA 1px solid; BORDER-TOP: AQUA 1px solid; COLOR: white; CURSOR: hand; FONT-FAMILY: verdana; FONT-SIZE: 10px; LETTER-SPACING: -0.5pt; LINE-HEIGHT: 18px; MARGIN: 2px 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none; WIDTH: 100px
}
.LeftNavSubUp {
BORDER-BOTTOM: yellow 1px solid; 
BORDER-LEFT:yellow 1px solid; BORDER-RIGHT: yellow 1px solid; BORDER-TOP: yellow 1px solid; COLOR: aqua; CURSOR: hand; FONT-FAMILY: verdana; FONT-SIZE: 10px; LETTER-SPACING: -0.5pt; LINE-HEIGHT: 18px; MARGIN: 2px 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none; WIDTH: 100px
}

.LeftNavSubDown {
BACKGROUND-COLOR: #920000; BORDER-BOTTOM: #000000 1px solid; 
BORDER-LEFT: #003399 1px solid; BORDER-RIGHT: #99ccff 1px solid; BORDER-TOP: #003399 1px solid; COLOR: yellow; CURSOR: hand; FONT-FAMILY: verdana; FONT-SIZE: 10px; LETTER-SPACING: -0.5pt; LINE-HEIGHT: 18px; MARGIN: 2px 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none; WIDTH: 100px
}</STYLE>
<SCRIPT language=JAVASCRIPT type=text/javascript>

</SCRIPT>

<SCRIPT language=JAVASCRIPT type=text/javascript>
<!--
var strTDColor = '#000000';
g_RolledTD = new Object;

document.onClick = TDUnRoll;
document.onmouseover = TDUnRoll;

//-->
</SCRIPT>
</HEAD>
<BODY bgColor=#000000 leftMargin=0 link=#0000ff onmousedown=DepressButton(); 
onmouseover=RaiseButton(); onmouseup=RaiseButton(); topMargin=0 
MARGINWIDTH="0"></SCRIPT>
<DIV align=center>
<TABLE border=0 bordercolor=#00ff00 cellPadding=0 cellSpacing=2>
<TBODY>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 1</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 2</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 3</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 4</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 5</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 6</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 7</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 8</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 9</SPAN></A></STRONG></TD>
</TR>
<TR>
<TD bgcolor="#115585" height=10 width=100><STRONG><A 
href="http://www.linkadi.com"target="sag"><SPAN 
class=LeftNavSubOff 
buttonType="LeftNavSub"> LYNK 10</SPAN></A></STRONG></TD>
</TR></TABLE>

üst menü html kod
<html>
<head>
<title>Görün-Kaybol Menüsü</title>
<style type="text/css">
a.kategori {
font-family:Verdana; 
font-size:15px; 
font-weight:bold;
color:white;
text-decoration:none;
}
a.kategori:hover {
color:red;
}
a.altkategori {
font-family:Verdana; 
font-size:13px; 
font-weight:bold;
color:white;
text-decoration:none;
}
a.altkategori:hover {
color:orange;
}
#kategori1 {
position: absolute; 
top:21px; 
left:0px; 
background-color:black; 
layer-background-color:black;
visibility:hidden;
}
#kategori2 {
position: absolute; 
top:21px; 
left:100px; 
background-color:black; 
layer-background-color:black;
visibility:hidden;
}
#kategori3 {
position: absolute; 
top:21px; 
left:200px; 
background-color:black; 
layer-background-color:black;
visibility:hidden;
}
</style>
<script language="JavaScript">
function kaybol(katman) {

if (document.all) {
document.all[katman].style.visibility="hidden";
}
else if (document.layers) {
document.layers[katman].visibility="hide";
}
else {
document.getElementById(katman).style.visibility="hidden";
} 
}

function gorun(katman) {

if (document.all) {
document.all[katman].style.visibility="visible";
}
else if (document.layers) {
document.layers[katman].visibility="show";
}
else {
document.getElementById(katman).style.visibility="visible";
} 
}

function menu(gorunecekKatman) {
kaybol('kategori1');
kaybol('kategori2');
kaybol('kategori3');
gorun(gorunecekKatman);
}
</script>
</head>

<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<table width="800" bgcolor="black" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100">
<a href="#" class="kategori" onmouseover="menu('kategori1')">Kategori 1</a>  
</td>
<td width="100"> 
<a href="#" class="kategori" onmouseover="menu('kategori2')">Kategori 2</a>  
</td>
<td width="100"> 
<a href="#" class="kategori" onmouseover="menu('kategori3')">Kategori 3</a>  
</td>
<td width="500"> </td>
</tr>
</table>
<div id="kategori1" onmouseover="gorun('kategori1')" onmouseout="kaybol('kategori1')">
<table width="100"><tr><td align="center">
<a class="altkategori" href="herhangibirlink.html" onmouseover="menu('kategori1')" onmouseout="kaybol('kategori1')">link 1</a><br>
<a class="altkategori" href="herhangibirlink.html" onmouseover="menu('kategori1')" onmouseout="kaybol('kategori1')">link 2</a><br>
<a class="altkategori" href="herhangibirlink.html" onmouseover="menu('kategori1')" onmouseout="kaybol('kategori1')">link 3</a><br>
</td></tr></table>
</div>

</html>

menü html kod

<head>
<style>.m0l0i {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m0l0o {
	text-decoration : none;
	border : 1px solid #ffffff;
}
.m0l1i {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m0l1o {
	text-decoration : none;
	border : 1px solid #ffffff;
}
.m0l2i {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m0l2o {
	text-decoration : none;
	border : 1px solid #ffffff;
}</style>
</head>

function menu_item (path, parent, container) {
	this.path = new String (path);
	this.parent = parent;
	this.container = container;
	this.arrpath = this.path.split('_');
	this.depth = this.arrpath.length - 1;

güzel menü html kod
<style type="text/css">

.glidetext{
position: relative;
/*Set initial position of your text. Make it just enough to hide the text from view:*/
left: -1100px;
}

</style>

//Sequential fly-in text script- by JavaScriptKit.com

var pausebetweenmsg=10 //customize pause in miliseconds between each message showing up (3000=3 seconds)
var glidespeed=50 //customize glide speed in pixels per frame.

var curobjindex=0

function actualstyle(el, cssproperty){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(cssproperty)
}
}

function collectElementbyClass(){
var classname="glidetext"
glidearray=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
glidearray[inc++]=alltags[i]
}
if (glidearray.length>0)
onebyoneglide()
}

function onebyoneglide(){
if (curobjindex<glidearray.length)
glidetimer=setInterval("glideroutine()",5)
}

function glideroutine(){
if (parseInt(actualstyle(glidearray[curobjindex], "left"))<0)
glidearray[curobjindex].style.left=parseInt(actualstyle(glidearray[curobjindex], "left"))+50
else{
glidearray[curobjindex].style.left=0
curobjindex++
clearInterval(glidetimer)
setTimeout("onebyoneglide()", pausebetweenmsg)
}
}

if (window.addEventListener)
window.addEventListener("load", collectElementbyClass, false)
else if (window.attachEvent)
window.attachEvent("onload", collectElementbyClass)
else if (document.getElementById)
window.onload=collectElementbyClass

</script>

<table>
<tr >
	<td width="200" align="right"><div align="right" class="glidetext"><strong><font size="-1" color="#000080">SOL MENÜ       </font>     </strong></div><div align="right" class="glidetext"><img src="http://www.gezginler.net/modules/javascripts/ornek/menu/Sp.gif" width="110"></div><font size="-1"><div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div><br>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div><br>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div></font><br><br><br><br><br><br><br><br></td>
	<td  width="700" align="right"><div class="glidetext"><strong><font size="-1" color="#000080">SAĞ MENÜ       </font></strong>     </div><div align="right" class="glidetext"><img src="http://www.gezginler.net/modules/javascripts/ornek/menu/Sp.gif" width="110"></div><font size="-1"><div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div><br>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div><br>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div>
<div class="glidetext"><a href="http://www.gezginler.net">Akan Menü scripti  </a></div></font><br>
<div align="center" class="glidetext"><img src="http://www.gezginler.net/images/camel.gif" height="140" width="110">                        </div></td>
</tr>
</table>

menü html cod

<head>

function init(id)
{
obj_head = document.getElementById(id)
obj_head.style.height = obj_head.offsetHeight +10;
if(scroll)
{
obj_head.style.position = "absolute";
obj_head.style.width = obj_head.offsetWidth + 10;
obj_head.style.top = offsettop;
obj_head.style.left = offsetleft;
}
obj_head.style.visibility="visible";
}
var T1 = null;

var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

</head>

</body>

html kod menü
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
#miniflex {
  width: 100%;
  float: left;
  font-size: small; /* could be specified at a higher level */
  margin: 0;
  padding: 0 10px 0 10px;
  border-bottom: 1px solid #696;
  position:relative;
  z-index:2;
}

#miniflex li {
  float: left;
  margin: 0;
  padding: 0;
  display: inline;
  list-style: none;
  position:relative;
}

#miniflex a:link, #miniflex a:visited {
  float: left;
  font-size: 85%;
  line-height: 20px;
  font-weight: bold;
  margin: 0 10px 0 10px;
  text-decoration: none;
  color: #9c9;
}

#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
  border-bottom: 4px solid #696;
  padding-bottom: 2px;
  color: #696;
}
  
#animated-tab {
  position: absolute;
  z-index: 1;
  font-size: 85%;
  line-height: 20px;
  padding-bottom: 2px;
  border-bottom: 4px solid #696;
}
</style>
<script>
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Brian McAllister :: http://www.frequency-decoder.com/ */

/*
Animated miniTabs by frequency decoder
Further information on this script can be located
on the authors Web site http://www.frequency-decoder.com/

Based on an idea by Rob L Glazebrook
(http://www.rootarcana.com/test/smartmini/)
which was derived from the original idea of Stephen Clark
(http://www.sgclark.com/sandbox/minislide/)

Changes
=======
05/03/06 : Creation
08/03/06 : Added the cleanUp method to stop IE memory leaks.

This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" license

You are free:
  1. to copy, distribute, display, and perform the work.
  2. to make derivative works.

Under the following conditions:

1. **Attribution*: You must attribute the work in the manner specified
     by the author or licensor.
  2. Noncommercial*: You may not use this work for commercial purposes.*
  3. Share Alike*: If you alter, transform, or build upon this work,
     you may distribute the resulting work only under a license identical to this one.
*/

ul.onmouseout = function(e) {
      miniTab.initSlide(miniTab.currentTab);
    };
    
    for(var i = 0; i < aArr.length; i++) {
      if(document.location.href.indexOf(aArr[i].href)>=0) {
        miniTab.activeTab = miniTab.currentTab = i;
      }
      aArr[i].style.borderBottom  = "0px";
      aArr[i].style.paddingBottom = "6px";
    }

miniTab.slideObj                = ul.parentNode.appendChild(document.createElement("div"));
    miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
    miniTab.slideObj.id             = "animated-tab";
    miniTab.slideObj.style.top      = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
    miniTab.slideObj.style.left     = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px";
    miniTab.slideObj.style.width    = aArr[miniTab.activeTab].offsetWidth + "px";
    miniTab.aHeight                 = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop;
    
    miniTab.initSlide(miniTab.activeTab, true);
    
    var intervalMethod = function() { miniTab.slideIt(); }
    miniTab.animInterval = setInterval(intervalMethod,10);
  },

cleanUp: function() {
    clearInterval(miniTab.animInterval);
    miniTab.animInterval = null;
  },
  
  initSlide: function(pos, force) {
    if(!force && pos == miniTab.activeTab) return;
    miniTab.activeTab = pos;
    miniTab.initAnim();
  },
  
  initAnim: function() {
    var ul          = document.getElementById("miniflex");
    var liArr       = ul.getElementsByTagName("li");
    var aArr        = ul.getElementsByTagName("a");
    miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft);
    miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth);
    miniTab.t = 0;
    miniTab.b = miniTab.slideObj.offsetLeft;
    miniTab.c = miniTab.destX - miniTab.b;
    miniTab.bW = miniTab.slideObj.offsetWidth;
    miniTab.cW = miniTab.destW - miniTab.bW;
    miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";
  },
  
  slideIt:function() {
    var ul          = document.getElementById("miniflex");
    var liArr       = ul.getElementsByTagName("li");
    var aArr        = ul.getElementsByTagName("a");
    
    // Has the browser text size changed?
    if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) {
      miniTab.initAnim();
      miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop
    };
    
    if(miniTab.t++ < miniTab.d) {
      var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
      var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
      miniTab.slideObj.style.left = parseInt(x) + "px";
      miniTab.slideObj.style.width = parseInt(w) + "px";
    } else {
      miniTab.slideObj.style.left = miniTab.destX + "px";
      miniTab.slideObj.style.width = miniTab.destW +"px";
    }
  },

animate: function(t,b,c,d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
  }
}

window.onload = miniTab.init;
window.onunload = miniTab.cleanUp;
</script>
</HEAD>

<BODY>
<h2>Animated Mini Tabs</h2>
<ul id="miniflex">
  <li><a href="/about/" title="">About</a></li>
  <li><a href="/archives/" title="">Archives</a></li>
  <li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li>
  <li><a class="active" href="/demo/animated-minitabs/" title="">MiniTab demo</a></li>
  <li><a href="/contact/" title="">Contact</a></li>
</ul>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>
</BODY>
</HTML>

drop menü süper html kod
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Konstantin Jagello | http://javascript-array.com/ */
var TimeOut         = 300;
var currentLayer    = null;
var currentitem     = null;
var currentLayerNum = 0;
var noClose         = 0;
var closeTimer      = null;

function mclosetime() {
  closeTimer = window.setTimeout(mclose, TimeOut);
}

function mcancelclosetime() {
  if(closeTimer) {
    window.clearTimeout(closeTimer);
    closeTimer = null;
  }
}

document.onclick = mclose; 
</script>

#dd li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font: bold 11px arial;
}

#dd li a.menu {
  display: block;
  text-align: center;
  background: #5970B2;
  padding: 4px 10px;
  margin: 0 1px 0 0;
  color: #FFF;
  width: 60px;
  text-decoration: none;
}

#dd li a.menu:hover {
  background: #49A3FF;
}

.submenu {
  background: #EAEBD8;
  border: 1px solid #5970B2;
  visibility: hidden;
  position: absolute;
  z-index: 3;
}

.submenu a {
  display: block;
  font: 11px arial;
  text-align: left;
  text-decoration: none;
  padding: 5px;
  color: #2875DE;
}

.submenu a:hover {
  background: #49A3FF;
  color: #FFF;
}
</style>

<ul id="dd">
  <li><a href="#" class="menu" id="mmenu1" 
      onmouseover="mopen(1);"
      onmouseout="mclosetime();">Home</a>
    <div class="submenu" id="menu1"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="#">HTML Tutorials</a>
        <a href="#">DHTML Tutorials</a>
        <a href="#">JavaScript Tutorials</a>
        <a href="#">CSS Tutorials</a>
    </div>
  </li>
  <li><a href="#" class="menu" id="mmenu2" 
      onmouseover="mopen(2);"
      onmouseout="mclosetime();">Download</a>
    <div class="submenu" id="menu2"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="#">ASP Scripts</a>
        <a href="#">PHP Scripts</a>
        <a href="#">Ajax Scripts</a>
        <a href="#">Perl Scripts</a>
    </div>
  </li>
  <li><a href="#" class="menu">Order</a></li>
  <li><a href="#" class="menu">Help</a></li>
  <li><a href="#" class="menu" id="mmenu3" 
      onmouseover="mopen(3);"
      onmouseout="mclosetime();">Contact</a>
    <div class="submenu" id="menu3"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="#">Office</a>
        <a href="#">Sales</a>
        <a href="#">Customer Service</a>
        <a href="#">Shipping</a>
    </div>
  </li>
</ul>

değişik menü html kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Schuifmenu</title>

<body>

<tr>

</tr>

<tr>

</tr>
	
	 <tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>
		<td height="112" width="152">

<tr>

</tr>
	<tr>

</tr>
	<tr>

</tr>
	<tr>

</tr>
	<tr>

</tr>

<tr>

</tr>

</table>

</td>
		<td height="112" width="152">

<tr>

</tr>
	<tr>

</tr>
	<tr>

</tr>
	<tr>

</tr>
	<tr>

</tr>

<tr>

</tr>

</table>

</td>
		<td height="112" width="583">

</td>
	</tr>
</table>
<p> </p>
<p> </p>
<p>move down menu by alexj</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>           </p>

<br>

<br>

</body>
</html>