编程 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 在线压缩和格式化收藏

Jan 16 Javascript

jquery操作select详解(取值,设置选中)

Feb 07 Javascript

浅谈javascript回调函数

Dec 07 Javascript

js实现文字跟随鼠标移动而移动的方法

Feb 28 Javascript

JavaScript的事件代理和委托实例分析

Mar 25 Javascript

详解基于javascript实现的苹果系统底部菜单

Dec 02 Javascript

AngularJS中$http的交互问题

Mar 29 Javascript

Node.js调用fs.renameSync报错（Error: EXDEV, cross-device link not permitted）

Dec 27 Javascript

ES6中let 和 const 的新特性

Sep 03 Javascript

小程序实现列表多个批量倒计时

Jan 29 Javascript

layui table 复选框跳页后再回来保持原来选中的状态示例

Oct 26 Javascript

bootstrap-closable-tab可实现关闭的tab标签页插件

Aug 09 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,js双版本

2012/09/25 PHP

php无限分类且支持输出树状图的详细介绍

2013/06/19 PHP

ThinkPHP标签制作教程

2014/07/10 PHP

php微信开发接入

2016/08/27 PHP

JS input文本框禁用右键和复制粘贴功能的代码

2010/04/15 Javascript

Javascript判断图片尺寸大小实例分析

2014/06/16 Javascript

JS实现动态移动层及拖动浮层关闭的方法

2015/04/30 Javascript

原生js获取浏览器窗口及元素宽高常用方法集合

2017/01/18 Javascript

angularJS 指令封装回到顶部示例详解

2017/01/22 Javascript

jQuery上传插件webupload使用方法

2017/08/01 jQuery

js动态设置select下拉菜单的默认选中项实例

2018/08/21 Javascript

vue 2.1.3 实时显示当前时间,每秒更新的方法

2018/09/16 Javascript

vue实现表单录入小案例

2019/09/27 Javascript

详解Vue串联过滤器的使用场景

2020/04/30 Javascript

Element-UI 使用el-row 分栏布局的教程

2020/10/26 Javascript

[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15

2019/08/16 DOTA

python共享引用(多个变量引用)示例代码

2013/12/04 Python

bat和python批量重命名文件的实现代码

2016/05/19 Python

Python 实现文件的全备份和差异备份详解

2016/12/27 Python

Python AES加密实例解析

2018/01/18 Python

使用Python制作表情包实现换脸功能

2019/07/19 Python

Python CSV文件模块的使用案例分析

2019/12/21 Python

python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案

2020/02/18 Python

python图片剪裁代码(图片按四个点坐标剪裁)

2020/03/10 Python

Python更换pip源方法过程解析

2020/05/19 Python

CSS3之多背景background使用示例

2013/10/18 HTML / CSS

纯CSS3单页切换导航菜单界面设计的简单实现

2016/08/16 HTML / CSS

世界上最大的在线旅行社新加坡网站：Expedia新加坡

2016/08/25 全球购物

淘宝网店营销策划书

2014/01/11 职场文书

网上蛋糕店创业计划书

2014/01/24 职场文书

信息合作协议书

2014/10/09 职场文书

2014七年级班主任工作总结

2014/12/05 职场文书

青岛海底世界导游词

2015/02/11 职场文书

自荐信格式模板

2015/03/27 职场文书

幸福终点站观后感

2015/06/04 职场文书

追悼会答谢词范文

2015/09/29 职场文书