编程 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事件列表解说

Dec 22 Javascript

Google Map API更新实现用户自定义标注坐标

Jul 29 Javascript

基于Jquery的跨域传输数据(JSONP)

Mar 10 Javascript

jQuery中获取Radio元素值的方法

Jul 02 Javascript

javascript中replace( )方法的使用

Apr 24 Javascript

JS实现网页游戏中滑块响应鼠标点击移动效果

Oct 19 Javascript

AngularJs定制样式插入到ueditor中的问题小结

Aug 01 Javascript

微信小程序 scroll-view隐藏滚动条详解

Jan 16 Javascript

Bootstrap笔记之缩略图、警告框实例详解

Mar 09 Javascript

js 奇葩技巧之隐藏代码

Aug 11 Javascript

初学者AngularJS的环境搭建过程

Oct 27 Javascript

javascript自定义加载loading效果

Sep 15 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数组(array)输出的三种形式详解

2013/06/05 PHP

PHP实现ftp上传文件示例

2014/08/21 PHP

PHP使用GD库输出汉字的方法【测试可用】

2016/11/10 PHP

php实现XML和数组的相互转化功能示例

2017/02/08 PHP

Yii2数据库操作常用方法小结

2017/05/04 PHP

php工具型代码之印章抠图

2018/07/18 PHP

效率高的Javscript字符串替换函数的benchmark

2008/08/02 Javascript

Javascript 中文字符串处理额外注意事项

2009/11/15 Javascript

JQuery开发的数独游戏代码

2010/10/29 Javascript

jquery 简短几句代码实现给元素动态添加及获取提示信息

2011/09/01 Javascript

jQuery之日期选择器的深入解析

2013/06/19 Javascript

js实现无需数据库的县级以上联动行政区域下拉控件

2013/08/14 Javascript

BootStrap智能表单实战系列(四)表单布局介绍

2016/06/13 Javascript

js实现把图片的绝对路径转为base64字符串、blob对象再上传

2016/12/29 Javascript

js轮播图透明度切换（带上下页和底部圆点切换）

2017/04/27 Javascript

使用Angular CLI从蓝本生成代码详解

2018/03/24 Javascript

使用iView Upload 组件实现手动上传图片的示例代码

2018/10/01 Javascript

vue中promise的使用及异步请求数据的方法

2018/11/08 Javascript

微信小程序实现的3d轮播图效果示例【基于swiper组件】

2018/12/11 Javascript

layui文件上传控件带更改后数据传值的方法

2019/09/23 Javascript

[01:06]DOTA2隆重推出2016冬季勇士令状内含上海特级锦标赛互动指南

2016/02/17 DOTA

深度剖析使用python抓取网页正文的源码

2014/06/11 Python

Python argv用法详解

2016/01/08 Python

pygame 精灵的行走及二段跳的实现方法(必看篇)

2017/07/10 Python

python使用Pycharm创建一个Django项目

2018/03/05 Python

python使用筛选法计算小于给定数字的所有素数

2018/03/19 Python

matplotlib 输出保存指定尺寸的图片方法

2018/05/24 Python

详解Python最长公共子串和最长公共子序列的实现

2018/07/07 Python

使用 Python 玩转 GitHub 的贡献板(推荐)

2019/04/04 Python

使用Python代码实现Linux中的ls遍历目录命令的实例代码

2019/09/07 Python

PyCharm 在Windows的有用快捷键详解

2020/04/07 Python

一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系

2020/07/03 Python

scrapy处理python爬虫调度详解

2020/11/23 Python

销售找工作求职信

2013/12/20 职场文书

六个一活动实施方案

2014/03/21 职场文书

MySQL GRANT用户授权的实现

2021/06/18 MySQL