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程序设计有所帮助。

Javascript 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
javascript生成大小写字母
Jul 03 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
小程序自定义日历效果
Dec 29 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
You might like
一个改进的UBB类
2006/10/09 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
vue组件学习教程
2017/09/09 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
如何教少儿学习Python编程
2020/07/10 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
外贸业务员求职信
2014/06/16 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
天河观后感
2015/06/11 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫