编程 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 相关文章推荐

ExtJs中简单的登录界面制作方法

Aug 19 Javascript

JS维吉尼亚密码算法实现代码

Nov 09 Javascript

浅析Js中的单引号与双引号问题

Nov 06 Javascript

javascript中的遍历for in 以及with的用法

Dec 22 Javascript

jquery插件splitScren实现页面分屏切换模板特效

Jun 16 Javascript

JQuery datepicker 用法详解

Dec 25 Javascript

JavaScript重载函数实例剖析

May 13 Javascript

js生成随机颜色方法代码分享（三种）

Dec 29 Javascript

超全面的vue.js使用总结

Feb 12 Javascript

vue与vue-i18n结合实现后台数据的多语言切换方法

Mar 08 Javascript

JavaScript的词法结构精华篇

Oct 17 Javascript

Vue配置marked链接添加target="_blank"的方法

Jul 19 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

在Zeus Web Server中安装PHP语言支持

2006/10/09 PHP

兼容PHP5的PHP目录管理函数库

2008/07/10 PHP

实现获取http内容的php函数分享

2014/02/16 PHP

Zend Framework动作助手Json用法实例分析

2016/03/05 PHP

PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法

2016/05/13 PHP

超强的IE背景图片闪烁(抖动)的解决办法

2007/09/09 Javascript

jquery Firefox3.5中操作select的问题

2009/07/10 Javascript

Google 静态地图API实现代码

2010/11/19 Javascript

JS实现模仿微博发布效果实例代码

2013/12/16 Javascript

回车直接实现点击某按钮的效果即触发单击事件

2014/02/27 Javascript

JavaScript入门系列之知识点总结

2016/03/24 Javascript

浅析jquery数组删除指定元素的方法:grep()

2016/05/19 Javascript

同步文本框内容JS代码实现

2016/08/04 Javascript

js 获取今天以及过去日期

2017/04/11 Javascript

Vue声明式渲染详解

2017/05/17 Javascript

如何通过非数字与字符的方式实现PHP WebShell详解

2017/07/02 Javascript

微信公众平台客服接口发消息的实现代码(Java接口开发)

2019/04/17 Javascript

vue中格式化时间过滤器代码实例

2019/04/17 Javascript

了解Javascript中函数作为对象的魅力

2019/06/19 Javascript

Python3多线程爬虫实例讲解代码

2018/01/05 Python

Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】

2019/01/05 Python

浅谈Python中的全局锁(GIL)问题

2019/01/11 Python

Python中extend和append的区别讲解

2019/01/24 Python

HTML5 UTF-8 中文乱码的解决方法

2013/11/18 HTML / CSS

HTML5 drag和drop具体使用详解

2021/01/18 HTML / CSS

德国童装购物网站：NICKI´S.com

2018/04/20 全球购物

Feelunique美国：欧洲大型的在线美妆零售电商

2018/11/04 全球购物

局域网标准

2016/09/10 面试题

建筑文秘专业个人求职信范文

2013/12/28 职场文书

婚礼证婚人证婚词

2014/01/08 职场文书

简历中个人自我评价分享

2014/03/15 职场文书

会计专业毕业生求职信

2014/07/04 职场文书

上课说话检讨书500字

2014/11/01 职场文书

有关三国演义的读书笔记

2015/06/25 职场文书

Apache Pulsar集群搭建部署详细过程

2022/02/12 Servers

NodeJs使用webpack打包项目的方法详解

2022/02/28 NodeJs