订阅本栏目 RSS您所在的位置: 深山工作室 > HTML > 正文

几种javascript导航菜单

深山行者个人网站 2007/11/25 22:01:58 深山行者 字体: 浏览 9695

 

 

几种javascript导航菜单

以下是引用片段:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ĵ</title>
<style>
body {
  margin: 7px;
  font:12px Verdana, Arial, Helvetica, sans-serif;
}
* {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: thin none;
}
#nav {
  position: absolute;
  font-size: 9px;
  opacity: 0.8;
}
#nav a {
  display: block;
  width: 100px;
  height: 15px;
  padding: 3px 5px 12px;
  background: #666;
  color: #fff;
  text-decoration: none;
}
#nav a:hover {
  background: #333;
}
#nav li {
  width: 120px;
  height:30px;
  overflow:hidden;
  background: #ccc;
  padding-bottom: 3px;
}
#nav ul {
  position: absolute;
  margin-left: 110px;
  margin-top: -30px;
}
html>body #nav ul {
  margin-left: 119px;
  margin-top: -39px;
}
#nav ul {
  display: none;
}
#nav li.show ul {
  display: block;
}
#nav li.show li ul {
  display: none;
}
#nav li li.show ul {
  display: block;
}
</style>
<script language="javascript" type="text/javascript">
function menuFix() {
  var sfEls = document.getElementById("nav").getElementsByTagName("li");
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
      this.className+=(this.className.length>0? " ": "") + "show";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
    }
  }
}
window.onload=menuFix;
</script>
</head>

<body>
<ul id="nav">
  <li><a href="#">nav item</a>.
    <ul>
      <li><a href="#">nav item</a>.
        <ul>
          <li><a href="#">nav item</a>.</li>
          <li><a href="#">nav item</a>.</li>
        </ul>
      </li>
      <li><a href="#">nav item</a>.
        <ul>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
        </ul>
      </li>
      <li><a href="#">nav item</a>.
        <ul>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
        </ul>
      </li>
      <li><a href="#">nav item</a>.
        <ul>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">nav item</a>.
    <ul>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
    </ul>
  </li>
  <li><a href="#">nav item</a>.
    <ul>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

 

 

 

以下是引用片段:

<script language=javascript>

var mmenus    = new Array();
var misShow   = new Boolean();
misShow=false;
var misdown   = new Boolean();
misdown=false;
var mnumberofsub=0;
var musestatus=false;
var mpopTimer = 0;
mmenucolor='Menu';
mfontcolor='MenuText';
mmenuoutcolor='#B5BED6';
mmenuincolor='#B5BED6';
mmenuoutbordercolor='#000000';
mmenuinbordercolor='#000000';
mmidoutcolor='#8D8A85';
mmidincolor='#8D8A85';
mmenuovercolor='MenuText';
mitemedge='1';
msubedge='0';
mmenuunitwidth=100;
mmenuitemwidth=110;
mmenuheight=25;
mmenuwidth='100%';
mmenuadjust=0;
mmenuadjustV=0;
mfonts='font-family: 宋体; font-size: 9pt; color: MenuText; ';mcursor='default';


function stoperror(){
return true;
}

window.onerror=stoperror;

function mpopOut() {
   mpopTimer = setTimeout('mallhide()', 500);
}

function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
  if (eval("temp." + type) == value) {
   el = temp;
   return el;
  }
  temp = temp.parentElement;
 }
 return el;
}


function mMenuRegister(menu)
{
  mmenus[mmenus.length] = menu
  return (mmenus.length - 1)
}

function mMenuItem(caption,command,target,isline,statustxt,level,img,sizex,sizey,pos){
 this.items = new Array();
 this.caption=caption;
 this.command=command;
 this.target=target;
 this.isline=isline;
 this.statustxt=statustxt;
 if(level!=null){mnumberofsub++;
 this.hasc=mnumberofsub;}
 this.level=level;
 this.img=img;
 this.sizex=sizex;
 this.sizey=sizey;
 this.pos=pos;
}

function mMenu(caption,command,target,img,sizex,sizey,pos){
 this.items = new Array();
 this.caption=caption;
 this.command=command;
 this.target=target;
 this.img=img;
 this.sizex=sizex;
 this.sizey=sizey;
 this.pos=pos;
 this.id=mMenuRegister(this);
}
function mMenuAddItem(item)
{
  this.items[this.items.length] = item
  item.parent = this.id;
  this.children=true;
}

mMenu.prototype.addItem = mMenuAddItem;
mMenuItem.prototype.addsubItem = mMenuAddItem;

function mtoout(src){

src.style.borderLeftColor=mmenuoutbordercolor;
src.style.borderRightColor=mmenuinbordercolor;
src.style.borderTopColor=mmenuoutbordercolor;
src.style.borderBottomColor=mmenuinbordercolor;
src.style.backgroundColor=mmenuoutcolor;
src.style.color=mmenuovercolor;
}
function mtoin(src){

src.style.borderLeftColor=mmenuinbordercolor;
src.style.borderRightColor=mmenuoutbordercolor;
src.style.borderTopColor=mmenuinbordercolor;
src.style.borderBottomColor=mmenuoutbordercolor;
src.style.backgroundColor=mmenuincolor;
src.style.color=mmenuovercolor;
}
function mnochange(src){
src.style.borderLeftColor=mmenucolor;
src.style.borderRightColor=mmenucolor;
src.style.borderTopColor=mmenucolor;
src.style.borderBottomColor=mmenucolor;
src.style.backgroundColor='';
src.style.color=mfontcolor;

}
function mallhide(){
 for(var nummenu=0;nummenu<mmenus.length;nummenu++){
  var themenu=document.all['mMenu'+nummenu]
  var themenudiv=document.all['mmenudiv'+nummenu]
                mnochange(themenu);
                mmenuhide(themenudiv);
                }
        for(nummenu=1;nummenu<=mnumberofsub;nummenu++){ 
         var thesub=document.all['msubmenudiv'+nummenu]     
         msubmenuhide(thesub);
         mnochange(document.all['mp'+nummenu]);
         document.all["mitem"+nummenu].style.color=mfontcolor;
         }
}
function mmenuhide(menuid){

menuid.style.visibility='hidden';
misShow=false;
}
function msubmenuhide(menuid){

menuid.style.visibility='hidden';
}
function mmenushow(menuid,pid){

menuid.style.left=mposflag.offsetLeft+pid.offsetLeft+mmenuadjust;menuid.style.top=mposflag.offsetTop+mmenutable.offsetHeight+mmenuadjustV;
if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth+document.body.scrollLeft)
menuid.style.left=document.body.clientWidth+document.body.scrollLeft-mmenuitemwidth;
menuid.style.visibility='visible';
misShow=true;
}
function mshowsubmenu(menuid,pid,rid){

menuid.style.left=pid.offsetWidth+rid.offsetLeft;
menuid.style.top=pid.offsetTop+rid.offsetTop-3;
if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth+document.body.scrollLeft)
menuid.style.left=document.body.clientWidth+document.body.scrollLeft-mmenuitemwidth;
menuid.style.visibility='visible';
}
function mmenu_over(menuid,x){
toel = getReal(window.event.toElement, "className", "coolButton");
fromel = getReal(window.event.fromElement, "className", "coolButton");
if (toel == fromel) return;
if(x==5){
  misShow = false;
  mallhide();
  mtoout(eval("mMenu"+x));
}else{
if(!misShow){mtoout(eval("mMenu"+x));}else{
  mallhide();
  mtoin(eval("mMenu"+x));
  mmenushow(menuid,eval("mMenu"+x));
}
}
clearTimeout(mpopTimer);
}
function mmenu_out(x){
toel = getReal(window.event.toElement, "className", "coolButton");
fromel = getReal(window.event.fromElement, "className", "coolButton");
if (toel == fromel) return;
if (misShow){
mtoin(eval("mMenu"+x));
}else{
mnochange(eval("mMenu"+x));
}
mpopOut()
}
function mmenu_down(menuid,x){
  if(misShow){
  mmenuhide(menuid);
  mtoout(eval("mMenu"+x));
  }
  else{
  mtoin(eval("mMenu"+x));
  mmenushow(menuid,eval("mMenu"+x));
  misdown=true;
  }
}
function mmenu_up(){
  misdown=false;
}
function mmenuitem_over(menuid,item,x,j,i){
toel = getReal(window.event.toElement, "className", "coolButton");
fromel = getReal(window.event.fromElement, "className", "coolButton");
if (toel == fromel) return;
srcel = getReal(window.event.srcElement, "className", "coolButton");
        for(nummenu=1;nummenu<=mnumberofsub;nummenu++){ 
         var thesub=document.all['msubmenudiv'+nummenu]
         if(!(menuid==thesub||menuid.style.tag>=thesub.style.tag)){
         msubmenuhide(thesub);
         mnochange(document.all['mp'+nummenu]);
         document.all["mitem"+nummenu].style.color=mfontcolor;
         }
        }
if(item)document.all["mitem"+item].style.color=mmenuovercolor;
if(misdown||item){
 mtoin(srcel);
}
else{
 mtoout(srcel);
}
if(x==-1)mthestatus=eval("msub"+j).items[i].statustxt;
if(j==-1)mthestatus=mmenus[x].items[i].statustxt;
if(mthestatus!=""){
 musestatus=true;
 window.status=mthestatus;
}
clearTimeout(mpopTimer);
}
function mmenuitem_out(hassub){
toel = getReal(window.event.toElement, "className", "coolButton");
fromel = getReal(window.event.fromElement, "className", "coolButton");
if (toel == fromel) return;
srcel = getReal(window.event.srcElement, "className", "coolButton");
if(!hassub)mnochange(srcel);
if(musestatus)window.status="";
mpopOut()
}
function mmenuitem_down(){
srcel = getReal(window.event.srcElement, "className", "coolButton");
mtoin(srcel)
misdown=true;
}
function mmenuitem_up(){
srcel = getReal(window.event.srcElement, "className", "coolButton");
mtoout(srcel)
misdown=false;
}
function mexec3(j,i){
var cmd;
if(eval("msub"+j).items[i].target=="blank"){
  cmd = "window.open('"+eval("msub"+j).items[i].command+"')";
}else{
  cmd = eval("msub"+j).items[i].target+".location=\""+eval("msub"+j).items[i].command+"\"";
}
eval(cmd);
}
function mexec2(x){
var cmd;
if(mmenus[x].target=="blank"){
  cmd = "window.open('"+mmenus[x].command+"')";
}else{
  cmd = mmenus[x].target+".location=\""+mmenus[x].command+"\"";
}
eval(cmd);
}
function mexec(x,i){
var cmd;
if(mmenus[x].items[i].target=="blank"){
  cmd = "window.open('"+mmenus[x].items[i].command+"')";
}else{
  cmd = mmenus[x].items[i].target+".location=\""+mmenus[x].items[i].command+"\"";
}
eval(cmd);
}
function mbody_click(){

if (misShow){
 srcel = getReal(window.event.srcElement, "className", "coolButton");
 for(var x=0;x<=mmenus.length;x++){
  if(srcel.id=="mMenu"+x)
  return;
 }
 for(x=1;x<=mnumberofsub;x++){
  if(srcel.id=="mp"+x)
  return;
 }
 mallhide();
}
}
document.onclick=mbody_click;

function mwritetodocument(){
      var mwb=1;
                     var stringx='<div id="mposflag" style="position:absolute;"></div><table id=mmenutable border=0 cellpadding=3 cellspacing=2 width='+mmenuwidth+' height='+mmenuheight+' bgcolor='+mmenucolor+
                     ' onselectstart="event.returnValue=false"'+
                     ' style="cursor:'+mcursor+';'+mfonts+
                     ' border-left: '+mwb+'px solid '+mmenuoutbordercolor+';'+
                     ' border-right: '+mwb+'px solid '+mmenuinbordercolor+'; '+
                     'border-top: '+mwb+'px solid '+mmenuoutbordercolor+'; '+
                     'border-bottom: '+mwb+'px solid '+mmenuinbordercolor+'; padding:0px"><tr>'
                     for(var x=0;x<mmenus.length;x++){
                      var thismenu=mmenus[x];
                      var imgsize="";
                      if(thismenu.sizex!="0"||thismenu.sizey!="0")imgsize=" width="+thismenu.sizex+" height="+thismenu.sizey;
                      var ifspace="";
                      if(thismenu.caption!="")ifspace=" ";
                      stringx += "<td nowrap class=coolButton id=mMenu"+x+" style='border: "+mitemedge+"px solid "+mmenucolor+
                      "' width="+mmenuunitwidth+"px onmouseover=mmenu_over(mmenudiv"+x+
                      //"' onmouseover=mmenu_over(mmenudiv"+x+
                      ","+x+") onmouseout=mmenu_out("+x+
                      ") onmousedown=mmenu_down(mmenudiv"+x+","+x+")";
                            if(thismenu.command!=""){
                                stringx += " onmouseup=mmenu_up();mexec2("+x+");";
                            }else{
                               stringx += " onmouseup=mmenu_up()";
                            }
                            if(thismenu.pos=="0"){
                                stringx += " align=center><img align=absmiddle src='"+thismenu.img+"'"+imgsize+">"+ifspace+thismenu.caption+"</td>";
                            }else if(thismenu.pos=="1"){
                                stringx += " align=center>"+thismenu.caption+ifspace+"<img align=absmiddle src='"+thismenu.img+"'"+imgsize+"></td>";
                            }else if(thismenu.pos=="2"){
                                stringx += " align=center background='"+thismenu.img+"'> "+thismenu.caption+" </td>";
                            }else{
                                stringx += " align=center> "+thismenu.caption+" </td>";
                            }
                      stringx += "";
                     }
                     stringx+="<td width=*> </td></tr></table>";
                    
                    
                     for(var x=0;x<mmenus.length;x++){
                      thismenu=mmenus[x];
                        if(x==5){
                        stringx+='<div id=mmenudiv'+x+' style="visiable:none"></div>';
                        }else{
                        stringx+='<div id=mmenudiv'+x+
                        ' style="cursor:'+mcursor+';position:absolute;'+
                        'width:'+mmenuitemwidth+'px; z-index:'+(x+100);
                        if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
                        stringx+=';border-left: 1px solid '+mmidoutcolor+
                        ';border-top: 1px solid '+mmidoutcolor;}
                        stringx+=';border-right: 1px solid '+mmenuinbordercolor+
                        ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">\n'+
                      '<table  width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+
                      'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor;
                      if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
                      stringx+=';border-right: 1px solid '+mmidincolor+
                      ';border-bottom: 1px solid '+mmidincolor;}
                      stringx+=';border-top: 1px solid '+mmenuoutbordercolor+
                      ';padding: 4px" bgcolor='+mmenucolor+'>\n'
                      for(var i=0;i<thismenu.items.length;i++){
                       var thismenuitem=thismenu.items[i];
                       var imgsize="";
                              if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey;
                              var ifspace="";
                              if(thismenu.caption!="")ifspace=" ";
                       if(thismenuitem.hasc!=null){
                       stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
                       "' width=100% onmouseout=mmenuitem_out(true) onmouseover=\"mmenuitem_over(mmenudiv"+x+
                       ",'"+thismenuitem.hasc+"',"+x+",-1,"+i+");mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",mmenudiv"+x+");\""+
                       "><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td ";
                         if(thismenuitem.pos=="0"){
                                  stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td><td";
                                }else if(thismenuitem.pos=="1"){
                                  stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td><td";
                                }else if(thismenuitem.pos=="2"){
                                  stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td><td background='"+thismenuitem.img+"'";
                                }else{
                                  stringx += ">"+thismenuitem.caption+"</td><td";
                                }
                         stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>\n";                      
                       }else if(!thismenuitem.isline){
                       stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
                       "' width=100% height=15px onmouseover=\"mmenuitem_over(mmenudiv"+x+
                       ",false,"+x+",-1,"+i+");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup=";
     stringx += "mmenuitem_up();mexec("+x+","+i+"); ";
       if(thismenuitem.pos=="0"){
                                  stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>";
                                }else if(thismenuitem.pos=="1"){
                                  stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td></tr>";
                                }else if(thismenuitem.pos=="2"){
                                  stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>";
                                }else{
                                  stringx += ">"+thismenuitem.caption+"</td></tr>";
                                }
     }else{
                       stringx+='<tr><td height="1" background="hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>\n';
                       }
                      }stringx+='</table>\n</div>'
                      }                     
                }
               
for(var j=1;j<=mnumberofsub;j++){    
thisitem=eval("msub"+j);
stringx+='<div id=msubmenudiv'+j+
                        ' style="tag:'+thisitem.level+';cursor:'+mcursor+';position:absolute;'+
                        'width:'+mmenuitemwidth+'px; z-index:'+(j+200);
                        if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
                        stringx+=';border-left: 1px solid '+mmidoutcolor+
                        ';border-top: 1px solid '+mmidoutcolor;}
                        stringx+=';border-right: 1px solid '+mmenuinbordercolor+
                        ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">\n'+
                      '<table  width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+
                      'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor;
                      if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
                      stringx+=';border-right: 1px solid '+mmidincolor+
                      ';border-bottom: 1px solid '+mmidincolor;}
                      stringx+=';border-top: 1px solid '+mmenuoutbordercolor+
                      ';padding: 4px" bgcolor='+mmenucolor+'>\n'
                      for(var i=0;i<thisitem.items.length;i++){
                       var thismenuitem=thisitem.items[i];
                       var imgsize="";
                              if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey;
                              var ifspace="";
                              if(thismenu.caption!="")ifspace=" ";
                       if(thismenuitem.hasc!=null){
                       stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
                       "' width=100% onmouseout=mmenuitem_out(true) onmouseover=\"mmenuitem_over(msubmenudiv"+j+
                       ",'"+thismenuitem.hasc+"',-1,"+j+","+i+");mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",msubmenudiv"+j+");\""+
                       "><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td ";
                         if(thismenuitem.pos=="0"){
                                  stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td><td";
                                }else if(thismenuitem.pos=="1"){
                                  stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td><td";
                                }else if(thismenuitem.pos=="2"){
                                  stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td><td background='"+thismenuitem.img+"'";
                                }else{
                                  stringx += ">"+thismenuitem.caption+"</td><td";
                                }
                         stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>\n";                      
                       }else if(!thismenuitem.isline){
                       stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
                       "' width=100% height=15px onmouseover=\"mmenuitem_over(msubmenudiv"+j+
                       ",false,-1,"+j+","+i+");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup=";
                       stringx += "mmenuitem_up();mexec3("+j+","+i+"); ";
     if(thismenuitem.pos=="0"){
                                  stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>";
                                }else if(thismenuitem.pos=="1"){
                                  stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td></tr>";
                                }else if(thismenuitem.pos=="2"){
                                  stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>";
  , ;             &n, bsp;                }else{
                                  stringx += ">"+thismenuitem.caption+"</td></tr>";
                                }
                              }else{
                       stringx+='<tr><td height="1" background="hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>\n';
                       }
                      }
stringx+='</table>\n</div>'
}
       document.write("<div align='left'>"+stringx+"</div>");
}

 

mpmenu=new mMenu('主菜单一','','self','','','','');
mpmenu.addItem(new mMenuItem('主菜单一1','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单一2','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单一3','/index.asp','self',false,'说明文字',null,'','','',''));

mpmenu2=new mMenu('页元素','','self','','','','');
msub1=new mMenuItem('设计文档','','self',false,'','1','','','','');
msub1.addsubItem(new mMenuItem('设计文章','/notebook.asp','self',false,'说明文字',null,'','','',''));
msub1.addsubItem(new mMenuItem('书籍下载','/notebook.asp','self',false,'说明文字',null,'','','',''));
mpmenu2.addItem(msub1);
msub2=new mMenuItem('网页特效','','self',false,'','1','','','','');
msub2.addsubItem(new mMenuItem('网页特效1','/js.asp','self',false,'说明文字',null,'','','',''));
msub2.addsubItem(new mMenuItem('网页特效2','/js.asp','self',false,'说明文字',null,'','','',''));
msub2.addsubItem(new mMenuItem('网页特效3','/js.asp','self',false,'说明文字',null,'','','',''));
msub2.addsubItem(new mMenuItem('网页特效4','/js.asp','self',false,'说明文字',null,'','','',''));
msub2.addsubItem(new mMenuItem('网页特效5','/js.asp','self',false,'说明文字',null,'','','',''));
mpmenu2.addItem(msub2);
mpmenu2.addItem(new mMenuItem('精品收藏','/gallery.asp','self',false,'说明文字',null,'','','',''));
mpmenu2.addItem(new mMenuItem('软件下载','/download.asp','self',false,'说明文字',null,'','','',''));
mpmenu2.addItem(new mMenuItem('酷站推荐','/web.asp','self',false,'说明文字',null,'','','',''));
mpmenu2.addItem(new mMenuItem('元素论坛','/forum/index.asp','self',false,'说明文字',null,'','','',''));

mpmenu=new mMenu('主菜单三','','self','','','','');
mpmenu.addItem(new mMenuItem('主菜单三1','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单三2','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单三3','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单三4','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单三5','/index.asp','self',false,'说明文字',null,'','','',''));

mpmenu=new mMenu('主菜单四','','self','','','','');
mpmenu.addItem(new mMenuItem('主菜单四1','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单四2','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单四3','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单四4','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(new mMenuItem('主菜单四5','/index.asp','self',false,'说明文字',null,'','','',''));

mpmenu=new mMenu('主菜单五','','self','','','','');
msub3=new mMenuItem('主菜单五1','','self',false,'','1','','','','');
msub3.addsubItem(new mMenuItem('主菜单五1-a','/index.asp','self',false,'说明文字',null,'','','',''));
msub3.addsubItem(new mMenuItem('主菜单五1-b','/index.asp','self',false,'说明文字',null,'','','',''));
msub3.addsubItem(new mMenuItem('主菜单五1-c','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(msub3);
msub4=new mMenuItem('主菜单五2','','self',false,'','1','','','','');
msub4.addsubItem(new mMenuItem('主菜单五2-a','/index.asp','self',false,'说明文字',null,'','','',''));
msub4.addsubItem(new mMenuItem('主菜单五2-b','/index.asp','self',false,'说明文字',null,'','','',''));
msub4.addsubItem(new mMenuItem('主菜单五2-c','/index.asp','self',false,'说明文字',null,'','','',''));
mpmenu.addItem(msub4);
msub5=new mMenuItem('主菜单五3','','self',false,'','1','','','','');
msub5.addsubItem(new mMenuItem('主菜单五3-a','/index.asp','self',false,'说明文字',null,'','','',''));
msub5.addsubItem(new mMenuItem('主菜单五3-b','/index.asp','self',false,'说明文字',null,'','','',''));
msub5.addsubItem(new mMenuItem('主菜单五3-c','/index.asp','self',false,'说明文字',null,'','','',''));

msub3.addsubItem(new mMenuItem('主菜单五3-d','/index.asp','self',false,'说明文字',null,'','','',''));
msub4.addsubItem(new mMenuItem('主菜单五4-d','/index.asp','self',false,'说明文字',null,'','','',''));
msub5.addsubItem(new mMenuItem('主菜单五5-d','/index.asp','self',false,'说明文字',null,'','','',''));

mpmenu.addItem(msub5);
mpmenu6=new mMenu('返回主页','/index.asp','self','','','','');
mpmenu7=new mMenu('访问论坛','/forum/index.asp','self','','','','');
mwritetodocument();

</script>

 

 

 

以下是引用片段:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="</a>"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>横向下拉菜单</title>
<style type="text/css">
<!--
* {margin:0;padding:0;border:0;}

body {
 font-family: arial, 宋体, serif;
        font-size:12px;
}

#nav {
  height: 24px;  list-style-type: none;  padding-left:200px;

line-height:24px;overflow:hidden;background:#999;
}

#nav a {
 display: block; width: 80px; text-align:center;
}

#nav a:link  {
 color:#EEE; text-decoration:none;
}
#nav a:visited  {
 color:#EEE;text-decoration:none;
}
#nav a:hover  {
 color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;
}

#nav li {
 float: left; width: 80px;
}


#nav li ul {
 line-height: 24px; 
 list-style-type: none;
 text-align:left;
 left: -999px;
 width: 520px; //注意,这里一定要设置宽度;
 position: absolute;
 background:#CCC;
}

#nav li ul li{
  float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float
}


#nav li ul a{
 display: block; width: 65px;text-align:left;padding-left:15px;
}

#nav li ul a:link  {
 color:#F1F1F1; text-decoration:none;
}
#nav li ul a:visited  {
 color:#F1F1F1;text-decoration:none;
}
#nav li ul a:hover  {
 color:#FFF;text-decoration:none;font-weight:normal;background:#C00;
}

#nav li:hover ul {
 left:25%;
}

#nav li.sfhover ul {
 left:25%;
}

#content {
 clear: left;
}


-->
</style>

<script type="text/javascript">
<!--
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
  }
 }
}
window.onload=menuFix;

//-->
</script>
</head>
<body>


<ul id="nav">
<li><a href="#">菜单一</a>
 <ul>
 <li><a href="#">菜单一</a></li>
 <li><a href="#">菜单一</a></li>
 <li><a href="#">菜单一</a></li>
 <li><a href="#">菜单一</a></li>
 <li><a href="#">菜单一</a></li>
 <li><a href="#">菜单一</a></li>
 </ul>
</li>
<li><a href="#">菜单二</a>
 <ul>
 <li><a href="#">菜单二</a></li>
 <li><a href="#">菜单二</a></li>
 <li><a href="#">菜单二</a></li>
 <li><a href="#">菜单二</a></li>
 <li><a href="#">菜单二</a></li>
 </ul>
</li>
<li><a href="#">菜单三</a>
 <ul>
 <li><a href="#">菜单三</a></li>
 <li><a href="#">菜单三</a></li>
 <li><a href="#">菜单三</a></li>
 <li><a href="#">菜单三</a></li>
 <li><a href="#">菜单三</a></li>
 </ul>
</li>
<li><a href="#">菜单四</a>
 <ul>
 <li><a href="#">菜单四</a></li>
 <li><a href="#">菜单四</a></li>
 <li><a href="#">菜单四</a></li>
 <li><a href="#">菜单四</a></li>
 <li><a href="#">菜单四</a></li>
 </ul>
</li>

<li><a href="#">菜单五</a>
 <ul>
 <li><a href="#">菜单五</a></li>
 <li><a href="#">菜单五</a></li>
 <li><a href="#">菜单五</a></li>
 <li><a href="#">菜单五</a></li>
 <li><a href="#">菜单五</a></li>
 </ul>
</li>
<li><a href="#">菜单六</a>
 <ul>
 <li><a href="#">菜单六</a></li>
 <li><a href="#">菜单六</a></li>
 <li><a href="#">菜单六</a></li>
 <li><a href="#">菜单六</a></li>
 <li><a href="#">菜单六</a></li>
 </ul>
</li>

</ul>
</div>

</body>
</html>

 

 

以下是引用片段:

<style type="text/css">
.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:left;position:relative;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:139px; height:3em; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#dfc184; padding-left:10px; line-height:3em;}
* html
.menu ul li a, .menu ul li a:visited {width:149px;w\idth:139px;}.menu ul li ul {display: none;}
table {margin:-1px; border-collapse:collapse;font-size:1em;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#bd8d5e;}
.menu ul li:hover ul {display:block; position:absolute; top:3em;margin-top:1px;left:0; width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#faeec7; color:#000; height:auto; line-height:1.2em; padding:5px 10px; width:129px}
.menu ul li:hover ul li a.drop {background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:150px; top:0;width:150px;}
.menu ul li:hover ul li:hover ul.left {left:-150px;}
</style>
<!--[if lte IE 6]><style type="text/css">
.menu ul li a:hover {color:#fff; background:#bd8d5e;}
.menu ul li a:hover ul {display:block; position:absolute; top:3em; left:0;background:#fff;margin-top:0;marg\in-top:1px;}
.menu ul li a:hover ul li a {display:block; background:#dbe4ab; color:#000; height:auto; line-height:1.5em; padding:5px 10px; width:150px;w\idth:129px;}
.menu ul li a:hover ul li a.drop {background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; height:0; width:0;}
.menu ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; top:0; color:#000;left:150px;}
.menu ul li a:hover ul li a:hover ul.left {left:-150px;}
</style>
<![endif]-->
<div class="menu">
<ul>
<li><a class="drop" href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>   
<ul>   
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>   
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>   
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>   
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>   
<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a>
<!--<![endif]--><table><tr><td>       
<ul>           
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>            <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>        </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->    </li>    <li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>    <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>    <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>    </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li><li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>    <ul>    <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>    <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>    <li><a href="circles.html" title="circular links">circular links</a></li>    </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li><li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>    <ul>    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>    <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>    </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li><li><a href="../ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>    <ul>    <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>    <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>    </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li><li><a href="../opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>    <ul>    <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>    <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>        <ul class="left">            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>            <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>        </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->    </li>    </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li></ul></div><script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>

 

相关阅读
超级实用且不花哨的js代码大全( 6 )
景点门票预订
留言板留言板V7.0
uniapp的rich-text组件注入的a标签点击跳转处理
旅游线路系统
你们负责对网站的后期推广吗?
div+css中文字居于底部的解决方法与代码
过滤输入字符串中的危险符号
共有0条关于《几种javascript导航菜单》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
更多>>同类信息
查询某个字符在字符串中出现的位置数组
jQuery设置提交表单disabled属性所有input、button、extarea、select、checkbox、radio都生效
window.location.href跳转无反应不跳转解决
window.location.href和setTimeout结合时间错误
Object.assign的一些用法
各种钱货币字母转换对应的符号
更多>>最新添加文章
呼伦贝尔市北天草原旅行社有限公司
四川悠旅地旅游有限公司
连云港五洲旅行社有限公司
邓州市途鸿旅行社
连云港华夏国际旅行社有限公司
重庆长航江山国际旅行社
松原市海航商务旅行社
广西亚太国际旅行社有限公司
更多>>随机抽取信息
19寸宽屏旅行社网站默认模板
巧用ASP技术保护DHTML源代码
126邮箱TAB效果(同一页面可多次使用)
利用javascript静态改变表单指向与提交方式
利用CSS中的Clip属性来创造各种多彩的文字
查询某个字符在字符串中出现的位置数组