JS+CSS实现简易实用的滑动门菜单效果


Posted in Javascript onSeptember 18, 2015

本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果。分享给大家供大家参考。具体如下:

这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希望这款滑动门大家能够喜欢,也希望研究JS的达人一同切磋,共同提高。

运行效果截图如下:

JS+CSS实现简易实用的滑动门菜单效果

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>简易实用,滑动门</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.subMenu{background:#333;float:left;padding-top:2px;width:100%;}
.subMenu li{float:left;}
.subMenu li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.subMenu .thisStyle a {background:#fff;color:#000;}
.subContent{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.subContent ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<body>
 <ul class="subMenu">
  <li class="thisStyle"><a href="javascript:void(0)">目录</a></li>
  <li><a href="javascript:void(0)">列表</a></li>
  <li><a href="javascript:void(0)">产品</a></li>
  <li><a href="javascript:void(0)">新网</a></li>
 </ul>
 <div class="subContent">
  <ul style="display:block;">
  <li><a href="#">111111</a></li>
  <li><a href="#">111111</a></li>
  <li><a href="#">111111</a></li>
  <li><a href="#">111111</a></li>
  </ul>
  <ul>
  <li><a href="#">222222</a></li>
  <li><a href="#">222222</a></li>
  <li><a href="#">222222</a></li>
  <li><a href="#">222222</a></li>
  </ul>
  <ul>
  <li><a href="#">333333</a></li>
  <li><a href="#">333333</a></li>
  <li><a href="#">333333</a></li>
  <li><a href="#">333333</a></li>
  </ul>
  <ul>
  <li><a href="#">444444</a></li>
  <li><a href="#">444444</a></li>
  <li><a href="#">444444</a></li>
  <li><a href="#">444444</a></li>
  </ul>
 </div>
<script>
function $_class(name){
 var elements = document.getElementsByTagName("*");
 for(s=0;s<elements.length;s++){
  if(elements[s].className==name){
   return  elements[s];
  } 
 }
}
//tab effects
var tabList = $_class("subMenu").getElementsByTagName("li")
 tabCon = $_class("subContent").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
 (function(){
  var t = i;  
  tabList[t].onmouseover = function(){
   for(o=0;o<tabCon.length;o++){
    tabCon[o].style.display = "none";
    tabList[o].className = "";
    if(t==o){
     this.className = "thisStyle";
     tabCon[o].style.display = "block"; 
    }
   }
  } 
 })() 
}
</script>
</bdoy>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 #Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 #Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 #Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 #Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 #Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 #Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 #Javascript
You might like
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
php通过session防url攻击方法
2014/12/10 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
总结对比php中的多种序列化
2016/08/28 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
js的2种继承方式详解
2014/03/04 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python plotly绘制直方图实例详解
2019/07/22 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
促销活动计划书
2014/05/02 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
七年级作文之冬景
2019/11/07 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android