JavaScript脚本制作二级导航菜单

网页特效脚本制作二级导航菜单
     相信对于二级导航菜单大部分朋友都不会陌生,因为大部分网站都有用到。但是二级导航菜单是如何实现的,我想大部分朋友还和zero一样一头雾水。不过没关系通过下面的实例,你和我都能解决这个问题。
     2.1、在网页中适当的位置添加一个一级菜单,本例中的一级导航菜单是由一系列空的超级链接组成,这些空的超级链接执行的操作是调用自定义的javascript函数lmenu()显示对应的二级菜单,在调用时需要传递一个标记,即主菜单项的参数。
     2.2、在网页中显示二级菜单的指定位置添加一个名为submenu的div层。
     2.3、编写自定义的javascript函数lmenu(),用于鼠标移动到某一个一级菜单时,根据传递的参数值在页面中指定的位置显示对应的二级菜单,并设置二级菜单的名称及链接文件。
     2.4、在ie浏览器中打开,并将鼠标移动到相应的一级菜单。 

    实例代码:
     

<!doctype html public “-//w3c//dtd html 4.01 transitional//en” “http://www.w3.org/tr/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312′>
<title>应用javascript脚本制作二级导航菜单</title>
</head> 

<body>
<table width=”761′ height=”218′ border=”1′ cellpadding=”1′ cellspacing=”1′ bordercolor=”#ffffff” background=”images/bg.jpg” bgcolor=”#3f8701′>
  <tr>
    <td valign=”top”><table width=”761′ border=”0′ cellspacing=”0′ cellpadding=”0′>
      <tr>
        <td height=”48′ colspan=”2′>&nbsp;</td>
      </tr>
      <tr>
        <td height=”27′ colspan=”2′ align=”right”><table width=”761′ height=”20′ border=”0′ cellpadding=”0′ cellspacing=”0′>
          <tr>
            <td width=”396′>&nbsp;</td>
            <td width=”67′ align=”center”><a href=”index.php教程”>首&nbsp;页</a></td>
            <td width=”75′ align=”center”><a href=”#” onmousemove=”lmenu(‘新品’)”>新品上架</a></td>
            <td width=”75′ align=”center”><a href=”#” onmousemove=”lmenu(‘购物’)”>购物车</a></td>
            <td width=”74′ align=”center”><a href=”#” onmousemove=”lmenu(‘会员’)”>会员中心</a></td>
            <td width=”61′ align=”center”><a href=”index.php”>在线帮助</a></td>
            <td width=”13′>&nbsp;</td>
          </tr>
        </table>          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td width=”226′ height=”20′ align=”right”>&nbsp;</td>
        <td width=”535′ align=”right”> <div id=”submenu”>&nbsp;</div></td>
     <script language=”javascript”>
   function lmenu(value){
    switch (value){
     case “新品”:
      submenu.innerhtml=” <a href=’#'>商品展示</a> | <a href=’#'>销售排行榜</a> | <a href=’#'>商品查询</a> “;
      break;   
     case “购物”:
      submenu.innerhtml=” <a href=’#'>添加商品</a> | <a href=’#'>移出指定商品</a> |<a href=’#'>清空购物车</a> | <a href=’#'>查询购物车</a> | <a href=’#'>填写订单信息</a> “;
      break;     
     case “会员”:
      submenu.innerhtml=” <a href=’#'>注册会员</a> | <a href=’#'>修改会员</a> | <a href=’#'>账户查询</a> “;
      break;      
     }
   }
   </script>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
运行结果: 

时间: 2024-09-06 10:59:13

JavaScript脚本制作二级导航菜单的相关文章

JavaScript实现简单的二级导航菜单实例_javascript技巧

本文实例讲述了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" la

js实现的黑背景灰色二级导航菜单效果代码_jquery

本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款js实现的黑背景灰色二级导航菜单,兼容IE6.firefox的js+css横向二极导航菜单.挺简洁,不过很清新,二级菜单是水平显示在主菜单的下方,采用流行的微软雅黑字体,若不想用这种字体,可换成默认的宋体即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代码如

jQuery+css实现的蓝色水平二级导航菜单效果代码_jquery

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

Jquery实现带动画效果的经典二级导航菜单_jquery

导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 复制代码 代码如下: <!DOCTYPE html > <html> <head> <title>一款带动画效果的经典二级导航菜单Jquery特效</title> <meta name="author" content="Jquery" /> <meta name

基于dropdown.js实现的两款美观大气的二级导航菜单_javascript技巧

本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单.分享给大家供大家参考.具体如下: 1. 蓝色风格导航菜单 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

JS实现的简洁二级导航菜单雏形效果_javascript技巧

本文实例讲述了JS实现的简洁二级导航菜单雏形效果.分享给大家供大家参考.具体如下: 这是一个二级导航菜单雏形,风格简洁,圆角形,也是当前比较流行的菜单效果,支持二级,演示内容是随便搞的,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

JS实现黑色大气的二级导航菜单效果_javascript技巧

本文实例讲述了JS实现黑色大气的二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款自己做的不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

仿中国站长素材频道滑动二级导航菜单

提示:您可以先修改部分代码再运行 <!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" lang="zh-CN"> <hea

js二级导航菜单代码

提示:您可以先修改部分代码再运行 js二级导航菜单代码 脚本说明: 把如下代码加入区域中 」JavaScript2000」」动画图库」」风景区」」Java Script」Java Applet」C G I」CGI?相关设定」免费资源」饭店资料」E-Mail 提示:您可以先修改部分代码再运行