编程 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 文本框使用小结

May 22 Javascript

ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)

Jan 13 Javascript

基于jquery的禁用右键、文本选择功能、复制按键的实现代码

Aug 27 Javascript

javascript中的变量作用域以及变量提升详细介绍

Oct 24 Javascript

jquery遍历checkbox介绍

Feb 21 Javascript

jquery实现更改表格行顺序示例

Apr 30 Javascript

js 连续赋值的简单实现

Jun 13 Javascript

vue2实现数据请求显示loading图

Nov 28 Javascript

webpack之引入图片的实现及问题

Oct 08 Javascript

详解VUE单页应用骨架屏方案

Jan 17 Javascript

详解Typescript 内置的模块导入兼容方式

May 31 Javascript

React 条件渲染最佳实践小结(7种)

Sep 27 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

《超神学院》霸气归来, 天使彦上演维多利亚的秘密

2020/03/02 国漫

PHP数组操作汇总 php数组的使用技巧

2011/07/17 PHP

PHP把网页保存为word文件的三种方法

2014/04/01 PHP

浅谈php中变量的数据类型判断函数

2017/03/04 PHP

ThinkPHP框架整合微信支付之刷卡模式图文详解

2019/04/10 PHP

javascript得到XML某节点的子节点个数的脚本

2008/10/11 Javascript

JS 中document.URL 和 windows.location.href 的区别

2009/11/11 Javascript

jquery 学习之二属性(html()与html(val))

2010/11/25 Javascript

获取服务器传来的数据用JS去空格的正则表达式

2012/03/26 Javascript

多次注册事件会导致一个事件被触发多次的解决方法

2013/08/12 Javascript

全面解析Bootstrap表单使用方法（表单控件）

2015/11/24 Javascript

基于javascript实现最简单的选项卡切换效果

2016/05/16 Javascript

javascript js 操作数组增删改查的简单实现

2016/06/20 Javascript

AngularJS点击添加样式、点击变色设置的实例代码

2017/07/27 Javascript

get post jsonp三种数据交互形式实例详解

2017/08/25 Javascript

vue.js实现插入数值与表达式的方法分析

2018/07/06 Javascript

Angular PWA使用的Demo示例

2019/01/31 Javascript

layui 实现自动选择radio单选框(checked)的方法

2019/09/03 Javascript

jquery 插件重新绑定的处理方法分析

2019/11/23 jQuery

vue-calendar-component 封装多日期选择组件的实例代码

2020/12/04 Vue.js

[07:12]2014DOTA2西雅图国际邀请赛黑马Liquid专题采访

2014/07/12 DOTA

Python json 错误xx is not JSON serializable解决办法

2017/03/15 Python

Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】

2018/12/11 Python

Python实现的列表排序、反转操作示例

2019/03/13 Python

Python识别验证码的实现示例

2020/09/30 Python

详解python3 GUI刷屏器(附源码)

2021/02/18 Python

豆腐の盛田屋官网：日本自然派的豆乳面膜、肥皂、化妆水、乳液等

2016/10/08 全球购物

澳大利亚UGG工厂直销：Australian Ugg Boots

2017/10/14 全球购物

英国Radley包德国官网：Radley London德国

2019/11/18 全球购物

Big Green Smile法国：领先的英国有机和天然产品在线商店

2021/01/02 全球购物

俄罗斯极限运动网上商店：Board Shop №1

2020/12/18 全球购物

远程调用的原理

2014/07/05 面试题

下面代码从性能上考虑，有什么问题

2015/04/03 面试题

国庆节演讲稿

2014/05/27 职场文书

森马旗舰店双十一营销方案

2014/09/29 职场文书

Python内置包对JSON文件数据进行编码和解码

2022/04/12 Python