js下拉导航菜单

<script Language="JavaScript">
 var h;
 var w;
 var l;
 var t;
 var topMar = 3;
 var leftMar = -10;
 var space = 2;
 var isvisible;
 var MENU_SHADOW_COLOR='#999999';
 var global = window.document
 global.fo_currentMenu = null
 global.fo_shadows = new Array
function HideMenu()
{
 var mX;
 var mY;
 var vDiv;
 var mDiv;
 if (isvisible == true)
{
  vDiv = document.all("menuDiv");
  mX = window.event.clientX + document.body.scrollLeft;
  mY = window.event.clientY + document.body.scrollTop;
  if ((mX < parseInt(vDiv.style.left)) || (mX > parseInt(vDiv.style.left)+vDiv.offsetWidth) || (mY < parseInt(vDiv.style.top)-h) || (mY > parseInt(vDiv.style.top)+vDiv.offsetHeight)){
   vDiv.style.visibility = "hidden";
   isvisible = false;
  }
}
}
function ShowMenu(vMnuCode,tWidth) {
 vSrc = window.event.srcElement;
 vMnuCode = "<table id='submenu' cellspacing=1 cellpadding=3 style='width:"+tWidth+"' class=tableborder1 onmouseout='HideMenu()'><tr height=23><td nowrap align=left class=tablebody1>" + vMnuCode + "</td></tr></table>";
 h = vSrc.offsetHeight;
 w = vSrc.offsetWidth;
 l = vSrc.offsetLeft + leftMar+4;
 t = vSrc.offsetTop + topMar + h + space-2;
 vParent = vSrc.offsetParent;
 while (vParent.tagName.toUpperCase() != "BODY")
 {
  l += vParent.offsetLeft;
  t += vParent.offsetTop;
  vParent = vParent.offsetParent;
 }
 menuDiv.innerHTML = vMnuCode;
 menuDiv.style.top = t;
 menuDiv.style.left = l;
 menuDiv.style.visibility = "visible";
 isvisible = true;
    makeRectangularDropShadow(submenu, MENU_SHADOW_COLOR, 4)
}
function makeRectangularDropShadow(el, color, size)
{
 var i;
 for (i=size; i>0; i--)
 {
  var rect = document.createElement('div');
  var rs = rect.style
  rs.position = 'absolute';
  rs.left = (el.style.posLeft + i) + 'px';
  rs.top = (el.style.posTop + i) + 'px';
  rs.width = el.offsetWidth + 'px';
  rs.height = el.offsetHeight + 'px';
  rs.zIndex = el.style.zIndex - i;
  rs.backgroundColor = color;
  var opacity = 1 - i / (i + 1);
  rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
  el.insertAdjacentElement('afterEnd', rect);
  global.fo_shadows[global.fo_shadows.length] = rect;
 }
}
var About= '&nbsp;<a style=font-size:9pt;line-height:14pt; href="Company.asp"><font color="#000000">About US</font></a>&nbsp;<br>&nbsp;<a style=font-size:9pt;line-height:14pt; href="CThonor.asp"><font color="#000000">Certificate</font></a>&nbsp;'

var Product= '&nbsp;<a style=font-size:9pt;line-height:14pt; href="Product.asp"><font color="#000000">Product Show</font></a>&nbsp;<br>&nbsp;<a style=font-size:9pt;line-height:14pt; href="Products.asp"><font color="#000000">Product Sort</font></a>&nbsp;'
var Job= '&nbsp;<a style=font-size:9pt;line-height:14pt; href="Job.asp"><font color="#000000">人 才 招 聘</font></a>&nbsp;<br>&nbsp;<a style=font-size:9pt;line-height:14pt; href="Jobs.asp"><font color="#000000">人 才 策 略</font></a>&nbsp;'
var server= '&nbsp;<a style=font-size:9pt;line-height:14pt; href="Server.asp"><font color="#000000">Member Center</font></a>&nbsp;<br>&nbsp;<a style=font-size:9pt;line-height:14pt; href="NetBook.asp"><font color="#000000">Leave Word</font></a>&nbsp;<br>&nbsp;<a style=font-size:9pt;line-height:14pt; href="ftp://chentai.eicp.net" target="_blank"><font color="#000000">Download for guest</font></a>&nbsp;<br>&nbsp;<a style=font-size:9pt;line-height:14pt; href="ftp://chentai.eicp.net" target="_blank"><font color="#000000">Up for guest</font></a>&nbsp;'
</script>

时间: 2024-07-31 20:08:41

js下拉导航菜单的相关文章

js下拉导航菜单代码

产品介绍 产品一 产品一 产品一 产品一 产品一 产品一 服务介绍 服务二 服务二 服务二 服务二服务二 服务二服务二服务二 服务二 成功案例 案例三 案例 案例三案例三 案例三案例三案例三 关于我们 我们四 我们四 我们四 我们四111 在线演示 演示 演示 演示 演示演示演示 演示演示演示 演示演示 演示演示演示 演示演示演示演示演示 联系我们 联系联系联系联系联系 联系联系联系 联系 联系联系 联系联系 联系联系联系 联系联系联系

JS+CSS实现简单的二级下拉导航菜单效果_javascript技巧

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

jquery 竖向二级下拉导航菜单

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery 竖向二级下拉导航菜单<

jquery实现可伸缩的竖向下拉导航菜单

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>可伸缩的竖向下拉导航

jQuery实现淡入淡出二级下拉导航菜单的方法_jquery

本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,鼠标移动到包括二级子菜单的主菜单上,会立即渐显出二级的子菜单,鼠标在二级子菜单上划过,子菜单项的背景会改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/ 具体代

CSS+DIV设计实例:纯CSS制作下拉导航菜单

css|菜单|设计|下拉 纯CSS制作的下拉导航菜单-这是一个老外的作品,基本上全是用CSS+HTML写出来的,值得大家学习 以下是引用片段:<style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;lis

纯CSS实现超简单的二级下拉导航菜单代码

本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: 具体代码如下:   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

利用.net控件实现下拉导航菜单制作的具体方法

这篇文章介绍了利用.net控件实现下拉导航菜单制作的具体方法,有需要的朋友可以参考一下,希望对你有所帮助   今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下: 将鼠标移到父菜单上弹出3个子菜单,而且每个子菜单都有超链接. 以下是我自己做的代码: 复制代码 代码如下:     <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="10

使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效_jquery

这是一款仿windows10开始菜单的下拉导航菜单特效.该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果,它的代码简洁,效果非常时尚. 查看演示      源码下载 该下拉菜单的HTML结构非常简单,基本的HTML结构如下: <div id="top-bar" class="top-bar"> <div class="bar"> <button id="navbox-trig