首页网页制作网络编程脚本专栏数据库网站运营网络安全平面设计 CMS教程

分别用两个函数实现的菜单

所属分类：网络编程 / JavaScript 阅读数： 357

收藏 0赞 0分享

css+div做的菜单：一个主显示层，别的列表都隐藏着，用js函数设置列表的显示和隐藏。分别用到了两个函数，函数实现的效果是一样的，一个是参考的《css+Dhtml精髓》书上的事例，一个是找的函数。
大家帮我看看那个函数好用！还有大家还有别的更好的方法实现这个效果吗？谢谢！！

<font color=red><!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=gb2312" /> <title>菜单</title>                                 </head> <body>  <div id="nav">  <ul id="ul">      <li><a href="#" onMouseOver="javascript:showMenu('shui')";         onMouseOut="javascript:hiddenMenu('shui')"  >水果/水果</a> </li>          <li><a href="#"   onmouseover="javascript:MM_showHideLayers('hua','','show')";                  onmouseout="javascript:MM_showHideLayers('hua','','hide')">花卉/花卉/花卉</a></li>                                           <li><a href="#"  onmouseover="javascript:MM_showHideLayers('che','','show')";                  onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车</a></li> <li><a href="#" onmouseover="javascript:MM_showHideLayers('shui','','show')";                  onmouseout="javascript:MM_showHideLayers('shui','','hide')">水果2</a></li> <li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";                  onmouseout="javascript:MM_showHideLayers('hua','','hide')" >花卉/花卉/花卉2</a></li> <li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";                  onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车2</a></li> <li><a href="#" onmouseover="javascript:MM_showHideLayers('shui','','show')";                  onmouseout="javascript:MM_showHideLayers('shui','','hide')">水果3</a></li> <li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";                  onmouseout="javascript:MM_showHideLayers('hua','','hide')">花卉/花卉3</a></li> <li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";                  onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车/汽车3</a></li> </ul>   </div>     <ul  id="shui"  onMouseOver="javascript:showMenu('shui')";         onMouseOut="javascript:hiddenMenu('shui')" > <li><a href="#" >苹果</a></li> <li><a href="#" >香蕉</a></li> <li><a href="#" >猕猴桃</a></li> <li><a href="#" >火龙果</a></li> <li><a href="#" >苹果2</a></li> <li><a href="#" >香蕉2</a></li> <li><a href="#" >猕猴桃2</a></li> <li><a href="#" >火龙果2</a></li> <li><a href="#" >猕猴桃3</a></li> <li><a href="#" >火龙果3</a></li> </ul> <ul  id="hua"   onmouseover="javascript:MM_showHideLayers('hua','','show')";                  onmouseout="javascript:MM_showHideLayers('hua','','hide')"> <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> <li><a href="#" >喇叭花2</a></li> <li><a href="#" >桂花2</a></li> </ul> <ul  id="che"  onmouseover="javascript:MM_showHideLayers('che','','show')";                  onmouseout="javascript:MM_showHideLayers('che','','hide')"> <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> <li><a href="#" >克莱斯勒</a></li> <li><a href="#" >法拉利</a></li> <li><a href="#" >克莱斯勒2</a></li> <li><a href="#" >法拉利2</a></li> </ul>     </body> </html> </font>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

深入解析Vue 组件命名那些事

本篇文章主要介绍了深入解析Vue 组件命名那些事，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收藏 0赞 0分享

Vue学习笔记进阶篇之vue-cli安装及介绍

这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收藏 0赞 0分享

jquery版轮播图效果和extend扩展

这篇文章主要为大家详细介绍了jquery版轮播图效果，以及extend扩展的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收藏 0赞 0分享

jQuery Validate格式验证功能实例代码（包括重名验证）

本文通过实例代码给大家介绍了jQuery Validate格式验证功能，代码中包括重名验证的方法，需要的的朋友参考下吧

收藏 0赞 0分享

Angular.js中angular-ui-router的简单实践

本篇文章主要介绍了Angular.js中angular-ui-router的简单实践，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收藏 0赞 0分享

JavaScript实现二维坐标点排序效果

这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收藏 0赞 0分享

深入理解vue2.0路由如何配置问题

本篇文章主要介绍了vue2.0路由配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收藏 0赞 0分享

基于bootstrap实现多个下拉框同时搜索功能

这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收藏 0赞 0分享

JavaScript 值类型和引用类型的初次研究(推荐)

这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下

收藏 0赞 0分享

利用jQuery异步上传文件的插件用法详解

这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下

收藏 0赞 0分享

查看更多

网络赚钱

更多

站长故事

更多

建站极客

合作伙伴

外卖点餐小程序

QCMS建站系统

小程序SAAS平台

松江网站建设

站长素材网

合同模板网

好听名字网

在线工具

网站地图

建站极客移动版

聚合全网技术文章，根据你的阅读喜好进行个性推荐

© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.

沪ICP备13040166号-22