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

Javascript
鼠标移动到一张图片时变为另一张图片
JS画图(非VML)--兼容IE/FF
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
jQuery的一些注意
找到一点可怜的关于dojo资料,谢谢作者!
JS获取IUSR_机器名和IWAM_机器名帐号的密码
用js计算页面执行时间的函数
JS的IE和Firefox兼容性集锦
标准布局应用:对联与旗帜
XHTML-Strict 内允许出现的标签
自动生成文章摘要[JavaScript 版本]
飞鱼(shqlsl) javascript作品集
prototype 1.5相关知识及他人笔记
XP折叠菜单&仿QQ2006菜单
用Javascript轻松制作一套简单的抽奖系统
使用脚本控制网页Table的显示隐藏(全代码)_AX
Javascript代码混淆综合解决方案-Javascript在线混淆器
用 JavaScript 迁移目录
用简单的脚本实现一款漂亮的下拉菜单
建立完全独立的JS对象

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 198 ::
收藏到网摘: 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>




效果实现: