Библиотека Javascript. SE@RCHER

смотреть оглавление

примерразмер кода

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Вертикальное меню с субменю с аним. эффектом</title>
<meta http-equiv="Содержимое-Тип" content="text/html; charset=windows-1251">
<style>
		/*this is the css for the vertical version*/
		.vertical ul{
			list-style-type: none;
			padding: 0px;
			border-top: 1px solid;
			width: 204px;
		}
		.vertical li a{
			display: block;
			width: 200px;
			text-decoration: none;
			height: 1.2em;
			padding: .1em 1px;
			border: 1px solid;
			border-top: 0px;
		}
		.vertical li{
			/*Needed for IE. Don't ask me why, It was a lucky guess.*/
			display: inline;
		}
		.vertical li ul{
			position: absolute;
			margin-top: -1.3em;
			margin-left: 200px;
		}
		/*this is the css for the horizontal version*/
		.horizontal ul{
			list-style-type: none;
			padding: 0px;
			border-left: 1px solid;
			display: block;
			height: 1.4em;
		}
		.horizontal li{
			float: left;
			display: inline;
		}
		.horizontal li a{
			text-decoration: none;
			height: 1.2em;
			float: left;
			display: block;
			width: 125px;
			padding: .1em 1px;
			border: 1px solid;
			border-left: none;
		}
		.horizontal li li a{
			border-top: none;
			border-left: 1px solid;
		}
		.horizontal li ul{
			position: absolute; 
			margin-top: 1.3em;
			margin-left: -1px;
			width: 129px;
			border: none;
			display: block;
			height: auto;
			border-top: 1px solid;
		}
		.horizontal li li ul{
			position: absolute;
			margin-top: .1em;
			margin-left: 125px;
		}
		.horizontal li ul li a{
		width: 125px;
		}
		/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
		/*Not sure if I recommend this or not*/
		.inaccesible li ul{
			display: none;
		}
		/*Arrow code - looks like <a class="haschild" href="#">Text <span>Arrow</span></a> can be turned on/off with arrow class*/
		.arrow a span{
		padding-left: 1em;
		font-size: 85%;  
		}
		.arrow a:hover span{
		padding-left: 2em;
		}
		.arrow a span.noshow{
			visibility: hidden;
		}
		/*Plus code*/
		.plus a span{
			padding-left: .5em;
		}
		/*colors for menu*/
		.blackwhite li a{
			background-color: white;
			color: black;
			border-color: black;
		}
		.blackwhite li a:hover{
			background-color: black;
			color: white;
			border-color: black;
		}
		.blackwhite ul{
			border-color: black;
		}
		.bluewhite li a{
			background-color: white;
			color: #000033;
			border-color: #000033;
		}
		.bluewhite li a:hover{
			background-color: #000033;
			color: white;
			border-color: #000033;
		}
		.bluewhite ul{
			border-color: #000033;
		}
/*Not really sure why IE needs all these,but hey it works!*/
.horizontal  li ul{
	margin-top: 1.4em;
	margin-left: -129px;
}	
.horizontal  li li ul{
	position: absolute;
	left: 0px;
}
/*These assist the iframe shim*/
.mlmenu iframe{
	position: absolute;
	display: none;
	filter: alpha(opacity=0);
	z-index: 2;
}
select,object,iframe{
	z-index: 1;
}
</style>
		
		<script type="text/javascript" >

/***********************************************
			* Blm Multi-level Effect menu- By Brady Mulhollem at http://www.bradyontheweb.com/
			* Script featured on DynamicDrive.com
			* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and more
			***********************************************/
window.onload = mladdevents;
			function mladdevents(){
				if(window.mlrunShim == true){
					var Iframe = document.createElement("iframe");
					Iframe.setAttribute("src","about:blank");
					Iframe.setAttribute("scrolling","no");
					Iframe.setAttribute("frameBorder","0");
					Iframe.style.zIndex = "2";
					Iframe.style.filter = 'alpha(opacity=0)';
				}
				var effects_a = new Array();
				var divs = document.getElementsByTagName('div');
				for(var j=0;j<divs.length;j++){
					if(divs[j].className.indexOf('mlmenu') != -1){
						var lis = divs[j].getElementsByTagName('li');
						for(var i =0;i<lis.length;i++){
							lis[i].onmouseover = mlover;
							lis[i].onmouseout = mloutSetTimeout;
							if(window.mlrunShim == true){
								lis[i].appendChild(Iframe.cloneNode(false));
							}
							if(lis[i].getElementsByTagName('ul').length > 0){
								lis[i].className += 'haschild';
								if(divs[j].className.indexOf('arrow') != -1){
									if(divs[j].className.indexOf('vertical') != -1 || lis[i].parentNode.parentNode.nodeName != 'DIV'){
										lis[i].getElementsByTagName('a')[0].innerHTML += '<span class="vert">→</span>';
									}
									else{
										lis[i].getElementsByTagName('a')[0].innerHTML += '<span class="horiz">↓</span>';
									}
								}
								else if(divs[j].className.indexOf('plus') != -1){
									lis[i].getElementsByTagName('a')[0].innerHTML += '<span class="plus">+</span>';
								}
							}
							else{
								if(divs[j].className.indexOf('arrow') != -1){
									//This accounts for a wierd IE-specific bug in horizontal menus. CSS will set visibility: hidden;. This keeps the menu level(in IE)
									lis[i].getElementsByTagName('a')[0].innerHTML += '<span class="noshow">↓</span>';
								}
							}
							var uls = lis[i].getElementsByTagName('ul');
							for(var k=0;k<uls.length;k++){
								var found = 'no';
								for(var z=0;z<effects_a.length;z++){
									if(effects_a[z] == uls[k]){
										found = 'yes';
									}
								}
								if(found == 'no'){
									effects_a[effects_a.length] = uls[k];
									uls[k].style.zIndex = '100';
									mlEffectLoad(uls[k]);
								}
							}
						}
					}
				}
			}
			function mloutSetTimeout(e){
				if(!e){
					var the_e = window.event;
				}
				else{
					var the_e = e;
				}
				var reltg = (the_e.relatedTarget) ? the_e.relatedTarget : the_e.toElement;
				if(reltg){
					var under = ancestor(reltg,this);
					if(under === false && reltg != this){
						window.mlLast = this;
						var parent = this.parentNode;
						while(parent.parentNode && parent.className.indexOf('mlmenu') == -1){
							parent = parent.parentNode;
						}
						if(parent.className.indexOf('delay') != -1){
							window.mlTimeout = setTimeout(function(){mlout()},500);
						}
						else{
							mlout();
						}
					}
				}
			}
			function mlout(){
			if(window.mlLast==null)return false;
				var uls = window.mlLast.getElementsByTagName('ul');
				var sib;
				for(var i=0;i<uls.length;i++){
					mlEffectOut(uls[i]);
					if(window.mlrunShim == true){
						sib = uls[i];							
						while(sib.nextSibling && sib.nodeName != 'IFRAME'){
								sib = sib.nextSibling
						}
						sib.style.display = 'none';
					}
				}
				window.lastover = null;
			}
			function mlover(e){
				if(!e){
					var the_e = window.event;
				}
				else{
					var the_e = e;
				}
				the_e.cancelBubble = true;
				if(the_e.stopPropagation){
					the_e.stopPropagation();
				}
				clearTimeout(window.mlTimeout);
				if(window.mlLast && window.mlLast != this && ancestor(this,window.mlLast) == false){
					mlout();
				}
				else{
					window.mlLast = null;
				}
				var reltg = (the_e.relatedTarget) ? the_e.relatedTarget : the_e.fromElement;
				var ob = this.getElementsByTagName('ul');
				var under = ancestor(reltg,this);
				if(ob[0] && under == false){
					if(window.lastover != ob[0]){
						if(window.mlrunShim == true){
							var sib = ob[0];
							while(sib.nextSibling && sib.nodeName != 'IFRAME'){
								sib = sib.nextSibling
							}
							ob[0].style.display = 'block';
							sib.style.top = ob[0].offsetTop+'px';
							sib.style.left = ob[0].offsetLeft-2+'px';
							sib.style.width = ob[0].offsetWidth+'px';
							sib.style.height = ob[0].offsetHeight-2+'px';
							sib.style.border = '1px solid red';
							sib.style.display = 'block';
						}
						mlEffectOver(ob[0],this);
						window.lastover = ob[0];
					}
				}
			}
			function mlSetOpacity(ob,level){
				if(ob){
					//level is between 0 and 10
					//need to convert to decimal for standard
					var standard = level/10;
					//need to convert to 0-100 scale for IE filter
					var ie = level*10;
					ob.style.opacity = standard;
					ob.style.filter = "alpha(opacity="+ie+")"
				}
			}
			function mlIncreaseOpacity(ob){
					var current = ob.style.opacity;
					if(lastob == ob && lastop == current){
						//mlout has not interfered
						current = current *10;
						var upone = current +1;
						mlSetOpacity(ob,upone);
						lastob = ob;
						lastop = upone/10;
					}
			}
			function mlIncreaseHeight(ob){
				var current = parseInt(ob.style.height);
				var newh = current + 1;
				ob.style.height = newh+'px';
			}
			function mlIncreaseWidth(ob){
				var current = parseInt(ob.style.width);
				var newh = current + 1;
				ob.style.width = newh+'px';
			}
			function mlBlink(ob){
				var newb = '1px solid red';
				var old = '';
				if(ob.style.border==old){
					ob.style.border=newb;
				}
				else{
					ob.style.border=old;
					ob.style.borderTop = '1px solid';
				}
			}
			function mlShake(ob){
				var newp = '5px';
				var old = '';
				if(ob.style.paddingLeft==old){
					ob.style.paddingLeft=newp;
				}
				else{
					ob.style.paddingLeft=old;
				}
			}
			function mlEffectOver(ob,parent){
				switch(ob.className){
					case 'fade':
						ob.style.display = 'block';
						if(ob.style.opacity == 0){
							lastob = ob
							lastop = 0;
							for(var i = 1;i<=10;i++){
								setTimeout(function(){mlIncreaseOpacity(ob)},i*50);
							}
							setTimeout(function(){ob.style.filter = ''},500);
						}
						break;
					case 'blink':
						ob.style.display = 'block';
						for(var i=0;i<10;i++){
							setTimeout(function(){mlBlink(ob)},i*50);
						}
						break;
					case 'shake':
						ob.style.display = 'block';
						for(var i=0;i<10;i++){
							setTimeout(function(){mlShake(ob)},i*50);
						}
						break;
					case 'blindv':
						ob.style.display = 'block';
						if(ob.offsetHeight){
							var height = ob.offsetHeight
							ob.style.height = '0px';
							ob.style.overflow = 'hidden';
							for(var i=0;i<height;i++){
								setTimeout(function(){mlIncreaseHeight(ob)},i*3);
							}
							setTimeout(function(){ob.style.overflow='visible';},height*3)
						}
						break;
					case 'blindh':
						ob.style.display = 'block';
						if(ob.offsetWidth){
							var width = ob.offsetWidth;
							ob.style.width = '0px';
							ob.style.overflow = 'hidden';
							for(var i=0;i<width;i++){
								setTimeout(function(){mlIncreaseWidth(ob)},i*3);
							}
							setTimeout(function(){ob.style.overflow='visible';},width*3)
						}
						break;
					default:
						ob.style.display = 'block';
						break;
				}
			}
			function mlEffectOut(ob){
				switch(ob.className){
					case 'fade':
						mlSetOpacity(ob,0);
						ob.style.display = 'none';
						break;
					case 'blink':
						ob.style.border = '';
						ob.style.display = 'none';
						break;
					case 'shake':
						ob.style.paddingLeft = '';
						ob.style.display = 'none';
						break;
					default:
						ob.style.display = 'none';
						break;
				}
			}
			function mlEffectLoad(ob){
				var parent = ob.parentNode;
				while(parent.parentNode && parent.className.indexOf('mlmenu') == -1){
					parent = parent.parentNode;
				}
				if(parent.className.indexOf('fade') != -1){
						ob.style.display = 'none';
						ob.className = 'fade';
						mlSetOpacity(ob,0);
				}
				else if(parent.className.indexOf('blink') != -1){
					ob.className = 'blink';
					ob.style.display = 'none';
				}
				else if(parent.className.indexOf('shake') != -1){
					ob.className = 'shake';
					ob.style.display = 'none';
				}
				else if(parent.className.indexOf('blindv') != -1){
					ob.className = 'blindv';
					ob.style.display = 'none';
				}
				else if(parent.className.indexOf('blindh') != -1){
					ob.className = 'blindh';
					ob.style.display = 'none';
				}
				else{
					ob.className = 'none';
					ob.style.display = 'none';
				}
			}
			function ancestor(child, parent){
				if(child==null)return false;//Saves checking elsewhere
				//This is a fix for a Firefox bug *gasp*
				//Aparantly causes a bug in Opera!
				//I see no choice but a browser detect. *sigh* I didn't want to have to do this.
				if(navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Opera') == -1){
					//This should only be run by Gecko based browsers. this code should be fine in everything but Opera so forge away browsers.
					var allc = parent.getElementsByTagName('*');
					for(var i= 0;i<allc.length;i++){
						if(allc[i] == child){
							return true;
						}
					}
				}
				else{
					//http://www.dynamicdrive.com/forums/showthread.php?t=12341 Thanks Twey!
					for(; child.parentNode; child = child.parentNode){
						if(child.parentNode === parent) return true;
					}
				}
				return false;
			}
		</script>

</ul>
				</li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
				<li><a href="#">Link</a></li>
			</ul>
		</div>
		<div class="mlmenu horizontal shake arrow bluewhite">
		
			<ul>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a>
					<ul>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a>
					<ul>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
				<li><a href="#">Link</a>
					<ul>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
				<li><a href="#">Link</a>
					<ul>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
				<li><a href="#">Link</a></li>
			</ul>
		</div>
		<p>As the above shows it is capable of producing multiple menus on a single page.In fact you can have an unlimited number of menus. All produced with the following markup.</p>
		<textarea style="width: 100%; height: 200px;">
		<div class="mlmenu [horizontal|vertical] [effect] [arrow] [color_class] [inaccesible]">
		
			<ul>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a>
					<ul>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a>
					<ul>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
				<li><a href="#">Link</a>
					<ul>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
				<li><a href="#">Link</a>
					<ul>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
					</ul>
				</li>
				<li><a href="#">Link</a></li>
			</ul>
		</div>

Then simply place this code in the head of the document.

So lets go over the options

Base

The very minimum required to the menu is the following

The first choice to make is horizontal or vertical. You simply place your choice right in the class portion. You also need to pick a color scheme. The default css icludes two blackwhite and bluewhite. Here's what we have so far.

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

Effects

The menu is capable of producing five effects(only four in Internet Explorer). They are blink,shake,fade,blindv,blindh. To use them you simple inlcude them in the class name.

Blink

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

Shake

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

Fade

Now works in Internet Explorer

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

Blindh

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

Blindv

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

Other Switches

The menu also supports two other "switches" unlike effects they may be both used at once

arrow

This switch will add a small arrows to any menu that has a submenu. The javascript always adds a class of "haschild" to an li element that would have an arrow.There is a small Internet Explorer bug with this switch that will cause the menu to have a slighly larger height that other browsers. In most cases this can be ignored.

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

plus

Similiar to the above this switch will add a + sign. It can be used with arrow but I don't see why you would want to!

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

delay

This switch will cause a small delay before the menu disappears. This helps make the menu feel a little more solid.

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

inaccesible

This switch will prevent the "flickering" when the page loads. This comes at a price though. Users with javascript disabled will not see the sub-menus. To negate this make top-level links point to a sitemap to prevent confusion

Link
Link
Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link

Browser Supports and downloads

The menu has been tested in IE6(IE5.5 partial,there is slight issues with alignment and borders),Firefox 1.5+ and Opera 8.5+. The latest Safari release was tested on an older version of the script and was found to work.. All required files plus this page may be downloaded here

This menu is created by Brady Mulhollem. If you have any questions or comments you can email me at blm126 [AT] gmail.remove.this.com.