编程 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 文档碎片

Jul 13 Javascript

jQuery实现MSN中文网滑动Tab菜单效果代码

Sep 09 Javascript

javascript html5轻松实现拖动功能

Mar 01 Javascript

JavaScript设计模式之代理模式详解

Jun 09 Javascript

vue-router传参用法详解

Jan 19 Javascript

Vue解析带html标签的字符串为dom的实例

Nov 13 Javascript

vue实现计算器功能

Feb 22 Javascript

原生js实现随机点名

Jul 05 Javascript

JavaScript 几种循环方式以及模块化的总结

Sep 03 Javascript

vue 基于abstract 路由模式实现页面内嵌的示例代码

Dec 14 Vue.js

详解JS ES6编码规范

May 07 Javascript

vue Element-ui表格实现树形结构表格

Jun 07 Vue.js

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 多线程上下文中安全写文件实现代码

2009/12/28 PHP

发款php蜘蛛统计插件只要有mysql就可用

2010/10/12 PHP

php生成excel文件的简单方法

2014/02/08 PHP

php开启与关闭错误提示适用于没有修改php.ini的权限

2014/10/16 PHP

Sublime里直接运行PHP配置方法

2014/11/28 PHP

php绘制一个矩形的方法

2015/01/24 PHP

Laravel中如何增加自定义全局函数详解

2017/05/09 PHP

PHP判断是否是微信打开,浏览器打开的方法

2018/03/14 PHP

对YUI扩展的Gird组件 Part-1

2007/03/10 Javascript

将CKfinder整合进CKEditor3.0的新方法

2010/01/10 Javascript

基于jquery的兼容各种浏览器的iframe自适应高度的脚本

2010/08/13 Javascript

讨论html与javascript在浏览器中的加载顺序问题

2013/11/27 Javascript

JavaScript中获取样式的原生方法小结

2014/10/08 Javascript

浅谈轻量级js模板引擎simplite

2015/02/13 Javascript

深入学习JavaScript对象

2015/10/13 Javascript

AngularJS入门教程之迭代器过滤详解

2016/08/18 Javascript

浅谈js script标签中的预解析

2016/12/30 Javascript

JS操作input标签属性checkbox全选的实现代码

2017/03/02 Javascript

jquery dataTable 获取某行数据

2017/05/05 jQuery

Angular 4依赖注入学习教程之ClassProvider的使用（三）

2017/06/04 Javascript

Node之简单的前后端交互(实例讲解)

2017/11/14 Javascript

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

2018/11/28 Javascript

Vue项目中使用jsonp抓取跨域数据的方法

2019/11/10 Javascript

Vuex中的Mutations的具体使用方法

2020/06/01 Javascript

Vue前端判断数据对象是否为空的实例

2020/09/02 Javascript

python批量提取word内信息

2015/08/09 Python

python爬虫使用cookie登录详解

2017/12/27 Python

python实现教务管理系统

2018/03/12 Python

python实现画循环圆

2019/11/23 Python

财务会计专业个人求职信范本

2014/01/08 职场文书

高中语文教学反思

2014/01/16 职场文书

大学生党员个人剖析材料

2014/10/08 职场文书

2014年电话客服工作总结

2014/12/09 职场文书

公务员考察材料范文

2014/12/23 职场文书

比较几种Redis集群方案

2021/06/21 Redis

MySQL串行化隔离级别(间隙锁实现)

2022/06/16 MySQL