用JS实现下拉菜单效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>下拉菜单</title><script type="text/javascript">function displaymenu(li){var submenu=li.getElementsByTagName("ul")[0];submenu.style.display="block";}function undisplaymenu(li){var submenu=li.getElementsByTagName("ul")[0];submenu.style.display="none";}</script><style type="text/css">*{padding:0px;margin:0px;}#nevigation,#nevigation ul{list-style:none;}#nevigation li{float:left;text-align: center;position:relative;}#nevigation li a:link,#nevigation li a:visited{display:block;text-decoration:none;color:#fff;width:82px;height:40px;line-height:40px;border:1px solid #fff;background-color:#255f9e;padding:10px;}#nevigation li a:hover{color:#fff;background-color:#ffb100;}#nevigation li ul{display:none;position:absolute;/*top:40px;margin-top:1px;font-size:12px;      */}</style></head><body><ul id="nevigation"><li onmouseover="displaymenu(this)" onmouseout="undisplaymenu(this)"><a href="#" target="_blank">菜单一</a><ul><li><a href="#" target="_blank">项目一</a></li><li><a href="#" target="_blank">项目二</a></li><li><a href="#" target="_blank">项目三</a></li><li><a href="#" target="_blank">项目四</a></li></ul></li><li onmouseover="displaymenu(this)" onmouseout="undisplaymenu(this)"><a href="#" target="_blank">菜单二</a><ul><li><a href="#" target="_blank">项目一</a></li><li><a href="#" target="_blank">项目二</a></li><li><a href="#" target="_blank">项目三</a></li><li><a href="#" target="_blank">项目四</a></li></ul></li><li onmouseover="displaymenu(this)" onmouseout="undisplaymenu(this)"><a href="#" target="_blank">菜单三</a><ul><li><a href="#" target="_blank">项目一</a></li><li><a href="#" target="_blank">项目二</a></li><li><a href="#" target="_blank">项目三</a></li><li><a href="#" target="_blank">项目四</a></li></ul></li><li onmouseover="displaymenu(this)" onmouseout="undisplaymenu(this)"><a href="#" target="_blank">菜单四</a><ul><li><a href="#" target="_blank">项目一</a></li><li><a href="#" target="_blank">项目二</a></li><li><a href="#" target="_blank">项目三</a></li><li><a href="#" target="_blank">项目四</a></li></ul></li></ul></body>
</html>

代码演示效果：

用JS实现下拉菜单效果相关推荐

用JS控制下拉菜单效果
今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写 ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
用Javascrip写出selelct下拉菜单效果
用Javascrip写出selelct下拉菜单效果话不多说,先上效果图: html代码: <p>2.模拟selelct下拉菜单</p><div class=" ...
php下拉菜单指示图标如何添加,jquery实现很酷的网页顶部图标下拉菜单效果
本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实 ...
HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...

用JS实现下拉菜单效果

用JS实现下拉菜单效果相关推荐

最新文章

热门文章