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 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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+DBM的同学录程序(3)
2006/10/09 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
就业协议书怎么填
2014/04/11 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2014年民政工作总结
2014/11/26 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
五年级作文之成长
2019/09/16 职场文书