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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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
PHP生成UTF8文件的方法
2010/05/15 PHP
apache php模块整合操作指南
2012/11/16 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
jQuery DOM操作实例
2014/03/05 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python数组遍历的简单实现方法小结
2016/04/27 Python
python实现多张图片拼接成大图
2019/01/15 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
如何写python的配置文件
2020/06/07 Python
python logging模块的使用
2020/09/07 Python
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
Oracle快照(snapshot)
2015/03/13 面试题
软件测试笔试题
2012/10/25 面试题
Python是如何进行类型转换的
2013/06/09 面试题
运动会通讯稿400字
2014/01/28 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
社区文化建设方案
2014/05/02 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python