| DIV下拉式菜单（一） |
|
| 作者：未知 文章来源：mx68.com收集 点击数： 更新时间：2006-1-18 22:45:49
|
| 这是一个非常简单的菜单，虽然简单，但我们可以从这个示例中学习到一些有关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的描述，你可以把下面这段话放在网的<head></head>之间，或是<body></body>之间。 <STYLE>
<!--
.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}
-->
</STYLE>
第二步，我们来看一下隐藏和显示下拉菜单列的Javascript的代码。这段代码非常简单，只要学过一点JavaScripts的人应该是很容易看懂的。如果你不懂Javascript的话，也请参阅《电脑报网站》上的有关JavaScripts的文章。这段代码的含义是，无论什么时候，只要鼠标一进入菜单项（Menu）元件中，那么它的下拉菜单列就会被一个叫Show函数显现出来。这个Show函数主要功能是显示当前的下拉菜单列，并隐藏其它的菜单列，并把当前所显示的菜单项放入变量cm中。另外，在这里，我还加入了一个简单的鼠标单击事件（onclick）句柄，当鼠标单击网页时，就隐藏所有的下拉菜单列。下面，我给出了整个Javascript的程序，其中有一个叫 getPos 的函数，这是用来获取下拉菜单列的显示位置的。
<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 }
</SCRIPT>
|
|
[ 收藏此页到: 天天|和讯|博采|ViVi|狐摘|我摘|天极 ] 文章录入：admin 责任编辑：admin |
|
上一篇文章： DIV下拉式菜单（二）
下一篇文章： 脚本技术应用ABC |
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
用户登录 
新用户注册 
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）