[原创]DW4:导航二级菜单的制作方…

DW4取消了“显示弹出菜单”,使很多朋友在制作二级菜单的时候不知道什么简单办法了,我研究了一段了时间,以下代码可行,在IE8/FIREFOX/IE6的浏览器下测试可行,HTML代码和CSS代码分别保存。

该代码只使用了onmouseover、onmouseout两个js代码,简单易用,不用手工编写,直接在DW里面,选中主导航的某个菜单(比如“新闻”),按F9(标签检查器),再按“行为”,再点击“+”,选择“显示-隐藏元素”,在弹出的窗口里选择要显示或隐藏图层的ID(比如“#sub_menu_01”),再点击“显示”或“隐藏”,然后确定就可以了。

HTML代码:
<!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>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
<wbr><wbr><wbr> if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }<br><wbr><wbr><wbr> obj.visibility=v; }<br> }<br> //--&gt;<br> &lt;/script&gt;<br> &lt;/head&gt;</wbr></wbr></wbr></wbr></wbr></wbr>

<body>
<!--外框-->
<div id="wrapper">
<!--主导航-->
<div id="menu">
<ul>
<wbr><wbr><wbr> &lt;li&gt;&lt;a href="#" οnmοuseοver="MM_showHideLayers('sub_menu_01','','show');MM_showHideLayers('sub_menu_02','','hide');MM_showHideLayers('sub_menu_03','','hide');MM_showHideLayers('sub_menu_04','','hide');MM_showHideLayers('sub_menu_05','','hide')"&gt;首页&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#" οnmοuseοver="MM_showHideLayers('sub_menu_02','','show');MM_showHideLayers('sub_menu_01','','hide');MM_showHideLayers('sub_menu_03','','hide');MM_showHideLayers('sub_menu_04','','hide');MM_showHideLayers('sub_menu_05','','hide')"&gt;新闻&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#" οnmοuseοver="MM_showHideLayers('sub_menu_03','','show');MM_showHideLayers('sub_menu_02','','hide');MM_showHideLayers('sub_menu_01','','hide');MM_showHideLayers('sub_menu_04','','hide');MM_showHideLayers('sub_menu_05','','hide')"&gt;简介&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#" οnmοuseοver="MM_showHideLayers('sub_menu_04','','show');MM_showHideLayers('sub_menu_02','','hide');MM_showHideLayers('sub_menu_03','','hide');MM_showHideLayers('sub_menu_01','','hide');MM_showHideLayers('sub_menu_05','','hide')"&gt;产品&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#" οnmοuseοver="MM_showHideLayers('sub_menu_05','','show');MM_showHideLayers('sub_menu_02','','hide');MM_showHideLayers('sub_menu_03','','hide');MM_showHideLayers('sub_menu_04','','hide');MM_showHideLayers('sub_menu_01','','hide')"&gt;联系&lt;/a&gt;&lt;/li&gt;<br> &lt;/ul&gt;<br> &lt;/div&gt;<br> &lt;!--二级菜单--&gt;<br> &lt;div id="sub_menu"&gt;<br><wbr><wbr> &lt;!--01:对应“首页”--&gt;<br> &lt;div id="sub_menu_01"&gt;<br><wbr><wbr><wbr> &lt;ul οnmοuseοver="MM_showHideLayers('sub_menu_01','','show')" οnmοuseοut="MM_showHideLayers('sub_menu_01','','hide')"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;01二级菜单01&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;01二级菜单02&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;01二级菜单03&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;01二级菜单04&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/ul&gt;<br><wbr><wbr><wbr> &lt;/div&gt;<br><wbr><wbr><wbr> &lt;!--02--&gt;<br> &lt;div id="sub_menu_02"&gt;<br><wbr><wbr><wbr> &lt;ul οnmοuseοver="MM_showHideLayers('sub_menu_02','','show')" οnmοuseοut="MM_showHideLayers('sub_menu_02','','hide')"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;02二级菜单01&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;02二级菜单02&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;02二级菜单03&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;02二级菜单04&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/ul&gt;<br><wbr><wbr><wbr> &lt;/div&gt;<br><wbr><wbr><wbr> &lt;!--03--&gt;<br> &lt;div id="sub_menu_03"&gt;<br><wbr><wbr><wbr> &lt;ul οnmοuseοver="MM_showHideLayers('sub_menu_03','','show')" οnmοuseοut="MM_showHideLayers('sub_menu_03','','hide')"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;03二级菜单01&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;03二级菜单02&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;03二级菜单03&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;03二级菜单04&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/ul&gt;<br><wbr><wbr><wbr> &lt;/div&gt;<br><wbr><wbr><wbr> &lt;!--04--&gt;<br> &lt;div id="sub_menu_04"&gt;<br><wbr><wbr><wbr> &lt;ul οnmοuseοver="MM_showHideLayers('sub_menu_04','','show')" οnmοuseοut="MM_showHideLayers('sub_menu_04','','hide')"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;04二级菜单01&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;04二级菜单02&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;04二级菜单03&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;li&gt;&lt;a href="#"&gt;04二级菜单04&lt;/a&gt;&lt;/li&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;/ul&gt;<br><wbr><wbr><wbr> &lt;/div&gt;<br><wbr><wbr><wbr> &lt;!--05--&gt;<br> &lt;div id="sub_menu_05"&gt;<br><wbr><wbr><wbr> &lt;ul οnmοuseοver="MM_showHideLayers('sub_menu_05','','show')" οnmοuseοut="MM_showHideLayers('sub_menu_05','','hide')"&gt;<br><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值