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

Jquery选中或取消radio示例

Sep 29 Javascript

手机号码，密码正则验证

Sep 04 Javascript

js使用DOM操作实现简单留言板的方法

Apr 10 Javascript

js实现类似菜单风格的TAB选项卡效果代码

Aug 28 Javascript

Vue数据驱动模拟实现2

Jan 11 Javascript

jQuery html表格排序插件tablesorter使用方法详解

Feb 10 Javascript

AngularJS实现的2048小游戏功能【附源码下载】

Jan 03 Javascript

vue打包之后生成一个配置文件修改接口的方法

Dec 09 Javascript

微信小程序如何修改radio和checkbox的默认样式和图标

Jul 24 Javascript

JS实现简易留言板（节点操作）

Mar 16 Javascript

使用js获取身份证年龄的示例代码

Dec 11 Javascript

Vue实现手机号、验证码登录（60s禁用倒计时）

Dec 19 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编程语言开发动态WAP页面

2006/10/09 PHP

PHP中实现图片的锐化

2006/10/09 PHP

PHP在字符串中查找指定字符串并删除的代码

2008/10/02 PHP

php分页查询的简单实现代码

2017/03/14 PHP

PHP goto语句用法实例

2019/08/06 PHP

PHP实现计算器小功能

2020/08/28 PHP

JavaScript 异步调用框架 (Part 5 - 链式实现)

2009/08/04 Javascript

一个级联菜单代码学习及removeClass与addClass的应用

2013/01/24 Javascript

javascript学习笔记（六）数据类型和JSON格式

2014/10/08 Javascript

IE10中flexigrid无法显示数据的解决方法

2015/07/26 Javascript

javascript拖拽应用实例

2016/03/25 Javascript

微信小程序 Mustache语法详细介绍

2016/10/27 Javascript

JavaScript 函数节流详解及方法总结

2017/02/09 Javascript

jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

2017/03/15 Javascript

JavaScript转换数据库DateTime字段类型方法

2017/06/27 Javascript

import与export在node.js中的使用详解

2017/09/28 Javascript

react-navigation 如何判断用户是否登录跳转到登录页的方法

2017/12/01 Javascript

Nodejs 发布自己的npm包并制作成命令行工具的实例讲解

2018/05/15 NodeJs

Vue指令指令大全

2019/02/09 Javascript

深入了解js原型模式

2019/05/30 Javascript

CKEditor扩展插件：自动排版功能autoformat插件实现方法详解

2020/02/06 Javascript

python多线程实现同时执行两个while循环的操作

2020/05/02 Python

HTML5 audio标签使用js进行播放控制实例

2015/04/24 HTML / CSS

智利最大的网上商店：Linio智利

2016/11/24 全球购物

Funko官方商店：源自美国，畅销全球搪胶收藏玩偶

2018/09/15 全球购物

某/etc/fstab文件中的某行如下： /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义

2013/09/18 面试题

XML文档定义有几种形式？它们之间有何本质区别？解析XML文档有哪几种方式？

2016/01/12 面试题

中软国际Java程序员笔试题

2014/07/19 面试题

应届毕业生的个人自我鉴定

2013/10/24 职场文书

物流管理专业应届生求职信

2013/11/21 职场文书

董事长秘书岗位职责

2013/11/29 职场文书

西式结婚主持词

2014/03/14 职场文书

社会学专业求职信

2014/07/17 职场文书

个人求职信格式范文

2015/03/20 职场文书

网络销售员岗位职责

2015/04/11 职场文书

JavaScript利用html5新方法操作元素类名详解

2021/11/27 Javascript