导航下拉菜单效果

港控/mmm° 2021-12-20 02:11 377阅读 0赞

以下是首页包含的TOP.htm文件

var Menu41 = Menu4.addMenu(Menu4.items\[0\]);  
  
Menu41.addItem(' 登山/徒步系列','caidan1.asp?kws\_pcid=1');  
  
Menu41.addItem(' 远足/运动背包系列','caidan1.asp?kws\_pcid=2');  
  
Menu41.addItem(' 运动手提包系列','caidan1.asp?kws\_pcid=3');  
  
Menu41.addItem(' 摄影包','caidan1.asp?kws\_pcid=4');  
  
Menu41.addItem(' 电脑包','caidan1.asp?kws\_pcid=5');  
  
Menu41.addItem(' 腰包','caidan1.asp?kws\_pcid=6');  
  
Menu41.addItem(' 挂包','caidan1.asp?kws\_pcid=7');  
  
Menu41.addItem(' 附件','caidan1.asp?kws\_pcid=8');  
  
Menu4.addItem(' 服装类','fuzhuang1.asp');  
Menu4.addItem(' 鞋袜类','xie1.asp');  
Menu4.addItem(' 帐篷睡袋类','zhangpeng1.asp');  
Menu4.addItem(' 其他装备','qita1.asp');

var Menu42 = Menu4.addMenu(Menu4.items\[1\]);  
  
Menu42.addItem(' 冲锋衣裤系列','fuzhuang1.asp?kws\_pcid=10');  
  
Menu42.addItem(' 羽绒服系列','fuzhuang1.asp?kws\_pcid=11');  
  
Menu42.addItem(' 抓绒服系列','fuzhuang1.asp?kws\_pcid=12');  
  
Menu42.addItem(' 速干衣裤系列','fuzhuang1.asp?kws\_pcid=13');  
  
Menu42.addItem(' T恤系列','fuzhuang1.asp?kws\_pcid=14');  
  
Menu42.addItem(' 帽子围巾','fuzhuang1.asp?kws\_pcid=15');  
  
Menu42.addItem(' 休闲系列','fuzhuang1.asp?kws\_pcid=16');

var Menu43 = Menu4.addMenu(Menu4.items\[2\]);  
  
Menu43.addItem(' 鞋系列','xie1.asp?kws\_pcid=17');  
  
Menu43.addItem(' 袜系列','xie1.asp?kws\_pcid=18');

var Menu44 = Menu4.addMenu(Menu4.items\[3\]);  
  
Menu44.addItem(' 睡袋','zhangpeng1.asp?kws\_pcid=19');  
  
Menu44.addItem(' 帐篷','zhangpeng1.asp?kws\_pcid=20');

var Menu45 = Menu4.addMenu(Menu4.items\[4\]);  
  
Menu45.addItem(' 防潮垫','qita1.asp?kws\_pcid=21');  
  
Menu45.addItem(' 水具','qita1.asp?kws\_pcid=22');  
  
Menu45.addItem(' 其他类别','qita1.asp?kws\_pcid=23');

var Menu5=ms.addMenu(document.getElementById("Menu5"));  
Menu5.addItem(' 销售政策','faq.asp?id=7');  
Menu5.addItem(' 售后服务','faq.asp?id=8');  
Menu5.addItem(' 产品使用','faq.asp?id=9');  
var Menu6=ms.addMenu(document.getElementById("Menu6"));  
Menu6.addItem(' 联系我们','content.asp');  
Menu6.addItem(' 在线留言','guestbook.asp');

mtDropDown.renderAll();

\}  
</script>  
<SCRIPT>  
mtDropDown.initialize();  
</SCRIPT>

以下是被包含的menu\_style.css文件内容

.mtDropdownMenu \{  
LEFT: -1000px; OVERFLOW: hidden; POSITION: absolute; TOP: -1000px  
\}  
.mtDropdownMenu .content \{  
POSITION: absolute  
\}  
.mtDropdownMenu .items \{  
BORDER-RIGHT: \#999 1px solid; BORDER-TOP: \#999 1px solid; Z-INDEX: 2; LEFT: 0px; BORDER-LEFT: \#999 1px solid; BORDER-BOTTOM: \#999 1px solid; POSITION: relative; TOP: 0px  
\}  
.top .items \{  
BORDER-TOP: medium none  
\}  
.mtDropdownMenu .item \{  
BORDER-RIGHT: medium none; BORDER-TOP: medium none; FONT-SIZE: 12px; BORDER-LEFT: medium none; CURSOR: hand; COLOR: \#4a4b4b; BORDER-BOTTOM: medium none; TEXT-DECORATION: none  
\}  
.mtDropdownMenu .background \{  
Z-INDEX: 1; FILTER: alpha(opacity=80); LEFT: 0px; POSITION: absolute; TOP: 0px; moz-opacity: .8  
\}  
.mtDropdownMenu .shadowRight \{  
Z-INDEX: 3; FILTER: alpha(opacity=40); WIDTH: 2px; POSITION: absolute; TOP: 3px; moz-opacity: .4  
\}  
.mtDropdownMenu .shadowBottom \{  
Z-INDEX: 1; FILTER: alpha(opacity=40); LEFT: 3px; POSITION: absolute; HEIGHT: 2px; moz-opacity: .4  
\}  
.mtDropdownMenu .hover \{  
BACKGROUND-COLOR: \#c1cbd5  
\}  
.mtDropdownMenu .item IMG \{  
MARGIN-LEFT: 6px  
\}

以下是被包含的menu.js文件内容

mtDropDown.spacerGif = "images/--.gif";  
mtDropDown.dingbatOn = "images/-.gif";  
mtDropDown.dingbatOff = "images/+.gif";  
mtDropDown.dingbatSize = 14;  
mtDropDown.menuPadding = 1; //菜单图标离右边距离  
mtDropDown.itemPadding = 4; //菜单间距  
mtDropDown.shadowSize = 2; //菜单右边阴影长度  
mtDropDown.shadowOffset = 3;  
mtDropDown.shadowColor = "\#888"; //菜单阴影颜色  
mtDropDown.shadowPng = "images/grey-40.png";  
mtDropDown.backgroundColor = "white";  
mtDropDown.backgroundPng = "images/white-90.png";  
mtDropDown.hideDelay = 100; //菜单停留时间  
mtDropDown.slideTime = 200; //菜单弹出速度

mtDropDown.reference = \{topLeft:1,topRight:2,bottomLeft:3,bottomRight:4\};  
mtDropDown.direction = \{down:1,right:2\};  
mtDropDown.registry = \[\];  
mtDropDown.\_maxZ = 100;

mtDropDown.isSupported = function() \{  
if (typeof mtDropDown.isSupported.r == "boolean")  
return mtDropDown.isSupported.r;  
var ua = navigator.userAgent.toLowerCase();  
var an = navigator.appName;  
var r = false;  
if (ua.indexOf("gecko") > -1) r = true;  
else if (an == "Microsoft Internet Explorer") \{  
if (document.getElementById) r = true;  
\}  
mtDropDown.isSupported.r = r;  
return r;  
\}

mtDropDown.initialize = function() \{  
for (var i = 0, menu = null; menu = this.registry\[i\]; i++) \{  
menu.initialize();  
\}  
\}

mtDropDown.renderAll = function() \{  
var aMenuHtml = \[\];  
for (var i = 0, menu = null; menu = this.registry\[i\]; i++) \{  
aMenuHtml\[i\] = menu.toString();  
\}  
document.write(aMenuHtml.join(""));  
\}

function mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, parentMenuSet) \{

this.addItem = addItem;  
this.addMenu = addMenu;  
this.toString = toString;  
this.initialize = initialize;  
this.isOpen = false;  
this.show = show;  
this.hide = hide;  
this.items = \[\];

this.onactivate = new Function();  
this.ondeactivate = new Function();  
this.onmouseover = new Function();  
this.onqueue = new Function();

this.index = mtDropDown.registry.length;  
mtDropDown.registry\[this.index\] = this;  
var id = "mtDropDown" + this.index;  
var contentHeight = null;  
var contentWidth = null;  
var childMenuSet = null;  
var animating = false;  
var childMenus = \[\];  
var slideAccel = -1;  
var elmCache = null;  
var ready = false;  
var \_this = this;  
var a = null;  
var pos = iDirection == mtDropDown.direction.down ? "top" : "left";  
var dim = null;

if (ready) \{  
\_this.isOpen = true;  
animating = true;  
setContainerPos();  
elmCache\["clip"\].style.visibility = "visible";  
elmCache\["clip"\].style.zIndex = mtDropDown.\_maxZ++;

slideStart();  
\_this.onactivate();  
\}  
\}  
function hide() \{  
if (ready) \{  
\_this.isOpen = false;  
animating = true;  
for (var i = 0, item = null; item = elmCache.item\[i\]; i++)  
dehighlight(item);  
if (childMenuSet) childMenuSet.hide();  
slideStart();  
\_this.ondeactivate();  
\}  
\}  
function setContainerPos() \{  
var sub = oActuator.constructor == mtDropDownItem;  
var act = sub ? oActuator.parentMenu.elmCache\["item"\]\[oActuator.\_index\] : oActuator;  
var el = act;  
var x = -2;  
var y = 0;  
var minX = 0;  
var maxX = (window.innerWidth ? window.innerWidth : document.body.clientWidth) - parseInt(elmCache\["clip"\].style.width);  
var minY = 0;  
var maxY = (window.innerHeight ? window.innerHeight : document.body.clientHeight) - parseInt(elmCache\["clip"\].style.height);

while (sub ? el.parentNode.className.indexOf("mtDropdownMenu") == -1 : el.offsetParent) \{  
x += el.offsetLeft;  
y += el.offsetTop;  
if (el.scrollLeft) x -= el.scrollLeft;  
if (el.scrollTop) y -= el.scrollTop;  
el = el.offsetParent;  
\}  
if (oActuator.constructor == mtDropDownItem) \{  
x += parseInt(el.parentNode.style.left);  
y += parseInt(el.parentNode.style.top);  
\}  
switch (iReferencePoint) \{  
case mtDropDown.reference.topLeft:  
break;  
case mtDropDown.reference.topRight:  
x += act.offsetWidth;  
break;  
case mtDropDown.reference.bottomLeft:  
y += act.offsetHeight;  
break;  
case mtDropDown.reference.bottomRight:  
x += act.offsetWidth;  
y += act.offsetHeight;  
break;  
\}  
x += iLeft;  
y += iTop;  
x = Math.max(Math.min(x, maxX), minX);  
y = Math.max(Math.min(y, maxY), minY);  
elmCache\["clip"\].style.left = x + "px";  
elmCache\["clip"\].style.top = y + "px";  
\}  
function slideStart() \{  
var x0 = parseInt(elmCache\["content"\].style\[pos\]);  
var x1 = \_this.isOpen ? 0 : -dim;  
if (a != null) a.stop();  
a = new Accelimation(x0, x1, mtDropDown.slideTime, slideAccel);  
a.onframe = slideFrame;  
a.onend = slideEnd;  
a.start();  
\}  
function slideFrame(x) \{  
elmCache\["content"\].style\[pos\] = x + "px";  
\}  
function slideEnd() \{  
if (!\_this.isOpen) elmCache\["clip"\].style.visibility = "hidden";  
animating = false;  
\}  
function initSize() \{

var ow = elmCache\["items"\].offsetWidth;  
var oh = elmCache\["items"\].offsetHeight;  
var ua = navigator.userAgent.toLowerCase();

elmCache\["clip"\].style.width = ow + mtDropDown.shadowSize + 2 + "px";  
elmCache\["clip"\].style.height = oh + mtDropDown.shadowSize + 2 + "px";

elmCache\["content"\].style.width = ow + mtDropDown.shadowSize + "px";  
elmCache\["content"\].style.height = oh + mtDropDown.shadowSize + "px";  
contentHeight = oh + mtDropDown.shadowSize;  
contentWidth = ow + mtDropDown.shadowSize;  
dim = iDirection == mtDropDown.direction.down ? contentHeight : contentWidth;

elmCache\["content"\].style\[pos\] = -dim - mtDropDown.shadowSize + "px";  
elmCache\["clip"\].style.visibility = "hidden";

if (ua.indexOf("mac") == -1 || ua.indexOf("gecko") > -1) \{

elmCache\["background"\].style.width = ow + "px";  
elmCache\["background"\].style.height = oh + "px";  
elmCache\["background"\].style.backgroundColor = mtDropDown.backgroundColor;

elmCache\["shadowRight"\].style.left = ow + "px";  
elmCache\["shadowRight"\].style.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize) + "px";  
elmCache\["shadowRight"\].style.backgroundColor = mtDropDown.shadowColor;

elmCache\["shadowBottom"\].style.top = oh + "px";  
elmCache\["shadowBottom"\].style.width = ow - mtDropDown.shadowOffset + "px";  
elmCache\["shadowBottom"\].style.backgroundColor = mtDropDown.shadowColor;  
\}

else \{

elmCache\["background"\].firstChild.src = mtDropDown.backgroundPng;  
elmCache\["background"\].firstChild.width = ow;  
elmCache\["background"\].firstChild.height = oh;

elmCache\["shadowRight"\].firstChild.src = mtDropDown.shadowPng;  
elmCache\["shadowRight"\].style.left = ow + "px";  
elmCache\["shadowRight"\].firstChild.width = mtDropDown.shadowSize;  
elmCache\["shadowRight"\].firstChild.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize);

elmCache\["shadowBottom"\].firstChild.src = mtDropDown.shadowPng;  
elmCache\["shadowBottom"\].style.top = oh + "px";  
elmCache\["shadowBottom"\].firstChild.height = mtDropDown.shadowSize;  
elmCache\["shadowBottom"\].firstChild.width = ow - mtDropDown.shadowOffset;  
\}  
\}  
function initCache() \{  
var menu = document.getElementById(id);  
var all = menu.all ? menu.all : menu.getElementsByTagName("\*");  
elmCache = \{\};  
elmCache\["clip"\] = menu;  
elmCache\["item"\] = \[\];  
for (var i = 0, elm = null; elm = all\[i\]; i++) \{  
switch (elm.className) \{  
case "items":  
case "content":  
case "background":  
case "shadowRight":  
case "shadowBottom":  
elmCache\[elm.className\] = elm;  
break;  
case "item":  
elm.\_index = elmCache\["item"\].length;  
elmCache\["item"\]\[elm.\_index\] = elm;  
break;  
\}  
\}

\_this.elmCache = elmCache;  
\}  
function initEvents() \{

for (var i = 0, item = null; item = elmCache.item\[i\]; i++) \{  
item.onmouseover = item\_mouseover;  
item.onmouseout = item\_mouseout;  
item.onclick = item\_click;  
\}

if (typeof oActuator.tagName != "undefined") \{  
oActuator.onmouseover = actuator\_mouseover;  
oActuator.onmouseout = actuator\_mouseout;  
\}

elmCache\["content"\].onmouseover = content\_mouseover;  
elmCache\["content"\].onmouseout = content\_mouseout;  
\}  
function highlight(oRow) \{  
oRow.className = "item hover";  
if (childMenus\[oRow.\_index\])  
oRow.lastChild.firstChild.src = mtDropDown.dingbatOn;  
\}  
function dehighlight(oRow) \{  
oRow.className = "item";  
if (childMenus\[oRow.\_index\])  
oRow.lastChild.firstChild.src = mtDropDown.dingbatOff;  
\}  
function item\_mouseover() \{  
if (!animating) \{  
highlight(this);  
if (childMenus\[this.\_index\])  
childMenuSet.showMenu(childMenus\[this.\_index\]);  
else if (childMenuSet) childMenuSet.hide();  
\}  
\}  
function item\_mouseout() \{  
if (!animating) \{  
if (childMenus\[this.\_index\])  
childMenuSet.hideMenu(childMenus\[this.\_index\]);  
else  
dehighlight(this);  
\}  
\}  
function item\_click() \{  
if (!animating) \{  
if (\_this.items\[this.\_index\].url)  
location.href = \_this.items\[this.\_index\].url;  
\}  
\}  
function actuator\_mouseover() \{  
parentMenuSet.showMenu(\_this);  
\}  
function actuator\_mouseout() \{  
parentMenuSet.hideMenu(\_this);  
\}  
function content\_mouseover() \{  
if (!animating) \{  
parentMenuSet.showMenu(\_this);  
\_this.onmouseover();  
\}  
\}  
function content\_mouseout() \{  
if (!animating) \{  
parentMenuSet.hideMenu(\_this);  
\}  
\}  
function child\_mouseover() \{  
if (!animating) \{  
parentMenuSet.showMenu(\_this);  
\}  
\}  
function child\_deactivate() \{  
for (var i = 0; i < childMenus.length; i++) \{  
if (childMenus\[i\] == this) \{  
dehighlight(elmCache\["item"\]\[i\]);  
break;  
\}  
\}  
\}  
function child\_queue() \{  
parentMenuSet.hideMenu(\_this);  
\}  
function toString() \{  
var aHtml = \[\];  
var sClassName = "mtDropdownMenu" + (oActuator.constructor != mtDropDownItem ? " top" : "");  
for (var i = 0, item = null; item = this.items\[i\]; i++) \{  
aHtml\[i\] = item.toString(childMenus\[i\]);  
\}  
return '<div id="' + id + '" class="' + sClassName + '">' +  
'<div class="content"><table class="items" cellpadding="0" cellspacing="0" border="0">' +  
'<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr>' +  
aHtml.join('') +  
'<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr></table>' +  
'<div class="shadowBottom"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +  
'<div class="shadowRight"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +  
'<div class="background"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +  
'</div></div>';  
\}  
\}

mtDropDownSet.registry = \[\];  
function mtDropDownSet(iDirection, iLeft, iTop, iReferencePoint) \{

this.addMenu = addMenu;  
this.showMenu = showMenu;  
this.hideMenu = hideMenu;  
this.hide = hide;

var menus = \[\];  
var \_this = this;  
var current = null;  
this.index = mtDropDownSet.registry.length;  
mtDropDownSet.registry\[this.index\] = this;

function addMenu(oActuator) \{  
var m = new mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, this);  
menus\[menus.length\] = m;  
return m;  
\}  
function showMenu(oMenu) \{  
if (oMenu != current) \{

if (current != null) hide(current);

current = oMenu;

oMenu.show();  
\}  
else \{

cancelHide(oMenu);  
\}  
\}  
function hideMenu(oMenu) \{

if (current == oMenu && oMenu.isOpen) \{

if (!oMenu.hideTimer) scheduleHide(oMenu);  
\}  
\}  
function scheduleHide(oMenu) \{

oMenu.onqueue();  
oMenu.hideTimer = window.setTimeout("mtDropDownSet.registry\[" + \_this.index + "\].hide(mtDropDown.registry\[" + oMenu.index + "\])", mtDropDown.hideDelay);  
\}  
function cancelHide(oMenu) \{

if (oMenu.hideTimer) \{  
window.clearTimeout(oMenu.hideTimer);  
oMenu.hideTimer = null;  
\}  
\}  
function hide(oMenu) \{  
if (!oMenu && current) oMenu = current;  
if (oMenu && current == oMenu && oMenu.isOpen) \{

cancelHide(oMenu);  
current = null;  
oMenu.hideTimer = null;  
oMenu.hide();  
\}  
\}  
\}

function mtDropDownItem(sText, sUrl, oParent) \{  
this.toString = toString;  
this.text = sText;  
this.url = sUrl;  
this.parentMenu = oParent;  
function toString(bDingbat) \{  
var sDingbat = bDingbat ? mtDropDown.dingbatOff : mtDropDown.spacerGif;  
var iEdgePadding = mtDropDown.itemPadding + mtDropDown.menuPadding;  
var sPaddingLeft = "padding:" + mtDropDown.itemPadding + "px; padding-left:" + iEdgePadding + "px;"  
var sPaddingRight = "padding:" + mtDropDown.itemPadding + "px; padding-right:" + iEdgePadding + "px;"  
return '<tr class="item"><td nowrap style="' + sPaddingLeft + '">' +  
sText + '</td><td width="14" style="' + sPaddingRight + '">' +  
'<img src="' + sDingbat + '" width="14" height="14"></td></tr>';  
\}  
\}

function Accelimation(from, to, time, zip) \{  
if (typeof zip == "undefined") zip = 0;  
if (typeof unit == "undefined") unit = "px";  
this.x0 = from;  
this.x1 = to;  
this.dt = time;  
this.zip = -zip;  
this.unit = unit;  
this.timer = null;  
this.onend = new Function();  
this.onframe = new Function();  
\}

Accelimation.prototype.start = function() \{  
this.t0 = new Date().getTime();  
this.t1 = this.t0 + this.dt;  
var dx = this.x1 - this.x0;  
this.c1 = this.x0 + ((1 + this.zip) \* dx / 3);  
this.c2 = this.x0 + ((2 + this.zip) \* dx / 3);  
Accelimation.\_add(this);  
\}

Accelimation.prototype.stop = function() \{  
Accelimation.\_remove(this);  
\}

Accelimation.prototype.\_paint = function(time) \{  
if (time < this.t1) \{  
var elapsed = time - this.t0;  
this.onframe(Accelimation.\_getBezier(elapsed/this.dt,this.x0,this.x1,this.c1,this.c2));  
\}  
else this.\_end();  
\}

Accelimation.prototype.\_end = function() \{  
Accelimation.\_remove(this);  
this.onframe(this.x1);  
this.onend();  
\}

Accelimation.\_add = function(o) \{  
var index = this.instances.length;  
this.instances\[index\] = o;

if (this.instances.length == 1) \{  
this.timerID = window.setInterval("Accelimation.\_paintAll()", this.targetRes);  
\}  
\}

Accelimation.\_remove = function(o) \{  
for (var i = 0; i < this.instances.length; i++) \{  
if (o == this.instances\[i\]) \{  
this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );  
break;  
\}  
\}

if (this.instances.length == 0) \{  
window.clearInterval(this.timerID);  
this.timerID = null;  
\}  
\}

Accelimation.\_paintAll = function() \{  
var now = new Date().getTime();  
for (var i = 0; i < this.instances.length; i++) \{  
this.instances\[i\].\_paint(now);  
\}  
\}

Accelimation.\_B1 = function(t) \{ return t\*t\*t \}  
Accelimation.\_B2 = function(t) \{ return 3\*t\*t\*(1-t) \}  
Accelimation.\_B3 = function(t) \{ return 3\*t\*(1-t)\*(1-t) \}  
Accelimation.\_B4 = function(t) \{ return (1-t)\*(1-t)\*(1-t) \}

Accelimation.\_getBezier = function(percent,startPos,endPos,control1,control2) \{  
return endPos \* this.\_B1(percent) + control2 \* this.\_B2(percent) + control1 \* this.\_B3(percent) + startPos \* this.\_B4(percent);  
\}

Accelimation.instances = \[\];  
Accelimation.targetRes = 10;  
Accelimation.timerID = null;

转载于:https://www.cnblogs.com/hellen-li/archive/2010/04/16/1713203.html