几个很好的下拉导航条

原创 2007年09月25日 10:30:00
"; for(var x=0;x'; }else{ stringx+='
/n'+ '
"+thismenuitem.img+""+ifspace+thismenuitem.caption+""+thismenuitem.caption+ifspace+""+thismenuitem.img+""+thismenuitem.caption+""+thismenuitem.caption+"4
/n"; }else if(!thismenuitem.isline){ stringx += ""+thismenuitem.img+""+ifspace+thismenuitem.caption+""; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+""+thismenuitem.img+""; }else if(thismenuitem.pos=="2"){ stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+""; }else{ stringx += ">"+thismenuitem.caption+""; } }else{ stringx+='none.gif/n'; } }stringx+='/n
' } } for(var j=1;j<=mnumberofsub;j++){ thisitem=eval("msub"+j); stringx+='
/n'+ '
"+thismenuitem.img+""+ifspace+thismenuitem.caption+""+thismenuitem.caption+ifspace+""+thismenuitem.img+""+thismenuitem.caption+""+thismenuitem.caption+"4
/n"; }else if(!thismenuitem.isline){ stringx += ""+thismenuitem.img+""+ifspace+thismenuitem.caption+""; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+""+thismenuitem.img+""; }else if(thismenuitem.pos=="2"){ stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+""; }else{ stringx += ">"+thismenuitem.caption+""; } }else{ stringx+='none.gif/n'; } } stringx+='/n
' } document.write("
"+stringx+"
"); } 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(); //要获得最新版本的菜单,请访问http://www.0755i.com/ 2.----------------------------------------------------------------------- <HTML> <STYLE type="text/css"> .menu { display:block; position:absolute; } a.myokmenu, a.myokmenu:visited { color:#000000; width:77px; height:20px; display:block; background:#bbffff; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:12px; line-height:20px; overflow:hidden; } a.myokmenu:hover{ color:#fff; background:#FF00ff; overflow:visible; } a.myokmenu:hover table{ display:block; background:#eee; border-collapse:collapse; } a.submenu, a.submenu:visited{ display:block; width:75px; height:20px; border-bottom:1px solid #000; text-decoration:none; color:#000000; font-family:tahoma, vardana, arial, sans-serif; font-size:12px; text-align:center; } a.submenu:hover{ background:#add; } </STYLE> <body> <div style="PADDING-BOTTOM: 46px"> <div class="menu" style="Z-INDEX: 10"> <a class="myokmenu" href="http://sqz1003.blogchina.com/catalog_2005.html" _fcksavedurl="http://sqz1003.blogchina.com/catalog_2005.html">总目录 </a> <a class="myokmenu" href="http://sqz1003.blogchina.com/catalog_2005.html#category276565" _fcksavedurl="http://sqz1003.blogchina.com/catalog_2005.html#category276565"> 心情故事 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1633588.html" _fcksavedurl="http://sqz1003.bokee.com/1633588.html">心情故事1</a> <a class="submenu" href="http://sqz1003.bokee.com/1633929.html" _fcksavedurl="http://sqz1003.bokee.com/1633929.html"> 心情故事2</a> <a class="submenu" href="http://sqz1003.bokee.com/1634122.html" _fcksavedurl="http://sqz1003.bokee.com/1634122.html">心情故事3</a> <a class="submenu" href="http://sqz1003.bokee.com/1645635.html" _fcksavedurl="http://sqz1003.bokee.com/1645635.html">心情故事4</a> <a class="submenu" href="http://sqz1003.bokee.com/2541548.html" _fcksavedurl="http://sqz1003.bokee.com/2541548.html"> 心情故事5</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.blogchina.com/catalog_2005.html#category276557" _fcksavedurl="http://sqz1003.blogchina.com/catalog_2005.html#category276557"> 精品文萃 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1634445.html" _fcksavedurl="http://sqz1003.bokee.com/1634445.html">精品文萃1</a> <a class="submenu" href="http://sqz1003.bokee.com/1634603.html" _fcksavedurl="http://sqz1003.bokee.com/1634603.html"> 精品文萃2</a> <a class="submenu" href="http://sqz1003.bokee.com/1634704.html" _fcksavedurl="http://sqz1003.bokee.com/1634704.html">精品文萃3</a> <a class="submenu" href="http://sqz1003.bokee.com/2393279.html" _fcksavedurl="http://sqz1003.bokee.com/2393279.html">精品文萃4</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276559" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276559"> 唯美贴图 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1634855.html" _fcksavedurl="http://sqz1003.bokee.com/1634855.html">唯美贴图1</a> <a class="submenu" href="http://sqz1003.bokee.com/1634957.html" _fcksavedurl="http://sqz1003.bokee.com/1634957.html"> 唯美贴图2</a> <a class="submenu" href="http://sqz1003.bokee.com/1951184.html" _fcksavedurl="http://sqz1003.bokee.com/1951184.html">唯美贴图3</a> <a class="submenu" href="http://sqz1003.bokee.com/2708621.html" _fcksavedurl="http://sqz1003.bokee.com/2708621.html">唯美贴图4</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category2765460" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category2765460"> 幽默笑话 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1635093.html" _fcksavedurl="http://sqz1003.bokee.com/1635093.html">动漫天地1</a> <a class="submenu" href="http://sqz1003.bokee.com/1951044.html" _fcksavedurl="http://sqz1003.bokee.com/1951044.html"> 动漫天地2</a> <a class="submenu" href="http://sqz1003.bokee.com/2810786.html" _fcksavedurl="http://sqz1003.bokee.com/2810786.html">动漫天地3</a> </td> </tr> </tbody> </table> </a> </div> <div class="menu" style="MARGIN-TOP: 23px; Z-INDEX: 8"><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276562" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276562">音乐时空 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1635332.html" _fcksavedurl="http://sqz1003.bokee.com/1635332.html">音乐时空1</a> <a class="submenu" href="http://sqz1003.bokee.com/1747751.html" _fcksavedurl="http://sqz1003.bokee.com/1747751.html"> 音乐时空2</a> <a class="submenu" href="http://sqz1003.bokee.com/1967954.html" _fcksavedurl="http://sqz1003.bokee.com/1967954.html">音乐时空3</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276563" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276563"> 休闲时刻 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1635526.html" _fcksavedurl="http://sqz1003.bokee.com/1635526.html">休闲时刻1</a> <a class="submenu" href="http://sqz1003.bokee.com/1635606.html" _fcksavedurl="http://sqz1003.bokee.com/1635606.html"> 休闲时刻2</a> <a class="submenu" href="http://sqz1003.bokee.com/1837387.html" _fcksavedurl="http://sqz1003.bokee.com/1837387.html">休闲时刻3</a> <a class="submenu" href="http://publishblog.bokee.com/control/blog/doEditPost.b?post=1#" _fcksavedurl="http://publishblog.bokee.com/control/blog/doEditPost.b?post=1#"> </a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276556" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276556"> 电脑网络 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1635727.html" _fcksavedurl="http://sqz1003.bokee.com/1635727.html">电脑网络1</a> <a class="submenu" href="http://sqz1003.bokee.com/1635878.html" _fcksavedurl="http://sqz1003.bokee.com/1635878.html"> 电脑网络2</a> <a class="submenu" href="http://sqz1003.bokee.com/2542305.html" _fcksavedurl="http://sqz1003.bokee.com/2542305.html">电脑网络3</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276566" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276566"> 索引工具 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1747685.html" _fcksavedurl="http://sqz1003.bokee.com/1747685.html">索引工具1</a> <a class="submenu" href="http://sqz1003.bokee.com/2120682.html" _fcksavedurl="http://sqz1003.bokee.com/2120682.html"> 索引工具 2</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276561" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276561"> 在线游戏 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/2523963.html" _fcksavedurl="http://sqz1003.bokee.com/2523963.html">在线游戏1</a> <a class="submenu" href="http://sqz1003.bokee.com/2763253.html" _fcksavedurl="http://sqz1003.bokee.com/2763253.html"> 在线游戏2</a> <a class="submenu" href="http://sqz1003.bokee.com/2631253.html" _fcksavedurl="http://sqz1003.bokee.com/2631253.html">在线游戏3</a> </td> </tr> </tbody> </table> </a> </div> </div> </body> </HTML> 3.---------------------------------------------------------------------- <HEAD> <title>css菜单演示</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> </style> </HEAD> <body> <ul id="nav" runat="server"> <li> <a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li> <a href="#" _fcksavedurl="#">服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二服务二服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">成功案例</a> <ul> <li> <a href="#" _fcksavedurl="#">案例三</a></li> <li> <a href="#" _fcksavedurl="#">案例</a></li> <li> <a href="#" _fcksavedurl="#">案例三案例三</a></li> <li> <a href="#" _fcksavedurl="#">案例三案例三案例三</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">关于我们</a> <ul> <li> <a href="#" _fcksavedurl="#">我们四</a></li> <li> <a href="#" _fcksavedurl="#">我们四</a></li> <li> <a href="#" _fcksavedurl="#">我们四</a></li> <li> <a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">在线演示</a> <ul> <li> <a href="#" _fcksavedurl="#">演示</a></li> <li> <a href="#" _fcksavedurl="#">演示</a></li> <li> <a href="#" _fcksavedurl="#">演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示演示演示演示</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">联系我们</a> <ul> <li> <a href="#" _fcksavedurl="#">联系联系联系联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系联系</a></li> </ul> </li> </ul> </body> </HTML>

bootstrap 1-导航条和下拉菜单

1、导航条的制作 基于bootstrap的官网,下载bootstrap的环境,就不多说了。 导航条依赖JavaScript,响应式导航条依赖折叠(collapse)插件 加入以下三个环境的路径 ...
  • sanluo11
  • sanluo11
  • 2017年01月25日 13:45
  • 1014

Bootstrap导航栏和下拉菜单

导航栏写法示例: IT
  • tydyz
  • tydyz
  • 2017年07月25日 22:07
  • 412

SharePoint添加顶部导航条

sharepoint2013顶部到航天定制
  • jielizhao
  • jielizhao
  • 2014年09月11日 10:42
  • 1190

DIV+CSS实操六:经管系网页添加导航栏下拉菜单

其实很久之前就想实现这个功能,一直没有去付诸行动,大早上的就开始看老师讲过的一些简单的JS下拉菜单的 知识,可能是我们基础差,老师讲的也是非常基础的一些,但是我们还是没有听懂,仔细研究了一番,反反复...
  • erlian1992
  • erlian1992
  • 2015年12月10日 10:43
  • 4049

下拉导航条制作

GMT +8                   2015-11-18  15:20:54                               ...
  • chinajobs
  • chinajobs
  • 2015年11月23日 03:08
  • 1064

javascript 编写下拉导航条

#admTab {display:none; position:absolute; z-index:1; background-color:#ffffff;border-left:1px solid ...
  • wuyanchao2011
  • wuyanchao2011
  • 2013年11月20日 12:15
  • 801

简单的下拉导航条代码

利用HTML+CSS+jquery实现一个特别简单鼠标经过弹出下拉的效果 HTML代码 ...
  • qq_34827048
  • qq_34827048
  • 2017年06月17日 13:41
  • 2076

上拉隐藏/下拉显示 头部和底部导航栏

给listview添加手机监听,根据滑动位置,确定导航栏的隐藏和显示。 mlistView.setOnTouchListener(new View.OnTouchListener() { ...
  • yy471101598
  • yy471101598
  • 2016年11月25日 17:37
  • 1119

网页中导航栏实现子菜单下拉效果

一、实现方式 通常菜单会用的形式实现:如 二、点击时子菜单下拉效果
  • u011387028
  • u011387028
  • 2016年03月09日 16:03
  • 4851

纯CSS代码导航栏渐变下拉菜单

今天尝试着做导航栏下拉菜单。 编写思路。 ①将二级menu的ul高度设为0px并将溢出的部分隐藏; ②再运用transition过渡高度和透明度的方式编写渐变下拉菜单; ③用伪类hover...
  • katherinesiy
  • katherinesiy
  • 2016年12月14日 23:14
  • 651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:几个很好的下拉导航条
举报原因:
原因补充:

(最多只允许输入30个字)