~~~~如何做多极動態下拉菜單？？？？

flashasp 2002-07-02 02:11:24
主類別A
次類別a(a1,a2.....an)


主類別B
次類別b(b1,b2.....bn)

.......


主類別N
次類別n(n1,n2.....nn)


將上面的形勢做成行若microsoft的多极下拉菜單(但他是靜態的),我要做成動態的.
如果主類別是一個靜態的參數,那么用Layer很好做,but現在主類與次類都是從同一個數据表中獲取的.所以用Laye就沒法作!
大家覺得做成動態的樹型菜單有沒有可能?
還望各位老兄在此提供一個方案,謝謝!

...全文
28 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
llrock 2002-07-02
  • 打赏
  • 举报
 回复
function lib_checkMenu(){//用来检查菜单项的显示和样式
if(this.owner.lastover!=null){
if(this.owner.currentover.levelIndex==this.owner.lastover.levelIndex){
if(this.owner.lastover.subs[0])this.owner.lastover.subs[0].panel.hideIt();
this.owner.lastover.isover=false;
this.owner.lastover.changeStyle();
this.owner.currentover.isover=true;
this.owner.currentover.changeStyle();
}else if(this.owner.currentover.levelIndex<this.owner.lastover.levelIndex){
if(this.owner.lastover.subs[0])this.owner.lastover.subs[0].panel.hideIt();
for(i=0;i<(this.owner.lastover.levelIndex-this.owner.currentover.levelIndex);i++){
this.owner.lastover.panel.hideIt();
this.owner.lastover.isover=false;
this.owner.lastover.changeStyle();
this.owner.lastover=this.owner.lastover.parent;
}
this.owner.lastover.isover=false;
this.owner.lastover.changeStyle();
this.owner.currentover.isover=true;
this.owner.currentover.changeStyle();
}
}
}

//change it's style when mouse over or leave it
function lib_changeStyle(){
if(this.isover){
this.css.backgroundColor=this.overcolor;
//this.css.fontWeight='bold';
this.css.borderRightWidth=0;
}else{
this.css.backgroundColor=this.bgcolor;
// this.css.fontWeight='normal';
if(this.owner.align=='Ver'||(this.owner.align=='Hor'&&this.levelIndex!=0)) this.css.borderRightWidth=1;
}
}

function lib_go(){
if(this.link) location.href=this.link;
else return false;
}

/* menu events*-----*/
function lib_menuMOver(){ //1.change style |2.show submenu
this.owner.currentover=this;
this.isover=true;
this.changeStyle();
this.checkMenu()
if(this.link) window.status=this.link;
else window.status='';
this.showSub()
clearTimeout(this.owner.time);
}
function lib_menuMOut(){//1.hide submenu
this.owner.lastover=this;
this.owner.time=setTimeout(this.owner.name+".hideAllSub()",600)
}

function lib_menuMClick(){
this.go()
}

/*** 类MENU***************************/

function TMenu(name){
this.name=name;
this.topmenu=new Array();
this.items=new Array();//store all menu items order by create line;
this.panel=new Array();
this.stylecode="";
this.htmlcode=""
this.levelcount=0
this.align='Hor' // H:horizontal|| V:vertical

//....................
//define level style,whick include this menuitem;first-line client setting,otherwise use default setting;
//if you wanna define every menuitem please :this.userLevlStyle=new Array();
//if you wanna define every menulevel please :this.userItemStyle=new Array();
//.............................................
this.userLevlStyle=new Array();
this.userItemStyle=new Array();
this.deftStyle=new Array();
//菜单项属性
this.deftStyle.itemheight=25;
this.deftStyle.bgcolor='#ffffff';
this.deftStyle.overcolor='#f7f7f7';
this.deftStyle.fontcolor='#333366';
this.deftStyle.fontsize=15;
this.deftStyle.fontfamily='tahoma, arial,helvetica';
this.deftStyle.border=1;
this.deftStyle.bordercolor='#e1e1e1';
this.deftStyle.borderstyle='dashed';
this.deftStyle.img=0;

//菜单容器属性
this.deftStyle.leftwidth=20;
this.deftStyle.leftcolor='#333366';
this.deftStyle.rightwidth=14;
this.deftStyle.rightcolor='#f7f7f7';
this.deftStyle.topheight=20;
this.deftStyle.bottomheight=20;
this.deftStyle.panelfilter='progid:DXImageTransform.Microsoft.Fade(duration=0.5)';
this.deftStyle.panelwidth=200;
this.deftStyle.align='right';//extend...
this.deftStyle.itemwidth=this.deftStyle.panelwidth-this.deftStyle.leftwidth-this.deftStyle.rightwidth-3*this.deftStyle.border;

this.createItem=lib_createItem;
this.getObj=lib_getObj;
this.makeStyleCode=lib_makeStyleCode;
this.makeBodyCode=lib_makeBodyCode;
this.hideAllSub=lib_hideAllSub;


return this
}
llrock 2002-07-02
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<SCRIPT LANGUAGE="JavaScript">
<!--
function lib_bwcheck(){ //为了提高适用性，必须的除非你打算在一种浏览器中浏览
this.ver=navigator.appVersion;
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.win = (navigator.appVersion.indexOf("Win")>0);
this.xwin = (navigator.appVersion.indexOf("X11")>0);
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.dom)
return this
}
var bw=new lib_bwcheck() //实例化一个browser check对象
/*******************************************************************
更换alert提示方法，美观
*******************************************************************/
function inf(str){

}
/*************************************************************************
lab_ani
**************************************************************************/

var aoa = new Array();
var ANICOUNT = -1;
var ANIMODE = true;

function makeAnimate() {
this.aoa = aoa.length;
aoa[aoa.length] = this;
this.animating = false;
this.StartX = 0;
this.StartY = 0;
this.EndX = 0;
this.EndY = 0;
this.EndY = 0;
this.aniSpeed =18;
this.timeOut = null;
this.aniExe = "";
this.startAni = startAni;
if(this.state && this.state.length) this.ani = checkAni2;
else this.ani = checkAni1;
}

function startAni( endx, endy, aniSpeed) {
if(ANIMODE) {
this.animating = true;
this.StartX = this.x;
this.StartY = this.y;
this.EndX = endx;
this.EndY = endy;
this.aniSpeed = (aniSpeed!=null) ? aniSpeed : this.aniSpeed;
if(this.timeOut != null) {
clearTimeout(this.timeOut);
ANICOUNT--;
}
ANICOUNT++;
this.ani();
}else {
this.EndX = endx;
this.EndY = endy;
this.moveToXY(endx, endy);
}
}


function checkAni1() {
if (this.EndX > this.StartX) {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
if (this.x > this.EndX) this.x = this.EndX;
}else {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
if (this.x < this.EndX) this.x = this.EndX;
}
if (this.EndY > this.StartY) {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
if (this.y > this.EndY) this.y = this.EndY;
}else {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
if (this.y < this.EndY) this.y = this.EndY;
}
this.moveTo(this.x,this.y);
if (this.x != this.EndX || this.y != this.EndY ) {
this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
}else {
clearTimeout(this.timeOut);
this.timeOut = null;
this.animating = false;
ANICOUNT--;
if(this.aniExe){
eval(this.aniExe);
this.aniExe = "";
}
}
}



function checkAni2() {
if (this.EndX > this.StartX) {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
if (this.x > this.EndX) this.x = this.EndX;
}else {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
if (this.x < this.EndX) this.x = this.EndX;
}
if (this.EndY > this.StartY) {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
if (this.y > this.EndY) this.y = this.EndY;
}else {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
if (this.y < this.EndY) this.y = this.EndY;
}


this.state[this.activestate].moveToXY(this.x,this.y);
if (this.x != this.EndX || this.y != this.EndY ) {
this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
}else {
clearTimeout(this.timeOut);
this.timeOut = null;
this.animating = false;
ANICOUNT--;
if(this.aniExe){
eval(this.aniExe);
this.aniExe = "";
}
if(this.state && this.state.length) {
for(var i=0; i<this.state.length; i++) {
if(i!=this.activestate) this.state[i].moveToXY(this.EndX, this.EndY);
}
}
}
}
/*----------------------------------------------------------------------
function of layer
-----------------------------------------------------------------------*/

function lib_moveTo(x,y){
this.x=x;
this.y=y;
this.css.left=x;
this.css.top=y
}

function lib_moveBy(x,y){
this.moveTo(this.x+x,this.y+y)
}

function lib_showIt(){
this.css.visibility="visible";
this.visible=true;
}

function lib_hideIt(){
this.css.visibility="hidden";
this.visible=false;
}

function lib_showSub(){
var x=this.panel.x+this.panel.width;
var y=this.panel.y+this.y;
if(this.owner.align=='Hor'&&this.levelIndex==0){
x=this.panel.x+this.x-this.leftwidth+5;
y=this.panel.y+this.itemheight;
}
try{
this.subs[0].panel.moveTo(x,y);
this.subs[0].panel.doFilter(this.subs[0].panel.filter);//使用滤镜显示子菜单，否则使用下面
// this.subs[0].panel.showIt();
this.visible=true;
}
catch(x){
return
}
}

function lib_hideSub(){
try{
this.subs[0].panel.hideIt();
this.visible=false;
}
catch(x){
return
}
}
function lib_hideAllSub(){

for(i=1;i<this.panel.length;i++){
this.panel[i].hideIt()
}
for(i=0;i<this.items.length;i++){
this.items[i].isover=false;
this.items[i].changeStyle();
}

}
llrock 2002-07-02
  • 打赏
  • 举报
 回复
自己做的，有bug，ie5不能正常工作，是那个关于text的css高的鬼，小心，你可以做横向菜单和纵向菜单，注意不能跨越帧！！！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<SCRIPT LANGUAGE="JavaScript">
<!--
function lib_bwcheck(){ //为了提高适用性，必须的除非你打算在一种浏览器中浏览
this.ver=navigator.appVersion;
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.win = (navigator.appVersion.indexOf("Win")>0);
this.xwin = (navigator.appVersion.indexOf("X11")>0);
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.dom)
return this
}
var bw=new lib_bwcheck() //实例化一个browser check对象
/*******************************************************************
更换alert提示方法，美观
*******************************************************************/
function inf(str){

}
/*************************************************************************
lab_ani
**************************************************************************/

var aoa = new Array();
var ANICOUNT = -1;
var ANIMODE = true;

function makeAnimate() {
this.aoa = aoa.length;
aoa[aoa.length] = this;
this.animating = false;
this.StartX = 0;
this.StartY = 0;
this.EndX = 0;
this.EndY = 0;
this.EndY = 0;
this.aniSpeed =18;
this.timeOut = null;
this.aniExe = "";
this.startAni = startAni;
if(this.state && this.state.length) this.ani = checkAni2;
else this.ani = checkAni1;
}

function startAni( endx, endy, aniSpeed) {
if(ANIMODE) {
this.animating = true;
this.StartX = this.x;
this.StartY = this.y;
this.EndX = endx;
this.EndY = endy;
this.aniSpeed = (aniSpeed!=null) ? aniSpeed : this.aniSpeed;
if(this.timeOut != null) {
clearTimeout(this.timeOut);
ANICOUNT--;
}
ANICOUNT++;
this.ani();
}else {
this.EndX = endx;
this.EndY = endy;
this.moveToXY(endx, endy);
}
}


function checkAni1() {
if (this.EndX > this.StartX) {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
if (this.x > this.EndX) this.x = this.EndX;
}else {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
if (this.x < this.EndX) this.x = this.EndX;
}
if (this.EndY > this.StartY) {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
if (this.y > this.EndY) this.y = this.EndY;
}else {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
if (this.y < this.EndY) this.y = this.EndY;
}
this.moveTo(this.x,this.y);
if (this.x != this.EndX || this.y != this.EndY ) {
this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
}else {
clearTimeout(this.timeOut);
this.timeOut = null;
this.animating = false;
ANICOUNT--;
if(this.aniExe){
eval(this.aniExe);
this.aniExe = "";
}
}
}



function checkAni2() {
if (this.EndX > this.StartX) {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
if (this.x > this.EndX) this.x = this.EndX;
}else {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
if (this.x < this.EndX) this.x = this.EndX;
}
if (this.EndY > this.StartY) {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
if (this.y > this.EndY) this.y = this.EndY;
}else {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
if (this.y < this.EndY) this.y = this.EndY;
}


this.state[this.activestate].moveToXY(this.x,this.y);
if (this.x != this.EndX || this.y != this.EndY ) {
this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
}else {
clearTimeout(this.timeOut);
this.timeOut = null;
this.animating = false;
ANICOUNT--;
if(this.aniExe){
eval(this.aniExe);
this.aniExe = "";
}
if(this.state && this.state.length) {
for(var i=0; i<this.state.length; i++) {
if(i!=this.activestate) this.state[i].moveToXY(this.EndX, this.EndY);
}
}
}
}
/*----------------------------------------------------------------------
function of layer
-----------------------------------------------------------------------*/

function lib_moveTo(x,y){
this.x=x;
this.y=y;
this.css.left=x;
this.css.top=y
}

function lib_moveBy(x,y){
this.moveTo(this.x+x,this.y+y)
}

function lib_showIt(){
this.css.visibility="visible";
this.visible=true;
}

function lib_hideIt(){
this.css.visibility="hidden";
this.visible=false;
}

function lib_showSub(){
var x=this.panel.x+this.panel.width;
var y=this.panel.y+this.y;
if(this.owner.align=='Hor'&&this.levelIndex==0){
x=this.panel.x+this.x-this.leftwidth+5;
y=this.panel.y+this.itemheight;
}
try{
this.subs[0].panel.moveTo(x,y);
this.subs[0].panel.doFilter(this.subs[0].panel.filter);//使用滤镜显示子菜单，否则使用下面
// this.subs[0].panel.showIt();
this.visible=true;
}
catch(x){
return
}
}

function lib_hideSub(){
try{
this.subs[0].panel.hideIt();
this.visible=false;
}
catch(x){
return
}
}
function lib_hideAllSub(){

for(i=1;i<this.panel.length;i++){
this.panel[i].hideIt()
}
for(i=0;i<this.items.length;i++){
this.items[i].isover=false;
this.items[i].changeStyle();
}

}
CSS制作多极下拉菜单
http://www.w3.org/1999/xhtml"> 蓝色二级下拉导航菜单
多级联动下拉列表
第一次写博客,记录自己学习~ 在项目中用到多级联动功能,为了相对灵活运用在网上也找了很多了例子,下面就是一个相当好用的多联动分级 //HTML部分 选择类型 //第一个下拉框根据后台循环出来 (document).ready(function(){&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;...
element UI对el-dropdown的二次封装（三级下拉框）
<template> <el-dropdown trigger="click" :hide-on-click="true"> <el-button> <svg-icon :icon-class="iconClass" class-name="icon-svg" /> <span>{{ text }}</span> <i class="el-
AutoCAD Electrical 2013电气设计实战学习笔记
AutoCAD Electrical 2013 是 Autodesk 针对电气控制系统设计推出的专用 CAD 软件，广泛应用于工业自动化、电气工程及设备制造领域。相较于通用 AutoCAD，它集成了丰富的电气符号库、自动化绘图功能与项目管理工具，显著提升了电气图纸的设计效率与规范性。本章将从电气设计流程的视角出发，介绍 AutoCAD Electrical 2013 的核心模块，包括图纸管理、符号插入、连接线布线与电气检查等关键功能。
(转)什么是Java里的OO思想？
OO就是面向对象 面向对象(Object Oriented,OO)是当前计算机界关心的重点，它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发，扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。 谈到面向对象，这方面的文章非常多。但是，明确地给出对象的定义或说明对象的定义的非常少——至...
JavaScript

87,996

社区成员

224,693

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章