javascript实例教程(3) 创建折叠式导航菜单
为了创建折叠式的导航菜单，你可以在网页的最前面部分以下代码：
<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>
分享到：
相关推荐
#### 创建折叠式导航菜单 另一个实用的JavaScript应用是创建动态的导航菜单，特别是折叠式的菜单，这在网页设计中非常流行，因为它能节省空间并提供更好的用户体验。在提供的代码片段中，展示了如何使用JavaScript...
2. **导航菜单**：创建响应式的导航菜单，支持点击展开和折叠子菜单，利用事件委托实现高效的操作。 3. **滑动面板**：实现可滑动的侧边栏或内容面板，增强用户体验，如使用 `.slideToggle()` 方法。 4. **轮播图*...
`fonts`目录可能包含Bootstrap所用到的Web字体，如Glyphicons图标集，这些图标常被用作导航菜单中的指示符号。 `dist`目录通常包含Bootstrap框架的编译和压缩版本，方便在生产环境中使用。这可能包括了压缩后的CSS...
1. **滑动菜单**：通过JavaScript可以创建响应式导航菜单，实现下拉、折叠和滑动效果。 2. **轮播图**：自动切换图片或内容的展示，通常伴有左右箭头控制和指示点。 3. **淡入淡出效果**：用于图片切换或内容显示，...
3. **导航菜单**：JavaScript可以实现下拉菜单、折叠菜单等，提高用户导航的便利性。 4. **图像处理**：包括图像的加载、切换、缩放、拖放等功能，增强了网页的多媒体体验。 5. **时间与日期**：JavaScript可以...
"jQuery 动画垂直折叠导航效果"就是这样的一个技术实践，通过巧妙运用jQuery库，我们可以实现优雅的、响应式的导航菜单动画。 jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。...
"竖导航特效实现"是指在网页设计中采用垂直布局的导航菜单，并通过CSS3和JavaScript等技术添加动态效果，以提升用户体验和视觉吸引力。这种特效通常包括下拉菜单、悬停效果、平滑滚动等。 1. **CSS3基础**： - **...
jQuery可以轻松实现动态导航菜单，如响应式下拉菜单。通过监听用户交互，我们可以使用`.click()`方法来显示或隐藏子菜单，同时使用`.hover()`方法实现悬停效果。 3. **轮换与广告切换** 要创建轮播或广告切换效果...
- 导航菜单：CSS和JavaScript可以联合打造动态的导航菜单，如下拉菜单、折叠菜单、悬浮菜单等，增强导航功能。 - 轮播图：结合CSS动画和JavaScript控制，实现图片轮播，支持自动播放、箭头切换、指示器等功能。 -...
"71、jQ响应式多级菜单"这个项目可能是一个教程或者实例，专注于如何利用jQuery创建一个适应不同屏幕尺寸且具有多级结构的导航菜单。 首先，响应式设计是现代网页开发的关键要素，它使得网站能够在各种设备上（如...
在移动设备上，一个良好的响应式导航菜单能有效节省屏幕空间，提供清晰的导航结构。这个菜单利用了媒体查询（Media Queries）和百分比布局等技术，确保在不同设备上都能呈现恰当的布局。 接下来，我们要关注的是...
总的来说，Bootstrap 3 视频教程应用实例将引导你从基础到进阶，全面掌握Bootstrap 3的使用技巧，让你在构建现代、响应式的Web应用时更加得心应手。通过学习和实践，你不仅可以提升网页设计能力，还能提升项目的质量...
例如，导航菜单在手机和平板上的折叠和展开，图片的自适应大小等。 7. **前端框架**：虽然标题未提及，但现代JavaScript特效往往与React、Vue或Angular等前端框架结合，这些框架提供了更高效、更易于维护的解决方案...
<li><a href="#">菜单3</a></li> ``` CSS（级联样式表）则用于美化这些菜单，包括颜色、字体、布局等。例如，我们可以用CSS将菜单项设置为水平排列： ```css .menu { list-style-type: none; margin: 0; ...
本教程将深入讲解如何利用jQuery与Bootstrap来创建一个手风琴折叠菜单，提供一个既美观又功能丰富的导航结构。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的编程，提供了丰富的API，让开发者能够...
本教程将通过10个CSS导航条实例，帮助你掌握创建吸引人且功能强大的导航条的技巧。这些实例主要关注样式和交互效果的实现，旨在提升用户体验。 1. **静态水平导航条**： 创建一个基本的水平导航条，通常包括链接...
对于动态交互，JavaScript或jQuery可以实现菜单的展开与折叠效果，以及悬停高亮等交互功能。 对于初学者，学习HTML和CSS的基础知识是必要的。可以从理解元素结构、选择器、盒模型等基本概念开始。接着，可以参考...
6. **JavaScript交互**: 虽然主要标签是CSS和div，但源码可能也包含了JavaScript代码，用于实现动态效果和用户交互，比如导航菜单的展开折叠、图片轮播等。 7. **Web标准和最佳实践**: 学习这些源码时，可以观察...
Bootstrap等前端框架提供了一套预定义的样式，可以快速搭建响应式导航菜单。 6. Visual Studio集成：作为.NET开发的主要IDE，Visual Studio提供了强大的开发工具，包括代码编辑、调试、项目管理等。开发者可以在...
在实际应用中，我们将结合Spry构件和DIV布局，创建一个包含Spry菜单栏、折叠式面板和表单验证的综合实例。在表单部分，我们将使用Spry验证表单功能，它可以轻松实现对用户输入的数据进行有效性检查，如邮箱格式、...