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

几种javascript导航菜单

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

 

 

几种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>

 

前一页:初学入门：一组常用的弹出窗口用法总结
后一页:网页中自动换行问题
相关阅读
JavaScript技巧:让网页自动穿上外套
非常不错的页面搜索器,还可以移动
旅行社巴黎游主题模板效果
安康蓝天旅行社官网
网页中自动换行问题
成都中国青年旅行社开心旅游网
汽液两相流
iframe框架自适应高度代码
共有0条关于《几种javascript导航菜单》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现：无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
js指定日期加n天加n月加n年
jquery中动态生成的代码使用on hover事件时不出现效果
更多>>最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现：无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>随机抽取信息
静态网站利用微信URL Scheme生成的ticket从浏览器h5跳到微信小程序完整代码
经典表格隔行变色程序
高度100%的绝对定位自适应布局技巧
湖南乐途旅行社
刘浏家俱
苏州青年旅行社
更多标签热门标签
增高 模板 list CSS规范 标签 获取 pr 硬件 下拉框 县 定位 mop 在线 蓝色理想 保留 排序 IE8 title letter-spacing rss rad 绿色 柱状 文字垂直 滚动条 滑轮 日期 高度 button flush html 项目 效果 optgroup 评论 上 下 左 右 小旋风 垂直 执行 人生 显示器 absolute png24 翻页 选择框 导出 黑白 字符 思考 过滤
行业解决方案
抖音小程序 百度小程序 微信小程序
了解我们
关于深山
业务范围
案例展示中心
联系我们
网站地图
赞助深山
动态展示
定制网络投票系统
定制小程序
服务热线
13961347334
微信公众号二维码
百度小程序二维码
头条抖音小程序二维码
联系微信二维码
联系QQ二维码