[color=blue][/color][size=xx-small][/size][align=left][/align]
页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>MenuBar</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/css" href="all.css">
<script type="text/javascript" src="menu.js"></script>
<script>
function loadNavMenu(){
var tdmenubar = new TdMenuBar({renderTo:"navDiv",menus:[{text:'文件',menus:[{text:'新建'},{text:'打开'}]}]});
}
</script>
</head>
<body onload="loadNavMenu()">
<div id="navDiv" style="border: 2px inset;"></div>
</body>
</html>
JavaScript代码:
/*
* 自定义导航菜单
* 2009-4-18
*/
function TdMenuBar(config){
this.initial(config);
this.container;
this.rootUL;
}
/*
* 初始化
*/
TdMenuBar.prototype.initial = function(config){
for(var p in config){
this[p] = config[p];
}
this.container = document.getElementById(this.renderTo);
this.render();
}
/*
*
*/
TdMenuBar.prototype.render = function(){
this.container.innerHTML = "<ul class='menu'></ul>";
this.rootUL = this.container.getElementsByTagName("ul")[0];
if(this.menus && this.menus.length > 0){
var html = "";
for(var i=0; i<this.menus.length; i++ ){
html+="<li>";
html += "<a href='#'>"+this.menus[i].text+"</a>";
html += this.renderSub(this.menus[i]);
html += "</li>";
}
this.rootUL.innerHTML = html;
var menuItemLi = this.rootUL.getElementsByTagName("li");
/* 绑定事件 */
for (var i=0; i<menuItemLi.length; i++) {
menuItemLi[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
menuItemLi[i].onmousedown=function() {
alert(event.srcElement.tagName);
}
menuItemLi[i].onmouseup=function() {
}
menuItemLi[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
}
/*
*
*/
TdMenuBar.prototype.renderSub = function(menuItem){
var html = "";
if(menuItem.menus && menuItem.menus.length > 0) {
html += "<ul>";
for(var i =0 ; i < menuItem.menus.length; i++) {
html += "<li>";
html += "<a href='#'>"+menuItem.menus[i].text+"</a>";
html += "</li>";
}
html += "</ul>";
}
return html;
}
CSS样式定义:
ul.menu {
line-height: 20px;
list-style-type: none;
font-size:12px;
}
ul.menu a {
display: block;
width: 80px;
text-align:center;
}
ul.menu a:link {
text-decoration:none;
}
ul.menu a:visited {
text-decoration:none;
}
ul.menu a:hover {
text-decoration:none;
font-weight:bold;
}
ul.menu li {
float: left;
width: 80px;
}
ul.menu li a:hover{
background:#999;
}
ul.menu li ul {
line-height: 22px;
list-style-type: none;
text-align:left;
left: -999px;
width: 200px;
position: absolute;
}
ul.menu li:hover ul {
left: auto;
}
ul.menu li.sfhover ul {
left: auto;
}
ul.menu li ul li{
float: left;
}
ul.menu li ul a{
display: block;
width: 150px;
text-align:left;
padding-left:24px;
background:#999;
}
ul.menu li ul a:link {
color:#666;
text-decoration:none;
}
ul.menu li ul a:visited {
color:#666;
text-decoration:none;
}
ul.menu li ul a:hover {
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#C00;
}
分享到：
相关推荐
本文将深入探讨如何使用JavaScript（js）制作导航菜单，包括顶部导航菜单和侧面导航菜单。这两种菜单在现代网页设计中非常常见，它们为用户提供了一种直观、易用的交互方式。 1. **JavaScript基础** 在开始制作...
在IT领域，尤其是在Web开发中，创建一个动态的左侧导航菜单是常见的需求。这个主题主要涉及到C#编程语言，特别是其在构建用户界面和数据交互方面的应用。C#左侧导航菜单的设计通常是为了提供用户友好的体验，使得...
为了确保代码的组织性和可维护性，通常会采用模块化或组件化的开发方式，将导航菜单作为一个独立的模块进行封装。 总结来说，"比较好看的导航菜单（ASP.NET)"项目结合了ASP.NET的Menu控件和jQuery的交互功能，通过...
在JavaScript实现的类似淘宝网顶部导航菜单的项目中，我们主要关注的是前端开发技术，特别是JavaScript作为主要的脚本语言，以及ECMAScript规范对它的影响。这个demo旨在模拟淘宝网的用户界面，提供购物车、收藏夹、...
同时，为了增加可维护性和扩展性，可以将JavaScript代码封装成模块或使用现有的库，如jQuery或Vue.js。 总之，JavaScript实现的三级横向导航菜单是前端开发中的常见需求，它涉及HTML结构、CSS样式以及JavaScript...
这个项目“JS仿淘宝网顶部的导航菜单-导航菜单类”就是这样一个实例，它旨在实现与淘宝网站相似的顶部导航菜单效果，提供良好的用户体验。这篇博客文章（链接：https://ceoajun.iteye.com/blog/1541465）详细介绍了...
"CSS+js无限级折叠导航菜单"就是一个专为实现这种功能而设计的技术方案。这个方案结合了CSS（层叠样式表）和JavaScript的力量，创建了一个可以无限层级扩展的折叠式导航菜单，既美观又实用。 首先，CSS在其中起着...
在"js鼠标滚动自动隐藏导航菜单"的设计中，主要涉及以下JavaScript知识点： 1. **DOM操作**：DOM（Document Object Model）是HTML和XML文档的结构化表示，JavaScript通过DOM可以访问和修改页面元素。在这个例子中，...
在前端开发领域，Vue.js是一个非常流行的JavaScript框架，它以其易用性、高效性和灵活性而备受推崇。Vue CLI 3是Vue生态系统中的一个命令行工具，用于快速搭建项目结构，帮助开发者实现自动化构建流程。本教程将深入...
在这个"JS默认缩放点击显示6边型导航菜单图片代码下载"资源中，我们主要关注的是利用JavaScript来实现一个独特的导航菜单，该菜单在用户点击时能够以六边形的形式展示。这个效果不仅视觉上引人注目，而且可以增加...
总的来说，"JS默认缩放点击显示6边型导航菜单图片代码"融合了JavaScript事件处理、CSS形状设计、图片动画效果和性能优化等多个知识点。通过学习和理解这个代码，开发者不仅可以掌握这些技术，还能提升自己的前端开发...
这样的功能在很多场景下都非常实用，例如组织结构展示、文件目录浏览、导航菜单等。 在实现3级树功能时，我们需要考虑以下几个核心知识点： 1. **数据结构**：首先，我们需要一个合适的数据结构来存储树形结构。...
7. **插件化开发**：jQuery社区提供了许多现成的导航菜单插件，如`metisMenu`、`navgoco`等，它们封装了上述功能，使得开发者可以快速集成和自定义导航菜单。 通过理解并掌握这些知识点，你可以创建出类似京东风格...
"js原生态插件 模仿flash鼠标经过动态悬停效果导航菜单代码.zip" 这个标题表明我们关注的是一个基于JavaScript的原生插件，它的主要功能是模仿Flash中的动态悬停效果，应用于网页的导航菜单。在Flash逐渐被淘汰的...
在JavaScript编程领域，创建动态和交互式的网页元素是常见的需求之一，其中导航菜单是一个至关重要的组成部分。本项目“JavaScript---仿chinaz站长站首页的导航菜单”旨在利用JavaScript技术实现与知名网站ChinaZ...
【标题】"JS实现天猫弹性导航菜单栏代码.zip"是一个包含JavaScript实现的天猫风格的弹性导航菜单栏的项目。这个项目旨在帮助开发者了解如何利用JavaScript技术来创建具有动态效果和响应式设计的导航菜单，类似于天猫...
这个名为"仿支付宝导航菜单代码"的项目提供了一种实现这一目标的方法，主要使用JavaScript语言来创建动态且交互性强的菜单。接下来，我们将深入探讨这个项目中涉及的JavaScript技术和导航菜单设计的关键点。 首先，...
例如，可能采用了ES6的类（class）或函数组件（function component）来封装导航菜单的功能，并通过props传递参数，以便在不同场景下灵活配置和使用。 总的来说，"漂亮的可以自动显示_隐藏的导航菜单.rar"这个资源...
本文将详细讨论如何实现“仿QQ菜单导航效果，左边导航菜单”这一功能，以及其在实际应用中的重要性。 首先，QQ菜单导航效果是借鉴了QQ应用程序的用户界面设计，这种设计通常包括左侧的导航栏，用于展示各种功能模块...