JS+CSS实现简单的二级下拉导航菜单效果
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下:
这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./1999/xhtml"> <head> <title>CSS二级下拉导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';} #mainNavBar{width:100%;background:#999;padding:10px 0;} #nav{width:760px;height:30px;margin:0 auto;} #nav ul{padding:0;margin:0;} #nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;} #nav ul li a{display:block;color:#fff;text-decoration:none;} #nav ul li a:hover{font-weight:bold;background:#666;} #subNav{position:absolute;width:150px;:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;} #subNav a{text-decoration:none;font-weight:normal;display:block;} #subNav a:hover{color:#f00;background:#f00;} </style> </head> <body> <div id="mainNavBar"> <div id="nav"> <ul> <li> <a href="#">添加</a> <div id="subNav"> <a href="#">日志</a> <a href="#">分类</a> </div> </li> <li> <a href="#">管理</a> <div id="subNav"> <a href="#">分类</a> <a href="#">文章</a> </div> </li> <li> <a href="#">扩展</a> <div id="subNav"> <a href="#">评论管理</a> <a href="#">留言管理</a> <a href="#">注销退出</a> </div> </li> </ul> </div> </div> <script language="javascript"> var nav=document.getElementById("nav").getElementsByTagName("li"); for(i=0;i<nav.length;i++){ nav[i].onmouseover=function(){ this.style.fontWeight="bold"; this.style.overflow="visible"; this.style.background="#666666"; } nav[i].onmouseout=function(){ this.style.fontWeight="normal"; this.style.background="#999999" this.style.overflow="hidden"; } } </script> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程