编程 Javascript

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

Posted in Javascript onSeptember 18, 2015

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

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

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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