应用JavaScript脚本制作二级导航菜单

最新推荐文章于 2024-04-27 17:42:57 发布
最新推荐文章于 2024-04-27 17:42:57 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： Web前端 文章标签： javascript 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w252064/article/details/77651559
版权

JS脚本不仅可以验证表单元素，而且可以制作各式各样的网站导航菜单。

<!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=utf-8">
<title>应用JavaScript脚本制作二级导航菜单</title>
<style type="text/css">

body,td,th {
    font-size: 12px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
a {
    font-size: 12px;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
</style>
 <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>
</head>

<body>
<table width="761" height="218" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" background="./10/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>    
      </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

这里写图片描述

这里写图片描述

蓝魔之泪LRD
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 二级栏目js代码,JS二级菜单不同实现方法分析【4种方法】
weixin_34207925的博客
06-08 676
本文实例讲述了JS二级菜单不同实现方法。分享给大家供大家参考，具体如下：之前面试的时候被问到过一次，后来，在笔试的时候又遇到了，为了长点记性，就决定把这个好好写写。第一种：第一种是采用css来控制的；主要采用float，和position,display，hover来完成的。具体看以参看后面的源代码。第二种：主要采用hover,和display来实现的。第三种：采用的是js来控制的，mouseov...
JavaScript实现简单的二级导航菜单实例
10-24
主要介绍了JavaScript实现简单的二级导航菜单,设计javascript动态操作页面元素的技巧,非常具有实用价值,需要的朋友可以参考下
原生 HTML/CSS/JS 实现右键菜单和二级菜单
胡海龙
03-25 1542
本文详细的演示了如何通过原生HTML/CSS/JS来实现一个右键菜单，菜单具有分组和二级菜单，文章附有详细代码和演示网址。感兴趣的小伙伴快来查看吧。
JS创建简单的脚本
最新发布
2302_76586717的博客
04-27 950
第一种方法是将JavaScript直接包含在HTML文件中第二种方法是把JavaScript语句单独保存到单独的文件，然后利用src属性调用如果js文件与调用脚本不在通过一个文件夹，我们就需要绝对路径或相对路径以上两种方法，可以写在body标签中，也可以在head标签。
html 二级栏目js代码,实现js二级菜单
weixin_39584405的博客
06-08 330
图片发自简书App我们先来说一下，二级菜单：应用较为广泛，在我们熟知一些购物网站，选择分类时会用到二级三级甚至更多，供我们选择，较为方便。下面我们就开始：图片发自简书App样式写出我们要表现出的样式body,ul {margin: 0;padding: 0;}.active {background-color: mediumvioletred;color: #fff;}ul {margin-top...
html中二级菜单占位置,js实现二级菜单
weixin_34255938的博客
05-30 631
js实现鼠标滑过显示二级菜单JS代码如下 CSS代码如下 菜单部分代码如下 我那里写错了呢，不能鼠标滑过哪显示啥？ 滑过 产品介绍 显示下面的子菜单？ onmouseover是鼠标移动到某元素执行的鼠标事件。 onmousemove是鼠标在某元素上移动执行的事件。 你先把这两个分清楚了，根据你的需CSS布局HTML小编今天和大家分享是 先获取你要鼠标滑过的元素 也就是产品介绍这个a元素照着书打的源...
html 二级栏目js代码,JS实现超精简响应鼠标显示二级菜单代码
weixin_36137385的博客
06-08 350
本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码。分享给大家供大家参考。具体如下：这是一款精简版的二级导航菜单，响应鼠标的动作，鼠标放上即显示出菜单，常见的一种菜单样式。喜欢的朋友拿去修改一下，再美化一番，就够用了。运行效果截图如下：在线演示地址如下：具体代码如下：二级菜单，响应鼠标.mainNav ul li {float: left;width: 150px;}.mainNav li ul...
JavaScript案例-js伸缩二级菜单
02-16
在这个“JavaScript案例-js伸缩二级菜单”的主题中，我们将深入探讨如何使用JavaScript来创建一个响应式的二级菜单，这在网页设计中非常常见，能够提升用户体验。 首先，我们需要理解HTML结构。二级菜单通常由一个...
jQuery蓝色二级导航菜单
04-07
在实际应用中，开发者需要将这个"jQuery蓝色二级导航菜单"整合到自己的网页中。首先，确保引入jQuery库，这通常通过在HTML头部添加CDN链接或者将jQuery库文件下载到本地并引用。接着，创建HTML结构，定义一级和二级...
纯CSS+XHTML实现的二级导航菜单效果
09-24
标题中的“纯CSS+XHTML实现的二级...综上所述，这个二级导航菜单的实现涉及了CSS的基本选择器、布局技巧、伪类以及简单的JavaScript事件处理。通过理解这些概念，开发者可以创建出交互性强且易于维护的网页导航结构。
jquery树形渐变显示二级导航菜单
06-05
本话题主要关注"jquery树形渐变显示二级导航菜单"这一技术，它结合了jQuery库的动态效果和树形结构，为二级下拉菜单赋予更生动的用户体验。 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件...
jquery垂直渐变弹出二级导航菜单
06-05
"jQuery垂直渐变弹出二级导航菜单"是一个专门针对这种需求的技术实现，它结合了jQuery库的强大功能，使得二级菜单在鼠标悬停时能以平滑的渐变效果展开，提供用户友好的交互体验。 jQuery是一个广泛使用的JavaScript...
HTML如何实现 导航的二级菜单
ljheee的博客
04-29 6412
HTML如何实现 导航的二级菜单     HTML如何实现 二级菜单     *{margin:0;padding:0;}     a{text-decoration:none;}     a:hover{background-color:#fff;}          header{background:#ee6;         height:80px;
html二级目录的实现,js实现完全自定义可带多级目录的网页鼠标右键菜单方法
weixin_39980917的博客
06-15 527
本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法。分享给大家供大家参考。具体分析如下：这是很不错的一个网页鼠标特性，这个代码可以控制网页中鼠标的右键菜单，完全按照你的意思打造，可以带多级的目录显示。JS自定义网页多级导航菜单html,body{height:100%;overflow:hidden;}body,div,ul,li{margin:0;padding:0;}body{...
练手小案例：用js实现二级导航
hu_666666的博客
12-25 1392
一分钟学会使用HTML5+CSS3+JS实现二级导航效果，绝对的干货满满！
js二级导航
chubi5506的博客
06-23 200
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht...
JavaScript写横向二级导航
weixin_46430385的博客
04-04 443
HTML： 首先引入公共样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="public.css"> &...
JavaScript制作二级导航菜单的脚本代码
gudemoning的博客
04-13 508
JavaScript制作二级导航菜单的脚本代码 相信对于二级导航菜单大部分朋友都不会陌生，因为大部分网站都有用到。但是二级导航菜单是如何实现的，我想大部分朋友还和zero一样一头雾水。不过没关系通过下面的实例，你和我都能解决这个问题。 2.1、在网页中适当的位置添加一个一级菜单，本例中的一级导航菜单是由一系列空的超级链接组成，这些空的超级链接执行的操作是调用自定义的javasc...
js怎么实现二级菜单
qq_60504665的博客
11-18 1137
其中，HTML 文件是页面的基础结构，CSS 文件是用来美化页面的样式，JavaScript 文件则是用来实现菜单的交互效果的。在 HTML 文件中，需要创建一个菜单容器元素，在该元素下创建一级菜单项元素，每个一级菜单项元素下面再添加二级菜单项元素。在 JavaScript 文件中，则需要实现菜单的交互效果，包括鼠标悬停/离开时的效果等。的样式设置了二级菜单项内部文本的样式，以及背景颜色、文字颜色等样式设置。在 CSS 文件中，通过给菜单项元素设置合适的样式来美化菜单的外观。
html网页制作有二级导航菜单
12-29
以下是两种实现网页二级导航菜单的方法： 1. 使用纯CSS实现二级导航菜单： ```html <!DOCTYPE html> <html> <head> <style> /* 一级菜单样式 */ .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #ddd; color: black; } /* 二级菜单样式 */ .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <h3>二级导航菜单</h3> <p>将鼠标悬停在 "Dropdown" 上方，显示二级菜单。</p> </body> </html> ``` 2. 使用JavaScript实现二级导航菜单的动态显示与隐藏： ```html <!DOCTYPE html> <html> <head> <style> /* 一级菜单样式 */ .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #ddd; color: black; } /* 二级菜单样式 */ .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } </style> <script> // JavaScript代码实现二级菜单的动态显示与隐藏 function showDropdown() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn" onclick="showDropdown()">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <h3>二级导航菜单</h3> <p>将鼠标悬停在 "Dropdown" 上方，显示二级菜单。</p> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值