首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
js css后面所带参数含义介绍
Aug 18 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
js获取json元素数量的方法
Jan 27 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
vue实现购物车的监听
Apr 20 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 #Javascript
jquery中EasyUI使用技巧小结
Feb 10 #Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 #Javascript
JavaScript中的标签语句用法分析
Feb 10 #Javascript
jquery动态添加删除(tr/td)
Feb 09 #Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 #Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 #Javascript
索尼(5) 电路图(1) ICF-7600(1) 短波(1) 德劲(5) 天线(6) 电台(1) PL-880(1) 发报机(1) SONY(15)
You might like
php设计模式 Factory(工厂模式)
2011/06/26 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
Augularjs-起步详解
2016/07/08 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
DataReader和DataSet的异同
2014/12/31 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
学生喝酒检讨书
2014/02/06 职场文书
销售提升方案
2014/06/07 职场文书
保险专业求职信
2014/07/07 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
授权委托书
2014/09/17 职场文书
小学教师工作总结2015
2015/04/07 职场文书
捐书仪式主持词
2015/07/04 职场文书
Redis实现订单过期删除的方法步骤
2022/06/05 Redis