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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
js字符串与Unicode编码互相转换
May 17 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+DBM的同学录程序(4)
2006/10/09 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
django+mysql的使用示例
2018/11/23 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
python else语句在循环中的运用详解
2020/07/06 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
编辑个人求职信范文
2013/09/21 职场文书
行政助理岗位职责
2013/11/10 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
发票退票证明
2015/06/24 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers