DIV下拉式菜单(一)

80酷酷网    80kuku.com

  菜单|下拉

script> var cm=null; document.onclick = new Function("show(null)") function getPos(el,sProp) { var iPos = 0 while (el!=null) { iPos+=el["offset" + sProp] el = el.offsetParent } return iPos } function show(el,m) { if (m) { m.style.display=""; m.style.pixelLeft = getPos(el,"Left") m.style.pixelTop = getPos(el,"Top") + el.offsetHeight } if ((m!=cm) && (cm)) cm.style.display="none" cm=m }
  这是一个非常简单的菜单,虽然简单,但我们可以从这个示例中学习到一些有关CSS和javascripts的一些有关知识,对于认识下拉式菜单的制作原理和基础有很大的好处。在这个示例中,我用到了DIV标识来作为我的下拉菜单列,而用一个TABLE来做我的菜单头。原理就是通过识别鼠标移动来开关下拉菜单列的显示属性。
  下面是这个DIV菜单的效果,你可单击页面任何空白地来取消下拉菜单的显示。

杂志技术站点 门户站点 个人收藏站点


  天极网 Yesky.com
  电脑商情报
  新潮电子
 

  新浪网 Sina
  搜狐 Sohu
  网易 Netease
 

  耗子网络编程站
  中国同学录
  中国软件开发网

    好了,如果我告诉你,这样的效果也就几十行的代码,你信吗?不管怎么样,让我们来一步一步学习这个菜单是怎么做出来的。Step-by-Step,Let"s go.
  第一步,你 ?ㄒ逡幌虏说ハ詈筒说チ械?CSS层叠样式表,这里,如果你不知道CSS是什么意思,请参阅《电脑报网站》的有关CSS的教程。我们定义两个CSS的Class,一个是Meun,另一个是SubMenu, Menu定义了显示在菜单顶上的样式,而Submenu定义了下拉菜单列的显示样式。这里,需要注意的是Submenu中的“position:absolute;width:200”CSS属性,这是必须的,因为这决定了我们显示这个Submenu的位置。而其它的CSS的属性是可要可不要的。下面是这两个CSS Class的描述,你可以把下面这段话放在网的;之间,或是;之间。

;
;!--
  .menu {background-color:green;width:120; height:20;color: white; text-align: center;font-size:9pt;font-weight:bolder}
  .submenu {position:absolute;top:40;background-color:lightyellow;width:180; font-size:9pt}
;
;


  第二步,我们来看一下隐藏和显示下拉菜单列的javascript的代码。这段代码非常简单,只要学过一点javascripts的人应该是很容易看懂的。如果你不懂javascript的话,也请参阅《电脑报网站》上的有关javascripts的文章。这段代码的含义是,无论什么时候,只要鼠标一进入菜单项(Menu)元件中,那么它的下拉菜单列就会被一个叫Show函数显现出来。这个Show函数主要功能是显示当前的下拉菜单列,并隐藏其它的菜单列,并把当前所显示的菜单项放入变量cm中。另外,在这里,我还加入了一个简单的鼠标单击事件(onclick)句柄,当鼠标单击网页时,就隐藏所有的下拉菜单列。下面,我给出了整个javascript的程序,其中有一个叫 getPos 的函数,这是用来获取下拉菜单列的显示位置的。

;
  var cm=null;
  document.onclick = new Function("show(null)")
function getPos(el,sProp)
{var iPos = 0
  while (el!=null)
   {iPos+=el["offset" + sProp]
    el = el.offsetParent}
  return iPos}
function show(el,m)
{if (m) {m.style.display=" ";
      m.style.pixelLeft = getPos(el,"Left")
      m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
  if ((m!=cm) && (cm)) cm.style.display="none" cm=m }
;
 



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: