`
jjklmm
  • 浏览: 57499 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 生成下拉菜单

阅读更多

效果展示页面:http://www.miiceic.org.cn/dingzhi/

 

源代码如下:(直接复制,保存html文件,即可查看效果)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>企业内训</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="企业培训,企业内训,android培训,软考培训,it企业培训">
  <META NAME="Description" CONTENT="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌.">
 </HEAD>
 <script src="http://www.miiceic.org.cn/templets/js/popupmenu.js"></script>
 <style type="text/css">
 .popupMenu{width:6em;BORDER-RIGHT: #3366CC 1px solid; BORDER-TOP: #A2BAE7 1px solid; BORDER-LEFT: #A2BAE7 1px solid; BORDER-BOTTOM: #3366CC 1px solid; BACKGROUND-COLOR:#ffffff;line-height:180%;font-size:75%; position:absolute; z-index:100}
 </style>
 <script>
function onLoadHandler() {

var menuMoreDesc = new Object();
menuMoreDesc.menuDiv = document.getElementById("menuMore");
menuMoreDesc.menuLink = document.getElementById("menuMoreLink");
menuMoreDesc.display = false;
menuMoreDesc.clickHandler = function(item) {
    if(typeof(item.product) != "undefined") {
        var url = getSearchUrl("query", item.product, "music.index");
    } else {
        var url = item.link;
    }
    window.open(url, "_parent");
};
menuMoreDesc.items = [{"link":"http://www.miiceic.org.cn", "text":"安博中程"}, {"link":"http://www.miiceic.org.cn", "text":"中程在线"}, {"link":"http://www.miiceic.org.cn","text":"企业培训"}, {"link":"http://www.amboedu.com", "text":"职业教育"}, {"link":"http://www.miiceic.org.cn", "text":"全部产品"}];
popupMenu.createMenu(menuMoreDesc);

}
</SCRIPT>
 <BODY onLoad="onLoadHandler()">

<div id="menuMore" class="popupMenu" style="display:none"></div>

	<TABLE class=linkarea cellSpacing=0 cellPadding=0>
	<TBODY><TR><TD align=left><DIV class=listlink><nobr>
<span class="setlink"><a onclick='return seturl(this, "query", "www", "music.index");' href="http://www.miiceic.org.cn/">安博中程</a></span>
<span class="setlink"><a onclick='return seturl(this, "query", "image", "music.index");' href="http://www.miiceic.org.cn/">中程在线</a></span>
<span class="setlink"><a onclick='return seturl(this, "query", "news", "music.index");' href="http://www.miiceic.org.cn/">企业培训</a></span>
<span class="setlink"><a onclick='return seturl(this, "query", "blog", "music.index");' href="http://www.amboedu.com/">职业教育</a></span>
<span class="setlink"><a onclick='return seturl(this, "query", "dict", "music.index");' href="http://www.miiceic.org.cn/amt2011/">技术峰会</a></span>
 <span class="setlink"><a onclick='return seturl(this, "query", "dict", "music.index");' href="http://www.miiceic.org.cn/discount/">优惠季</a></span>
<span class="setlink"><a href="http://www.miiceic.org.cn/discount/" class="noline" id="menuMoreLink"><u>更多</u><small>▼</small></a></span>
	</DIV></TD></TR></TBODY>
	  </TABLE>

 </BODY>
</HTML>

 

效果展示页面:http://www.miiceic.org.cn/dingzhi/

 

效果小图:

  • 大小: 8.4 KB
0
0
分享到:
评论

相关推荐

    JS生成下拉菜单

    总的来说,使用JavaScript生成下拉菜单涉及HTML结构的构建、CSS样式的设置以及JS事件处理的编写。通过熟练掌握这些基础知识,你可以创建出符合用户需求、具有丰富交互功能的下拉菜单。在实际项目中,还可以结合现代...

    javascript四级级联下拉菜单

    JavaScript四级级联下拉菜单是一种常见的网页交互设计,它允许用户在多个下拉菜单中进行选择,逐级筛选出最终的选项。这种设计通常用于表示层次结构的数据,如国家、省份、城市和区域等地理信息,也可以应用于其他...

    Javascript实现的日期下拉菜单

    当我们谈论“Javascript实现的日期下拉菜单”时,我们通常是指利用JavaScript来创建一个用户可以选择特定日期的界面元素,这种交互方式常见于表单提交或者事件预订等场景。下面将详细介绍如何使用JavaScript来实现...

    项目当中用到的动态生成下拉菜单

    在网页开发中,动态生成下拉菜单是一种常见的交互设计,特别是在数据量大或者需要根据其他因素动态更新选项的场景中。本项目中的问题主要聚焦在使用jQuery实现动态下拉菜单时遇到的问题,尤其是在Firefox浏览器中...

    javascript下拉菜单2

    JavaScript下拉菜单是一种常见的网页交互元素,用于在有限的空间内展示更多的导航选项。在这个名为"javascript下拉菜单2"的资源中,包含了实现这一功能的关键文件:`menu.css`、`menu.js`和`test6.jsp`。接下来,...

    JavaScript下拉菜单自动生成器.zip

    一个采用JavaScript编写的下拉菜单自动生成器,你可自定义每个下拉菜单项的内容,用此工具可快速生成下拉菜单代码,你复制这些代码到你的网页中,就可实现一款漂亮的下拉菜单,如果不满意,你可在此基础上再此扩展。

    html总结 javascript 下拉菜单 个人博客入门学习

    例如,我们可以用JavaScript来实现下拉菜单的动画效果或自定义样式。 在这个案例中,我们看到了"jquery.min.js",这是jQuery库的压缩文件。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画等功能...

    JS实现下拉菜单

    在本教程中,我们将探讨如何使用JavaScript来实现一个自定义的下拉菜单。JavaScript作为一种强大的客户端脚本语言,可以提供动态交互效果,使用户界面更加生动有趣。 首先,我们需要创建HTML结构来表示下拉菜单。...

    javascript经典特效---下拉菜单自动生成.rar

    本资源“javascript经典特效---下拉菜单自动生成.rar”聚焦于如何使用JavaScript编程来实现动态、交互式的下拉菜单。下面我们将深入探讨这个话题。 首先,下拉菜单的基础构造通常由HTML的`&lt;select&gt;`元素构成,但...

    用JSP+JavaScript打造二级级联下拉菜单

    本文将深入解析如何利用JSP与JavaScript实现一个功能丰富的二级级联下拉菜单,这是一个在电商、新闻门户等网站上广泛使用的功能,用于分类展示商品或文章。 ### 一、JSP与JavaScript简介 - **JSP**:是一种基于...

    JS 无限下拉菜单(JS 无限下拉菜单)

    JavaScript(简称JS)无限下拉菜单是一种常见的网页交互设计,用于提供层次化的导航结构,尤其在网站或应用程序中,当菜单项数量庞大时,能够帮助用户更高效地浏览和访问内容。这种菜单允许用户在不关闭当前菜单的...

    javascript地名联动下拉菜单

    JavaScript的主要任务是监听第一个下拉菜单(通常是省份)的变化事件,当用户选择一个新的省份时,根据选择的值动态生成或更新第二个下拉菜单(城市)的内容。同样,当城市被选中时,更新第三个下拉菜单(区县)的...

    javascript下拉菜单

    5. 数据结构和逻辑:如果下拉菜单包含多级子菜单,可能需要设计数据结构(如数组或对象)来存储菜单项,并编写递归或循环逻辑来生成菜单结构。 6. ARIA(无障碍富互联网应用):为了提高下拉菜单的可访问性,应遵循...

    jQuery下拉菜单分类搜索框代码_drop_jQuery下拉菜单分类搜索框代码_

    jQuery会根据这些数据动态生成下拉菜单的选项。 6. **事件监听器**: 使用jQuery的`on()`函数来监听用户的点击、输入等事件,比如监听下拉菜单的`click`事件和搜索框的`input`事件。 7. **动态内容更新**: 当用户...

    asp 二级下拉菜单 二级菜单

    综上所述,"asp 二级下拉菜单 二级菜单"涉及了ASP动态生成HTML、JavaScript交互和CSS样式设计等多个方面,目的是为用户提供清晰且易用的多级导航体验。通过合理的设计和编程,可以构建出高效且功能强大的二级下拉...

    无限级下拉菜单(ASPAJAXJS)

    2. 动态加载:利用AJAX实现菜单的动态加载,当用户展开一个菜单项时,发送请求获取其子菜单数据,然后在客户端用JavaScript生成HTML并插入到页面中。 3. 交互事件:使用JavaScript监听用户操作,如点击、鼠标悬停等...

    js下拉菜单生成器dropMenu使用方法详解

    我们今天要详细解析的是一个名为dropMenu的JavaScript下拉菜单生成器,它为开发者提供了一种快速创建和定制下拉菜单的方法。本篇文章将详细阐述dropMenu的使用方法,并结合实例向大家展示如何在网页中实现具有搜索...

    javascript经典特效---下拉菜单二次选择.rar

    在JavaScript编程领域中,下拉菜单的二次选择是一种常见的交互设计,它允许用户在第一个下拉菜单中选择一个选项后,触发第二个下拉菜单显示与所选选项相关的子选项。这种设计大大提升了用户体验,因为它减少了用户在...

    ASP 简单实现日期下拉菜单

    总结来说,这个ASP实现的日期下拉菜单利用JavaScript动态生成并更新选项,提供了一种交互式的日期选择方式。通过结合服务器端的ASP技术和客户端的JavaScript,我们可以创建一个既高效又用户友好的日期输入组件。这样...

Global site tag (gtag.js) - Google Analytics