HTML/CSS方法和JavaScript方法实现下拉菜单
2016-10-27 17:05
671 查看
最近在做一个简单的网页,模仿我们学校的官网页面。上次做的那个企业网站已经实现了这个网页的大部分模块,主要的技术难点是导航菜单的二级下拉菜单。我在慕课网上找到了一个课程,名字叫形形色色的下拉菜单。里面有用CSS,JavaScript和JQuery实现各种下拉菜单的课程。目前为止,我还只学习了HTML,CSS,JavaScript的基础知识,所以我只用了两种最基本的方法实现二级菜单。
一.HTML/CSS方法实现下拉菜单
做出来的效果如下:
三.存在的问题
1.案例中的列表宽度都是固定的,要让一级列表块宽度自适应,可以使用padding来解决。
2.二级列表目前我只会使用固定宽度,字数一多就会自动换行,特别难看,padding好像解决不了这个问题。在网上搜索了很多,暂时没有发现解决办法。如果谁有什么好办法,请告诉我。
一.HTML/CSS方法实现下拉菜单
<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;} ul li{ line-height:40px; text-align:center; position:relative;float:left} a{ text-decoration:none; color:#000; display:block; width:90px;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none;margin-top:2px; background-color:#eee; } ul li ul{width:90px; position:absolute; display:none;} ul li:hover ul{display:block; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a> <ul> <li>JavaScript</li> <li>JQuery</li> </ul> </li> <li><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>二.JS方法实现下拉菜单显示和隐藏
<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px; padding:0px;} body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;} #nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;} ul{ list-style:none;} ul li{ float:left; line-height:40px; text-align:center; width:100px;} a{ text-decoration:none; color:#000; display:block;} a:hover{ color:#F00; background-color:#666;} ul li ul li{ float:none;background-color:#eee; margin:2px 0px;} ul li ul{ display:none; } </style> <script type="text/javascript"> function ShowSub(li) { var subMenu = li.getElementsByTagName("ul")[0] ; subMenu.style.display = "block"; } function HideSub(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; } </script> </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li onmouseover="ShowSub(this)"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">Html/CSS</a></li> </ul> </li> <li onmouseover="HideSub(this)" ><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">实例练习</a></li> <li><a href="#">问与答</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>
做出来的效果如下:
三.存在的问题
1.案例中的列表宽度都是固定的,要让一级列表块宽度自适应,可以使用padding来解决。
2.二级列表目前我只会使用固定宽度,字数一多就会自动换行,特别难看,padding好像解决不了这个问题。在网上搜索了很多,暂时没有发现解决办法。如果谁有什么好办法,请告诉我。
相关文章推荐
- Html+css、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果
- HTML+CSS+JavaScript实现简易下拉菜单
- 下拉菜单效果的实现方法----css+javascript
- HTML/CSS方法实现下拉菜单
- -第1章 HTMLCSS方法实现下拉菜单
- CSS两种实现下拉菜单的方法
- html静态页面传递参数-利用JavaScript方法实现静态
- 用CSS实现下拉菜单的多种方法
- 使用MVC中的HtmlHelper对象的ActionLink方法,实现一个Javascript:void(0)效果,去调用一个JS方法
- 用CSS实现下拉菜单的多种方法
- jsbeautifier + JScript.NET/JavaScript 编程实现 JavaScript、HTML、CSS 代码格式化脚本命令行工具 并集成到 EditPlus
- 纯div+css实现下拉菜单 http://www.zhangmeigong.cn/post/xiala.html
- 禁用IE的后退按钮|显示网页已过期|几种语言的实现方法|c#|javascript|html
- javaScript+DIV+CSS实现下拉菜单
- CSS 实践:两种实现下拉菜单的方法
- 用CSS实现下拉菜单的多种方法
- 用CSS实现下拉菜单的多种方法
- 用javascript实现html页面之间的参数传递的四种方法
- 【html&css】CSS圆角框的实现方法
- html静态页面传递参数-利用JavaScript方法实现静态