编程 Javascript

js+css实现导航效果实例

Posted in Javascript onFebruary 10, 2015

本文实例讲述了js+css实现导航效果的方法。分享给大家供大家参考。具体实现方法如下：

1. 程序代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>CSS+JS实现兼容性很好的无限级下拉菜单</title>  

<style type="text/css">  

*{ margin:0; padding:0; border:0;}  

body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}  

.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}  

a:link{ color:#000; text-decoration:none; }  

a:visited{ color:#000; text-decoration:none; }  

a:hover{ color:#000; text-decoration:none; }  

.menu{ width:778px; height:26px; background:#fff; margin:0 auto;}  

.menusel{ float:left;width:100px; position:relative; height:25px; background:#ddd; line-height: 25px; margin-left: 1px; *margin-left: 0px;_margin-left: -1px;}  

.menusel h2{ font-size:12px; }  

.menusel a{ display: block;text-align:center; width:100px;border:1px solid #a4a4a4; height:25px; border-bottom:1px solid #a4a4a4; position:relative; z-index:2;}  

.menusel a:hover{ border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2; height:25px;}  

.ahover a{border-bottom:1px dashed #eeeeee; background:#eeeeee; }  

.position{ position:absolute; z-index:1;}  

.menusel ul{width:125px; background:#eee; border:1px solid #a4a4a4; margin-top: -1px; position:relative; z-index:1; display:none;}  

.menusel .block{ display:block;}  

.typeul li{border-bottom:1px dashed #a4a4a4;width:125px; position:relative; float:left; }  

.typeul li a{ border:none;width:125px; }  

.typeul li a:hover{ border:none; background:#ddd;}  

.typeul{  margin-left:0;  }  

.typeul ul{left:125px; top:0; position:absolute;}  

.fli{ margin-left: -1px; border-left:#eeeeee solid 1px;}  

.menusel .lli{ border:none; }  

</style>  

<script type="text/javascript">document.execCommand("BackgroundImageCache", false, true);</script><!-- IE6背景图片闪烁问题  -->  

</head>  

<body>  

<div class="menu">  

 <div id="menu1" class="menusel">  

  <h2><a href="/">菜单1</a></h2>  

   <div class="position">  

    <ul class="clearfix typeul">  

     <li><a href="https://3water.com">菜单选项1-2</a></li>  

     <li>  

      <a href="#">菜单选项1-2</a>  

      <ul>  

       <li class="fli"><a href="#">菜单选项1-2-1</a></li>  

       <li class="lli"><a href="#">菜单选项1-2-2</a></li>  

      </ul>  

     </li>  

     <li><a href="https://3water.com">菜单选项1-2</a></li>  

     <li class="lli"><a href="#">菜单选项1-2</a></li>  

    </ul>  

   </div><!-- position -->  

  </div><!-- menusel -->  

  <div id="menu2" class="menusel">  

  <h2><a href="#">菜单2</a></h2>  

  <div class="position">  

  <ul class="clearfix typeul">  

  <li><a href="#">菜单选项2-2</a></li>  

  <li><a href="#">菜单选项2-2</a>  

  <ul>  

  <li class="fli"><a href="#">菜单选项2-2-1</a></li>  

  <li class="lli"><a href="#">菜单选项2-2-2</a>  

  <ul>  

  <li class="fli"><a href="#">菜单选项2-2-1</a></li>  

  <li class="lli"><a href="#">菜单选项2-2-2</a>  

  </li>  

  </ul>  

  </li>  

  </ul>  

  </li>  

  <li><a href="#">菜单选项2-2</a></li>  

  <li class="lli"><a href="#">菜单选项2-2</a></li>  

  </ul>  

  </div><!-- position -->  

  </div><!-- menusel -->  

  <div id="menu3" class="menusel">  

  <h2><a href="#">菜单3</a></h2>  

  <div class="position">  

  <ul class="clearfix typeul">  

  <li><a href="#">菜单选项3-2</a></li>  

  <li><a href="#">菜单选项3-2</a>  

  <ul>  

  <li class="fli"><a href="#">菜单选项3-2-1</a></li>  

  <li class="lli"><a href="#">菜单选项3-2-2</a>  

  <ul>  

  <li class="fli"><a href="#">菜单选项3-2-1</a></li>  

  <li class="lli"><a href="#">菜单选项3-2-2</a>  

  <ul>  

  <li class="fli"><a href="#">菜单选项3-2-1</a></li>  

  <li class="lli"><a href="#">菜单选项3-2-2</a></li>  

  </ul>  

  </li>  

  </ul>  

  </li>  

  </ul>  

  </li>  

  <li><a href="#">菜单选项3-2</a></li>  

  <li class="lli"><a href="#">菜单选项3-2</a></li>  

  </ul>  

  </div><!-- position -->  

 </div><!-- menusel -->  

</div><!-- menu -->  

 <script type="text/javascript">  

 for(var x = 1; x < 4; x++)  

 {  

 var menuid = document.getElementById("menu"+x);  

 menuid.num = x;  

 type();  

 }  

 function type()  

 {  

 var menuh2 = menuid.getElementsByTagName("h2");  

 var menuul = menuid.getElementsByTagName("ul");  

 var menuli = menuul[0].getElementsByTagName("li");  

 menuh2[0].onmouseover = show;  

 menuh2[0].onmouseout = unshow;  

 menuul[0].onmouseover = show;  

 menuul[0].onmouseout = unshow;  

 function show()  

 {  

 menuul[0].className = "clearfix typeul block"  

 }  

 function unshow()  

 {  

 menuul[0].className = "typeul"  

 }  

 for(var i = 0; i < menuli.length; i++)  

  {  

  menuli[i].num = i;  

  var liul = menuli[i].getElementsByTagName("ul")[0];  

   if(liul)  

   {  

   typeshow()  

   }  

  }  

 function typeshow()  

 {  

 menuli[i].onmouseover = showul;  

 menuli[i].onmouseout = unshowul;  

 }  

 function showul()  

 {  

 menuli[this.num].getElementsByTagName("ul")[0].className = "block";  

 }  

 function unshowul()  

 {  

 menuli[this.num].getElementsByTagName("ul")[0].className = "";  

 }  

 }  

 </script>  

</body>  

</html>

2. 程序效果

js+css实现导航效果实例

希望本文所述对大家的javascript程序设计有所帮助。

js+css实现导航效果实例

- Author -

woshisap

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript实例教程(19) 使用HoTMetal(1)

Dec 23 Javascript

js类中的公有变量和私有变量

Jul 24 Javascript

JQuery jsonp 使用示例代码

Aug 12 Javascript

用jQuery实现一些导航条切换,显示隐藏的实例代码

Jun 08 Javascript

Javascript学习笔记之数组的遍历和 length 属性

Nov 23 Javascript

jQuery前端框架easyui使用Dialog时bug处理

Dec 05 Javascript

js格式化输入框内金额、银行卡号

Feb 01 Javascript

node.js发送邮件email的方法详解

Jan 06 Javascript

微信小程序开发之麦克风动画帧动画放大淡出

Apr 18 Javascript

javascript获取指定区间范围随机数的方法

Sep 08 Javascript

JS实现简单获取最近7天和最近3天日期的方法

Apr 18 Javascript

vue router 传参获取不到的解决方式

Nov 13 Javascript

jquery.mobile 共同布局遇到的问题小结

Feb 10 #Javascript

jquery中EasyUI使用技巧小结

Feb 10 #Javascript

javascript操作符"!~"详解

Feb 10 #Javascript

JavaScript中的标签语句用法分析

Feb 10 #Javascript

jquery动态添加删除(tr/td)

Feb 09 #Javascript

javascript模拟map输出与去除重复项的方法

Feb 09 #Javascript

JavaScript设置body高度为浏览器高度的方法

Feb 09 #Javascript

You might like

php实现的通用图片处理类

2015/03/24 PHP

php.ini中的request_order推荐设置

2015/05/10 PHP

PHP查看SSL证书信息的方法

2016/09/22 PHP

编写跨浏览器的javascript代码必备[js多浏览器兼容写法]

2008/10/29 Javascript

关于firefox的ElementTraversal 接口使用说明

2010/11/11 Javascript

JavaScript高级程序设计（第3版）学习笔记13 ECMAScript5新特性

2012/10/11 Javascript

jQuery ui插件的使用方法代码实例

2013/05/08 Javascript

js与jquery获取父元素,删除子元素的两种不同方法

2014/01/09 Javascript

JavaScript网页定位详解

2014/01/13 Javascript

推荐9款炫酷的基于jquery的页面特效

2014/12/07 Javascript

jquery实现通用的内容渐显Tab选项卡效果

2015/09/07 Javascript

基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏

2016/01/07 Javascript

你一定会收藏的Nodejs代码片段

2016/02/04 NodeJs

js获取时间精确到秒（年月日）

2016/03/16 Javascript

JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)

2016/08/02 Javascript

jquery实现垂直和水平菜单导航栏

2020/08/27 Javascript

jQuery特殊符号转义的实现

2016/11/30 Javascript

React Native react-navigation 导航使用详解

2017/12/01 Javascript

在vue项目中正确使用iconfont的方法

2018/09/28 Javascript

JavaScript冒泡算法原理与实现方法深入理解

2020/06/04 Javascript

[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2

2018/06/03 DOTA

Python高效编程技巧

2013/01/07 Python

在Python中使用PIL模块对图片进行高斯模糊处理的教程

2015/05/05 Python

Python中的单行、多行、中文注释方法

2018/07/19 Python

对python字典过滤条件的实例详解

2019/01/22 Python

python 将字符串完成特定的向右移动方法

2019/06/11 Python

python函数与方法的区别总结

2019/06/23 Python

Python任务自动化工具tox使用教程

2020/03/17 Python

对python中各个response的使用说明

2020/03/28 Python

python文件编写好后如何实践

2020/07/07 Python

python中uuid模块实例浅析

2020/12/29 Python

美国零售商店：Blue&Cream

2017/04/07 全球购物

Tuckernuck官网：经典的美国品质服装、鞋子和配饰

2021/01/11 全球购物

Why we need EJB

2016/10/20 面试题

楼面经理岗位职责范本

2014/02/18 职场文书

关于战胜挫折的名言警句大全！

2019/07/05 职场文书