当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript实例教程(3) 创建折叠式导航菜单

Javascript
非常厉害的javascript 实现指针式时间
文档处理系列——随时更新
用javascript实现文本框和"选择"按扭之间的间距
使用户点击后退按钮使效三行代码
Javascript 个人笔记(没有整理,很乱)
建议大家看下JavaScript重要知识更新
javascript实现操作cookie实现的可记忆菜单
javascript下for循环用法小结
一个快速添加标签的小玩意,但在FF下不能用,望高手指点
HTML中事件触发列表与解说
极品源码:自动完成 仿163篇
doctype后如何获得body.clientHeight的方法
用javascript调出windows色版的代码
js实现的网页颜色代码表全集
javascript实现爱你在FF IE下都有效的添加一个项目
js实现用滚动条来放大缩小图片的代码
javascript实现unicode和字符的互相转换
符合W3C网页标准的iframe标签的使用方法
firefox下javascript实现高亮关键词的方法
用javascript实现读取txt文档的脚本

Javascript实例教程(3) 创建折叠式导航菜单


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 388 ::
收藏到网摘: n/a

利用Javascript创建折叠式的导航菜单



为了创建折叠式的导航菜单,你可以在网页的最前面部分以下代码:


<SCRIPT LANGUAGE="JavaScript">


<!-- Begin


function formHandler()


{


var URL = document.form.site.options


[document.form.site.selectedIndex].value;


window.location.href = URL;


// End -->


}


</SCRIPT>




那在网页上如何调用呢?以下是具体代码:


<CENTER>


<FORM name = "form">


<SELECT NAME="site" SIZE=1 onChange ="formHandler()">


<OPTION VALUE="">连接到….


<OPTION VALUE="http://www.pconline.com.cn">太平洋电脑网


<OPTION VALUE="http://cn.yahoo.com">中文雅虎


<OPTION VALUE="http://www.263.net">263网站


<OPTION VALUE="http://www.usnews.com">美国在线


<OPTION VALUE="http://www.neworiental.org">北京新东方


</SELECT>


</FORM>


</CENTER>




下面是全部的代码:

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin


function formHandler()


{


var URL = document.form.site.options


[document.form.site.selectedIndex].value;


window.location.href = URL;


// End -->


}


</SCRIPT>

</head>




<FORM name = "form">


<SELECT NAME="site" SIZE=1 onChange ="formHandler()">

<option value="">连接到…. </option>

<option value="http://www.pcedu.com.cn">太平洋网络学院</option>

<option value="http://cn.yahoo.com">中文雅虎 </option>

<option value="http://www.263.net">263网站 </option>

<option value="http://www.usnews.com">美国在线 </option>

<option value="http://www.neworiental.org">北京新东方 </option>

</SELECT>


</FORM>




效果实现: