dhtml下拉菜单效果
<html>
<head>
<style>
div.vert_menu
{
position: absolute;
visibility: hidden;
display: none;
}
div.horz_menu a { display: block; float: left; }
div.vert_menu a { display: block; float: none; }
/* ----- sample 1 ----------------------------------------------------------- */
div.sample1 div.vert_menu { border-bottom: 1px solid black; }
div.sample1 div.horz_menu a,
div.sample1 div.vert_menu a
{
border: 1px solid black;
padding: 1px 0px 1px 0px;
width: 106px;
background: #ffffdd;
text-decoration: none;
font-family: "times new roman", serif;
font-weight: 900;
font-size: 13px;
color: #008000;
}
div.sample1 div.horz_menu a { margin-right: -1px; }
div.sample1 div.vert_menu a { margin-bottom: -1px; }
div.sample1 div.horz_menu a:hover,
div.sample1 div.vert_menu a:hover,
div.sample1 div.horz_menu a.active,
div.sample1 div.vert_menu a.active { background: #ffffee; }
/* ----- sample 2 ----------------------------------------------------------- */
div.sample2 div.vert_menu { border-bottom: 1px solid black; }
div.sample2 div.horz_menu a,
div.sample2 div.vert_menu a
{
border: 1px solid black;
width: 106px;
height: 20px;
line-height: 19px;
vertical-align: middle;
background: url('dhtml-menu.png') 0px 40px;
text-decoration: none;
font-family: "times new roman", serif;
font-weight: 900;
font-size: 13px;
color: #206040;
}
div.sample2 div.horz_menu a { margin-right: -1px; }
div.sample2 div.vert_menu a { margin-bottom: -1px; }
div.sample2 div.horz_menu a:hover,
div.sample2 div.vert_menu a:hover
{
color: #206060;
background-position: 0px 20px;
}
div.sample2 div.horz_menu a.parent,
div.sample2 div.vert_menu a.parent
{
background-position: 0px 0px;
}
div.sample2 div.horz_menu a.active,
div.sample2 div.vert_menu a.active,
div.sample2 div.horz_menu a.active:hover,
div.sample2 div.vert_menu a.active:hover
{
color: #206060;
background-position: 0px 60px;
}
</style>
<script type="text/网页特效">
function at_display(x)
{
var win = window.open();
for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
// ***** dropdown box **********************************************************
var at_timeout = 50;
// ***** show aux *****
function at_show_aux(parent, child)
{
var p = document.getelementbyid(parent);
var c = document.getelementbyid(child);
p.classname = "active";
if (c.offsetwidth <= 0)
{
c.style.position = "absolute";
c.style.visibility = "visible";
c.style.display = "block";
}
var direction = undefined;
if (p.parentnode && p.parentnode["at_position"] == "x")
direction = p.parentnode["at_direction"];
var top = (c["at_position"] == "y") ? p.offsetheight : 0;
var left1 = (c["at_position"] == "x") ? p.offsetwidth : 0;
var left2 = (c["at_position"] == "x") ? -c.offsetwidth : 0;
var left3 = (c["at_position"] == "x") ? p.offsetwidth : 0;
for (; p; p = p.offsetparent)
{
if (p.style.position != 'absolute')
{
left1 += p.offsetleft;
left2 += p.offsetleft;
top += p.offsettop;
}
left3 += p.offsetleft;
}
if (direction)
{
left = (direction == 'right') ? left1 : left2;
c['at_direction'] = direction;
}
else
{
left = (left3+c.offsetwidth < document.body.offsetwidth) ? left1 : left2;
c['at_direction'] = (left3+c.offsetwidth < document.body.offsetwidth) ? 'right' : 'left';
}
c.style.position = "absolute";
c.style.visibility = "visible";
c.style.display = "block";
c.style.top = top +'px';
c.style.left = left+'px';
}
// ***** hide aux *****
function at_hide_aux(parent, child)
{
document.getelementbyid(parent).classname = "parent";
document.getelementbyid(child ).style.visibility = "hidden";
document.getelementbyid(child ).style.display = "block";
}
// ***** show *****
function at_show(e)
{
var p = document.getelementbyid(this["at_parent"]);
var c = document.getelementbyid(this["at_child" ]);
at_show_aux(p.id, c.id);
cleartimeout(c["at_timeout"]);
}
// ***** hide *****
function at_hide()
{
var c = document.getelementbyid(this["at_child"]);
c["at_timeout"] = settimeout("at_hide_aux('"+this["at_parent"]+"', '"+this["at_child" ]+"')", at_timeout);
}
// ***** attach *****
function at_attach(parent, child, position)
{
p = document.getelementbyid(parent);
c = document.getelementbyid(child );
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_parent"] = p.id;
c["at_parent"] = p.id;
c["at_position"] = position;
p.onmouseo教程ver = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
}
// ***** dropdown menu *********************************************************
// ***** build aux *****
function dhtmlmenu_build_aux(parent, child, position)
{
document.getelementbyid(parent).classname = "parent";
document.write('<div class="vert_menu" id="'+parent+'_child">');
var n = 0;
for (var i in child)
{
if (i == '-')
{
document.getelementbyid(parent).href = child[i];
continue;
}
if (typeof child[i] == "object")
{
document.write('<a class="parent" id="'+parent+'_'+n+'">'+i+'</a>');
dhtmlmenu_build_aux(parent+'_'+n, child[i], "x");
}
else document.write('<a id="'+parent+'_'+n+'" href="'+child[i]+'">'+i+'</a>');
n++;
}
document.write('</div>');
at_attach(parent, parent+"_child", position);
}
// ***** build *****
function dhtmlmenu_build(menu)
{
for (var i in menu) dhtmlmenu_build_aux(i, menu[i], "y");
}</script>
</head>
<body style="font-family: 'times new roman'; font-size: 13px; color: #a0a0a0;">
<!-- sample 1 -->
<div class="sample1">
<div class="horz_menu">
<a id="sample1_home" href="javascript:alert('home' );"> home</a>
<a id="sample1_downloads" href="javascript:alert('downloads');"> downloads</a>
<a id="sample1_tips教程" href="javascript:alert('tips' );"> tips</a>
<a id="sample1_products" href="javascript:alert('products' );"> products >></a>
<br clear="both" />
</div>
<script type="text/javascript">
var submenu_samples = { "-" : "javascript:alert('samples');",
" sample 1" : "javascript:alert('sample 1');",
" sample 2" : "javascript:alert('sample 2');",
" sample 3" : "javascript:alert('sample 3');" };
var submenu_product2 = { "-" : "javascript:alert('product 2');",
" description" : "javascript:alert('description');",
" samples >>"
: submenu_samples,
" purchage" : "javascript:alert('purchage');" };
var submenu_products = { " product 1" : "javascript:alert('product 1');",
" product 2 >>"
: submenu_product2,
" product 3" : "javascript:alert('product 3');" };
var menu = { "sample1_products" : submenu_products };
dhtmlmenu_build(menu);
</script>
</div>
some text goes here...<br />
some text goes here...<br />
<!-- sample 2 -->
<div class="sample2">
<div class="horz_menu">
<a id="sample2_home" href="javascript:alert('home' );"> home</a>
<a id="sample2_products" href="javascript:alert('products' );"> products</a>
<a id="sample2_downloads" href="javascript:alert('downloads');"> downloads</a>
<a id="sample2_tips" href="javascript:alert('tips' );"> tips</a>
<br clear="both" />
</div>
<script type="text/javascript">
var submenu_samples = { "-" : "javascript:alert('samples');",
" sample 1" : "javascript:alert('sample 1');",
" sample 2" : "javascript:alert('sample 2');",
" sample 3" : "javascript:alert('sample 3');" };
var submenu_product2 = { "-" : "javascript:alert('product 2');",
" description" : "javascript:alert('description');",
" samples" : submenu_samples,
" purchage" : "javascript:alert('purchage');" };
var submenu_products = { " product 1" : "javascript:alert('product 1');",
" product 2" : submenu_product2,
" product 3" : "javascript:alert('product 3');" };
var menu = { "sample2_products" : submenu_products };
dhtmlmenu_build(menu);
</script>
</div>
some text goes here...<br />
some text goes here...<br />
some text goes here...<br />
some text goes here...<br />
some text goes here...<br />
some text goes here...<br />
some text goes here...<br />
some text goes here...<br />
some text goes here...
</body>
</html>
