幾種javascript導航菜單 -- [HTML]─ 深山工作室提供網絡投票系統|微信公眾號投票|微信公眾號小程序|抖音小程序|百度小程序|微信公眾號開發|企業網站建設

<thead id="jxdzp"><address id="jxdzp"><pre id="jxdzp"></pre></address></thead>

<em id="jxdzp"><span id="jxdzp"></span></em>

<listing id="jxdzp"><nobr id="jxdzp"><meter id="jxdzp"></meter></nobr></listing>

<address id="jxdzp"></address>

<noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

<noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

訂閱本欄目 RSS您所在的位置: 深山工作室 > HTML > 正文

幾種javascript導航菜單

深山行者個人網站 2007/11/25 22:01:58 深山行者字體:大中小瀏覽 10515

幾種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>

<div class="menu">
<ul>
<li><a class="drop" href="../menu/index.html">DEMOS</a><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</a>
<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>    </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></li><li><a href="../boxes/index.html">BOXES</a><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></li><li><a href="../mozilla/index.html">MOZILLA</a><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></li><li><a href="../ie/index.html">EXPLORER</a><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></li><li><a href="../opacity/index.html">OPACITY</a><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</a><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>    </li>    </ul></td></tr></table></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在a標簽中的一些操作; 一個利用select下拉選擇框進行變色的網頁效果; 絕對管用的Swishmax (Flash制作) 綠色特別版下載; javascript時間顯示01; 連云港汽車門戶網站; 關于網頁中pt和px的單位換算！

共有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還有其它的嗎

更多>>隨機抽取信息: 越獄ios老應用老游戲合集下載; 純div+css制作的彈出菜單-04; javascript表格內移動上下列，可以做成ajax加上動態程序做成上下移動順序; 旅行社手機網站模板6; 深山留言板5.0新版; 一個非常不錯的程序編輯工具--PSPad editor

更多標簽熱門標簽

添加網站地圖 base 增大行號對象下載 dw 訪問量圖片調色板半透明文化 cpu 絕對定位思考模板讀取加密 innerText iframe function 滑過網易電影計算 eof alert 手調用留言板模版跳轉 border 留言絕對位置頁面遍歷文件做標焦點格式滑輪 Dreamweaver 背景混合絕對管用的iis安裝包下載火狐 FlashFxp 查詢菜單

行業解決方案: 抖音小程序百度小程序微信小程序

了解我們: 關于深山; 業務范圍; 案例展示中心; 聯系我們; 網站地圖; 贊助深山

動態展示: 定制網絡投票系統; 定制小程序

服務熱線: 13961347334

: 微信公眾號二維碼

: 百度小程序二維碼

: 頭條抖音小程序二維碼

: 聯系微信二維碼

: 聯系QQ二維碼

免責聲明:本站所有資料信息,有部分為本人原創,部分為從網絡收集而來,僅供網友查看閱讀所用,所有信息版權歸信息所有人或所有公司所有
如果信息內容侵犯到您的版權或權益請與我們聯系,經確認后我們會立即移除相關內容或鏈接
Copyright © 2007-2025 深山工作室 All Rights Reserved
服務QQ:565449214 手機:13961347334
ICP備案:蘇ICP備15019627號

蘇公網安備 32070502010230號

88国产精品视频一区二区三区