滑动门菜单

最新推荐文章于 2021-08-03 21:25:57 发布
最新推荐文章于 2021-08-03 21:25:57 发布
阅读量98 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/zhengxiqiang/archive/2008/12/21/1359472.html
版权
<!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=gb2312" />
<title>我的滑动门</title>
<style type="text/css">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active";
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal";
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
}
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:25px;">
<!-- 选项卡0开始 -->
  <div class="nTab">
    <!-- 标题开始 -->
    <div class="TabTitle">
      <ul id="myTab0">
        <li class="active" οnmοuseοver="nTabs(this,0);">全部</li>
        <li class="normal" οnmοuseοver="nTabs(this,1);">日志</li>
        <li class="normal" οnmοuseοver="nTabs(this,2);">咨询</li>
        <li class="normal" οnmοuseοver="nTabs(this,3);">相册</li>
        <li class="normal" οnmοuseοver="nTabs(this,4);">商城</li>
        <li class="normal" οnmοuseοver="nTabs(this,5);">社区</li>
      </ul>
    </div>
    <!-- 内容开始 -->
    <div class="TabContent">
      <div id="myTab0_Content0"> 000 </div>
      <div id="myTab0_Content1" class="none">111</div>
      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
    </div>
  </div>
  <!-- 选项卡0结束 -->
  <!-- 选项卡1开始 -->
  <div class="nTab" style=width:288px>
    <!-- 标题开始 -->
    <div class="TabTitle">
      <ul id="myTab1">
        <li class="active" οnclick="nTabs(this,0);">aaa</li>
        <li class="normal" οnclick="nTabs(this,1);">bbb</li>
        <li class="normal" οnclick="nTabs(this,2);">ccc</li>
        <li class="normal" οnclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    <!-- 内容开始 -->
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
    </div>
  </div>
  <!-- 选项卡1结束 -->
</div>
</body>
</html>

转载于:https://www.cnblogs.com/zhengxiqiang/archive/2008/12/21/1359472.html

weixin_33868027
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滑动门菜单--css自适应宽度滑动门菜单
养有道
06-13 1146
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> a {    display: block;    float:left;    margin:0px 5px;    height: 37px;    line-height: 37px;
JS+CSS实现简易实用的滑动门菜单效果
11-22
在网页设计中，滑动门菜单是一种常见的交互式导航元素，它通过JavaScript和CSS结合来实现，使得用户可以通过鼠标悬停在主菜单项上时，显示或隐藏子菜单。本实例将详细介绍如何使用JS和CSS创建一个简洁且实用的滑动门...
JS+CSS实现简单滑动门(滑动菜单)效果
10-23
主要介绍了JS+CSS实现简单滑动门(滑动菜单)效果,通过JavaScript响应鼠标事件动态设置页面元素样式实现滑动菜单功能,需要的朋友可以参考下
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
weixin_39625709的博客
08-03 127
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果。分享给大家供大家参考。具体如下：这是一个简洁实用的CSS+JavaScript滑动门导航菜单，写时候，我尽量用最少的代码写出兼容性好的代码，希望这款滑动门大家能够喜欢，也希望研究JS的达人一同切磋，共同提高。运行效果截图如下：在线演示地址如下：具体代码如下：简易实用，滑动门*{margin:0;padding:0;}a:link,a:visi...
选项卡代码
恭喜姐姐
01-09 128
关于选项卡的代码太多太多，但是很多都过于复杂，最近在老公的帮助下整出了一个较为精简的，发布上来与大家分享。 window.onload=function(){ var dl1=document.getElementById("fra_head_ft_1"); var dl2=document.getElementById("fra_head_ft_2"); dl1.onclick=fun...
DIV+CSS实现的滑动门菜单特效代码
10-30
带椭圆的滑动门效果代码，是竖排的效果代码，看代码是个很典型的实现效果，推荐大家学习
jquery实现标题字体变换的滑动门菜单效果
10-23
【jQuery实现标题字体变换的滑动门菜单效果详解】 在网页设计中，滑动门菜单是一种常见的交互元素，它能够提供美观且用户友好的导航体验。在这个实例中，我们将探讨如何利用jQuery库来创建一个标题字体变换的滑动门...
JS实现具备延时功能的滑动门菜单效果
11-23
本文实例讲述了JS实现具备延时功能的滑动门菜单效果。分享给大家供大家参考。具体如下： 这是一款鼠标感应时间延迟的滑动门菜单，其实也就是一滑动门，只不过鼠标在移上后不是立即反应，而是稍微迟缓了一下，这样用...
滑动门技术实现的导航菜单
weixin_33845881的博客
12-15 410
站在css2.1的角度实现的demo，在不使用css3多背景的情况下，带有圆角的导航菜单，并且无论菜单文字的多少都能自适应 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&am
滑动门技术菜单滑动门技术菜单
06-12
滑动门技术菜单 滑动门技术菜单 滑动门技术菜单 滑动门技术菜单 滑动门技术菜单 滑动门技术菜单
jquery特效菜单栏特效滑动门技术源码免费下载
11-21
jquery特效菜单栏特效滑动门技术源码免费下载 jquery特效菜单栏特效滑动门技术源码免费下载 jquery特效菜单栏特效滑动门技术源码免费下载 jquery特效菜单栏特效滑动门技术源码免费下载
一组简洁选项卡代码 选项卡
04-17
一组简洁选项卡代码 选项卡 JS 选项卡
实用js+css滑动门导航菜单
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
06-24 969
实用js+css滑动门导航菜单
用DIV+CSS制作滑动门导航菜单 原来如此简单
weixin_33724570的博客
03-05 592
http://bbs.itcast.cn/thread-17158-1-1.html 一、什么是“滑动门”导航菜单1.1“滑动门”处处可见 现在流行的网站设计中，水平导航菜单占据了大壁江山。的确，无论是门户网站还是企事业单位网站，都大量的采用水平的导航菜单设计。而水平导航菜单中，又有绝大多数网站采用“滑动门”设计。什么是滑动门呢？来看下图，是笔者任教的学校的官方主页： 从图中可见...
滑动门菜单技术
Finaldata的专栏
04-26 901
body {font-size:12px;font-family:宋体}ul.TabBarLevel1{ list-style:none; margin:0; padding:0; height:29px; background-image:url(/articleimg/2006/04/3363/tabbar_level1_bk.gif);}ul.TabBarLevel1 li{ float:l
CSS+DIV+Javascript制作滑动门菜单技术
xinrui2009的专栏
06-02 412
body {font-size:12px;font-family:宋体}ul.TabBarLevel1{list-style:none;margin:0;padding:0;height:29px;background-image:url(http://www.webjx.com/upfiles/20060409/20060409082237_tabbar_level1_bk.gif);}ul.T
html 滑动门效果,js实现简洁的左侧滑动门菜单(选项卡)效果代码
最新发布
06-01
以下是使用 JavaScript 实现简洁的左侧滑动门菜单(选项卡)效果的代码： HTML 代码： ``` <div class="menu"> <div class="tab active" data-tab="tab1">Tab 1</div> <div class="tab" data-tab="tab2">Tab 2</div> <div class="tab" data-tab="tab3">Tab 3</div> <div class="slider"></div> </div> <div class="content"> <div class="tab-content active" data-tab="tab1">Content for Tab 1</div> <div class="tab-content" data-tab="tab2">Content for Tab 2</div> <div class="tab-content" data-tab="tab3">Content for Tab 3</div> </div> ``` CSS 代码： ``` .menu { display: flex; flex-direction: column; position: relative; width: 200px; height: 300px; background-color: #f0f0f0; } .tab { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; cursor: pointer; } .tab.active { background-color: #ccc; } .slider { position: absolute; top: 0; left: 0; width: 5px; height: 50px; background-color: #000; transition: transform 0.3s ease-in-out; } .content { flex: 1; padding: 10px; } .tab-content { display: none; } .tab-content.active { display: block; } ``` JavaScript 代码： ``` // 获取菜单和标签页元素 const tabs = document.querySelectorAll('.tab'); const tabContents = document.querySelectorAll('.tab-content'); const slider = document.querySelector('.slider'); // 给菜单项添加事件监听器 tabs.forEach(tab => { tab.addEventListener('click', () => { // 移除所有菜单项的 active 类 tabs.forEach(item => { item.classList.remove('active'); }); // 给当前点击的菜单项添加 active 类 tab.classList.add('active'); // 获取当前菜单项的索引值 const index = Array.from(tabs).indexOf(tab); // 移动滑动门到当前菜单项的位置 slider.style.transform = `translateY(${index * 50}px)`; // 隐藏所有标签页 tabContents.forEach(content => { content.classList.remove('active'); }); // 显示对应的标签页 tabContents[index].classList.add('active'); }); }); ``` 以上代码实现了一个左侧滑动门菜单(选项卡)效果，可以根据实际需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值