menu.tt

• Back
• Raw format

<script type="text/javascript">

var mmActive = [];
var mmTimer;

mm_open = function(p, depth) {
	clearTimeout(mmTimer);

	var obj = p ? p.getElementsByTagName('UL').item(0) : 0;
	var tmp = mmActive_list();

	if(mmActive[depth] && mmActive[depth] != obj) {
		while(mmActive.length && depth <= mmActive.length) {
			var mm       = mmActive.pop();
			mm.className = mm.className.replace(/\s*over/g, '');
		}
	}

	if(obj != 0) {
		if(obj.className.indexOf('over') == -1)
			obj.className += ' over';
		mmActive[depth] = obj;
	}
}

function mmActive_list() {

	var tmp = [];

	for(var i = 0; i < mmActive.length; i++) {
		tmp[i] = mmActive[i];
	}

	return tmp;
}

mm_close = function() {
	clearTimeout(mmTimer);
	var tmp = mmActive_list();

	mmTimer = setTimeout(function() {
		while(mmActive.length) {
			obj           = mmActive.pop();
			obj           = tmp.pop();
			obj.className = obj.className.replace(/\s*over/g, '');
		}
	}, 500);
}

function mm_setup() {
	var li    = document.getElementById('mm').getElementsByTagName('LI');
	var index = li.length;
	for(var i = 0; i < li.length; i++) {
		li.item(i).style.zIndex = 10 + index--;
	}
}

window.onload = mm_setup;

</script>
<style type="text/css">
#mm {
	background: #774444;
	border: 2px solid #000000;
	float: left;
	line-height: 16pt;
	padding: 0;
	margin: 0.3em;
	width: 6em;
	overflow: visible;
	cursor: default;
}

#mm li  {
	list-style: none;
	padding: 0.5em;
	position: relative;
}

#mm li:hover {
	background: #333333;
}

#mm li.cc div {
	background: #996666;
}

#mm ul {
	padding: 2pt;
	margin: 0;
	border: 2px solid #000000;
	position: absolute;
	top: 10%;
	left: 80%;
	display: none;
	z-index: 10;
}

#mm ul.over {
	background: #664444;
	display: block;
}
</style>

<h2>CSS and JS powered menu</h2>

<ol id="mm">
	<li class="cc" onmouseover="mm_open(this, 0)" onmouseout="mm_close()">
		<div>File</div>
		<ul>
			<li onmouseover="mm_open(0, 1)">Open...</li>
			<li onmouseover="mm_open(0, 1)">Save...</li>
			<li onmouseover="mm_open(0, 1)">Exit</li>
		</ul>
	</li>
	<li class="cc" onmouseover="mm_open(this, 0)" onmouseout="mm_close()">
		<div>View</div>
		<ul>
			<li onmouseover="mm_open(0, 1)">Reload</li>
			<li class="cc" onmouseover="mm_open(this, 1)" onmouseout="mm_close()">
				<div>Toolbars</div>
				<ul>
					<li onmouseover="mm_open(0, 2)">Navigation</li>
					<li onmouseover="mm_open(0, 2)">Tools</li>
					<li onmouseover="mm_open(0, 2)">Help</li>

					<li class="cc" onmouseover="mm_open(this, 2)" onmouseout="mm_close()">
						<div>Saved&#160;Session</div>
						<ul>
							<li>bar</li>
							<li>bah</li>
						</ul>
					</li>

				</ul>
			</li>
			<li onmouseover="mm_open(0, 1)">Fullscreen</li>
		</ul>
	</li>
	<li onmouseover="mm_open(0, 0)">Help</li>
</ol>

<p>
Vivamus nec sem. Integer in turpis. Morbi lobortis, turpis sed eleifend aliquet, tellus justo euismod urna, eget fringilla libero lorem eu odio. Suspendisse fringilla felis a eros vehicula luctus. Nunc lobortis. Quisque quam justo, luctus id, fermentum id, dictum a, ante. Aliquam mi. Donec urna urna, scelerisque eget, placerat et, bibendum tempor, quam. Nullam eu massa eget neque adipiscing mattis. Suspendisse diam massa, lacinia eu, malesuada at, consectetuer tincidunt, ipsum. Aliquam facilisis, libero at blandit facilisis, est ligula rutrum quam, non condimentum sem libero quis quam. Nulla nonummy. In imperdiet sapien pharetra nisi. Praesent eu ante. Maecenas mauris nibh, aliquet quis, volutpat nec, tristique eu, turpis. Nam mattis ullamcorper magna. Pellentesque ut lorem. Ut dictum metus vel arcu. Suspendisse a ligula.
</p>