信鸽网

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

  作者：bea

本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果。分享给大家供大家参考。具体如下： 这是一个简洁实用的CSS+JavaScript滑动门导航菜单，写时候，我尽量用最少的代码写出兼容性好的代码，希望这款滑动门大家能够喜欢，也希望研究JS的达人一同切磋，共同提高。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-css-simple-useful-menu-codes/ 具体代码如下： <html><head&

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


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


运行效果截图如下：



在线演示地址如下：


http://demo./js/2015/js-css-simple-useful-menu-codes/


具体代码如下：




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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: