这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这是一个 CSS 和 js 结合的下拉菜单,经测试支持主流浏览器,比较适合企业站,需要的朋友可以参考下
首先声明:
本人虽然在 web 前端岗位干了好多年,但无奈岗位对技术要求不高。html,css 用的比较多,JavaScript 自己原创的很少,基本都是 copy 修改,所以自己真正动手写时,发现基础很不牢固,边学习边实践,收获很大。
效果图:
不废话了,贴码了
1、css 代码
- a: link {
- color: white;
- text - decoration: none;
- }
- a: visited {
- color: white;
- text - decorative: none;
- }
- a: hover {
- color: white;
- text - decorative: none;
- }
- a: active {
- color: white;
- text - decorative: none;
- }
- li {
- float: left;
- display: inline;
- background - color: #003366;
- width: 120px;
- text - align: center;
- margin: 2px;
- padding: 10px 0 5px 0;
- position: relative;
- }.limouseover {
- background - color: #0033ff;
- color: red;
- }.limouseout {
- background - color: #003366;
- color: black;
- }
- li ul {
- display: none;
- width: 120px;
- position: absolute;
- left: 0;
- top: 30px;
- }
- li ul li {
- margin: 0px auto;
- border - top: 1px solid#006699;
- }
2、JavaScript 代码
- <script language=javascript>
- function menu(menu1) {
- //鼠标移入移出classname切换和子菜单隐藏、显示切换。
- if (document.getElementById(menu1)) {
- var menu_ul = document.getElementById(menu1);
- if (menu_ul.getElementsByTagName("li").length) {
- var menu_li = menu_ul.getElementsByTagName("li");
- for (i in menu_li) {
- menu_li[i].onmouseover = function() {
- this.className = "limouseover";
- if (this.getElementsByTagName("ul").length) {
- this.getElementsByTagName("ul")[0].style.display = "block";
- }
- }
- menu_li[i].onmouseout = function() {
- this.className = "limouseout";
- if (this.getElementsByTagName("ul").length) {
- this.getElementsByTagName("ul")[0].style.display = "none";
- }
- }
- }
- }
- }
- }
- </script>
3、html 代码
var menu1=new menu("menu1");
- <ul id=menu1>
- <li>
- <a href="">
- 首页
- </a>
- </li>
- <li>
- <a href="">
- 菜单1菜单1
- </a>
- <ul>
- <li>
- <a href="">
- 子菜单1子菜单1子菜单1子菜单1
- </a>
- </li>
- <li>
- <a href="">
- 子菜单2
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="">
- 菜单2
- </a>
- <ul>
- <li>
- <a href="">
- 子菜单1子菜单1子菜单1子菜单1
- </a>
- </li>
- <li>
- <a href="">
- 子菜单2
- </a>
- </li>
- </ul>
- </li>
- </ul>
说明:
1、考虑到 ul 和 li 页面用的比较多,可以在 css 前加入 #menu1,以对菜单样式进行范围限制。
2、js 主要是对鼠标移入和移除事件进行了侦听,对应切换到 limouseover 和 limouseout 样式;同时对子菜单的 display 属性进行更改,达到显示隐藏的功能。
3、同一个页面可以重复调用,不冲突,html 代码中的 JavaScript 代码是调用实例,前面的 menu1 为任意变量名,括号内的 menu1 为 html 页面中的 id。
本例的缺点:
1、菜单 li 的 mouseover、mouseout 和子菜单 li 的样式一样,即同一个颜色和字体,没有实现单独设置。
2、由于要兼容 Ie6 和 ie7,所以其中采用 position:absolute 的同时,增加了 left 和 top 属性,top 要根据菜单 li 的整体高度设定。
来源: http://www.phperz.com/article/17/0621/274630.html