Home > Article > Web Front-end > JS CSS realizes the sliding door effect with small triangle guidance_javascript skills

JS CSS realizes the sliding door effect with small triangle guidance_javascript skills

WBOYOriginal: 2016-05-16 15:38:281195browse

The example in this article describes the JS CSS implementation of the sliding door effect with small triangle guidance. Share it with everyone for your reference. The details are as follows:

This is a JS CSS sliding door with a small triangle guide. Some friends said that the effect cannot be seen under IE6. In fact, it can be seen because the color of the small triangle is relatively light, and sometimes it is difficult to see it due to the monitor. Clear, in fact, you can control this color, just change it. With the triangular guide, the structure of the entire sliding door is clearer and the guidance is more reasonable.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
body{
 padding:30px;
}
.tabsBox{ width:400px; margin:20px auto;}
.tabs{ height:20px;}
.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}
.tabs li span{ display:none;}
.tabs .cur{ background-color:#f0f0f0;}
.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}
.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}
.cons ul li{ list-style:none; line-height:20px;}
.hidden{ display:none;}
.block{ display:block;}
</style>
</head>
<body>
<div class="tabsBox">
 <ul id="Tabs" class="tabs">
  <li class="cur">最新更新<span></span></li>
  <li>推荐下载<span></span></li>
  <li>下载排行<span></span></li>
  <li>本月排行<span></span></li>
 </ul>
 <div id="TabsCon" class="cons">
  <ul>
  <li><a href="#" target="_blank">基于JavaScript的气泡提示网页版</a></li><li><a href="#" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li><li><a href="#" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li><li><a href="#" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li><li><a href="#" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="#" target="_blank">VB餐厅POS收银软件</a></li></ul>
 <ul>
 <li><a href="#" target="_blank">VB餐厅POS收银软件</a></li><li><a href="#" target="_blank">VB 6.0 简体中文标准版</a></li><li><a href="#" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li><li><a href="#" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li><li><a href="#" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>
 </ul>
 <ul>
 <li><a href="#" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li><li><a href="#" target="_blank">jQuery单行新闻滚动</a></li><li><a href="#" target="_blank">经典的jQuery多行文本滚动</a></li><li><a href="#" target="_blank">JS图片切换学习版，没有过多修饰</a></li><li><a href="#" target="_blank">漂浮广告代码，Js演示</a></li><li><a href="#" target="_blank">边滚边停的JS图片滚动</a></li></ul>
 <ul>
 <li><a href="#" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li><li><a href="#" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li><li><a href="#" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li><li><a href="#" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li><li><a href="#" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li>
 </ul>
 </div>
</div>
<script type="text/javascript">
 var lis = document.getElementById("Tabs").getElementsByTagName("li");
 var uls = document.getElementById("TabsCon").getElementsByTagName("ul");
 var order = 0;
 for(var i=0; i<lis.length; i++){
  lis[i].value = i;
  lis[i].onmouseover = function(){
   ChangeTabs(this.value); 
  };
  uls[i].className = "hidden";
 }
 lis[order].className = "cur";
 uls[order].className = "block";
 function ChangeTabs(nowTab){
  lis[order].className = "";
  uls[order].className = "hidden";
  order = nowTab
  lis[nowTab].className = "cur";
  uls[nowTab].className = "block";
 }
</script>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：QQ login background flashing effect with effect demonstration source code download_Basic knowledgeNext article：QQ login background flashing effect with effect demonstration source code download_Basic knowledge

See more

JS CSS realizes the sliding door effect with small triangle guidance_javascript skills

Related articles