繁體中文当前位置: 首页 > 图文教程 > 网络编程 > PHP > Javascript设计网页中的下拉菜单
- PHP
- 如何防止入侵：My SQL各种攻击方法大全
- 教你使用MySQL：MySQL常用命令一览
- 教你如何在linux下建立mysql镜像数据库
- 实际应用：MySQL5存储过程编写实践
- MySQL手册版本 5.0.20-MySQL同步
- MySQL手册版本 5.0.20-MySQL同步(二)
- MySQL手册版本 5.0.20-MySQL同步(三)
- MySQL 版本 卸载与安装
- [Mysql]Mysql中mysqldump命令使用详解 （1）
- [Mysql]Mysql中mysqldump命令使用详解 （2）
- 通过缓存数据库结果提高PHP性能(1)
- 通过缓存数据库结果提高PHP性能(2)
- 通过缓存数据库结果提高PHP性能(3)
- 通过缓存数据库结果提高PHP性能(4)
- 如何使用SQL Server 2005 INSTEAD-OF触发器
- 实例讲解MySQL数据库的查询优化技术 （1）(2)
- 实例讲解MySQL数据库的查询优化技术 （1）
- 高手心得：提高MySQL性能的方法 （1）(2)
- 高手心得：提高MySQL性能的方法 （1）
- 工作笔记：配置MySQL为高可用集群 （1）(2)
PHP 中的 Javascript设计网页中的下拉菜单
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-03 浏览: 268 ::
收藏到网摘: n/a
| Javascript设计网页中的下拉菜单 在网页制作时，为了更好地组织信息，使显示的信息分类明确、层次清晰，网页制作者往往费尽心机。常用的方法有用树型结构显示信息，用表格进行网页布局，用框架(frame)组织页面等等。但对于习惯了Windows操作系统的用户来说，利用菜单操作可以算是最自然的方法了。下面我们就来看一下怎样在网页中设计下拉式菜单。 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成。每个子菜单往往还包含几个子菜单项。通常，只有菜单条显示在窗口中，并且当鼠标指针指向菜单条时，菜单条的子菜单才显示出来。当鼠标指针离开菜单时，子菜单则隐藏起来，回到只显示主菜单条的状态。 根据上述下拉菜单的特点，我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域，用于显示主菜单条，每一个主菜单条作为一个超链接横向置于该区域中，当然除非菜单项没有子菜单，一般情况下这里的超链接不指向任何地址，只用它来激活子菜单。区域的格式见程序1。 CODE: <DIV ID='pad' ……> <A ID='pad1' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad1');" onclick="window.event.returnValue=false;">菜单项一</A> <A ID='pad2' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad2');" onclick="window.event.returnValue=false;">菜单项二</A> …… </DIV> 接着，我们根据主菜单条的个数定义相应的子菜单，为每个子菜单定义一个区域，该区域中第一个元素是一条横线，然后每个子菜单作为一个超链接置于该区域中，由于子菜单纵向排列，每个超链接后加<BR>换行。当然这个区域现在还不能显示出来，但当它被激活时，其显示位置应位于其他对象之上，所以其style属性置为STYLE=' display:none; z-index:9;'。 注意每个超链接的ID均应与其主菜单的ID相同，以便于统一处理。格式见程序2。 CODE: <SPAN ID='idpad1' STYLE='display:none; z-index:9;' onmouseout='hideMenu();'> <HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1> <DIV > <A ID='pad1' HREF='11.htm' onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一一</A><BR> <A ID='pad1' HREF='12.htm' onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一二</A><BR> <HR STYLE='color:white' SIZE=1><!--如有必要可以用横线对子菜单分组--> <A ID='pad1' HREF='13.htm' onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一三</A><BR> …… </DIV> </SPAN> 经过上面的步骤，下拉菜单的格式已经定义好了，下面的任务就是控制这些子菜单的显示和隐藏。 |
评论 (0) 