您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 网站常用 >

    简洁网页滑动门菜单代码

    时间:2013-12-26 08:46 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • 一款风格简洁的网页滑动门代码,基于JS和Div CSS实现。滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以。
    • <!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>
      <title>网页滑动门菜单[www.codesocang.com]</title>
      <style>
      * {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}
      .tab{  margin:20px; width:244px; height:200px; overflow:hidden; border:1px #AACCEE solid;}
      .tab_b{ overflow:hidden; margin:5px; }
      .menu{overflow:hidden; }
      .menu li{ display:block; float:left; display: list-item; text-align:center; width:60px; background-color:#EDF4FC;line-height:20px; border-bottom:1px #AACCEE solid;border-right:1px #AACCEE solid; }
      .menu li a{ display:block;}
      .menu_d{border-bottom:1px #FFFFFF solid;background-color:#FFFFFF; }
      .tab ul li.aaa{background: #FFFFFF;border-bottom:0px #FFFFFF solid;}
      </style>
      </head>
      <body>
      <script language="javascript">
      function tabs(n)
      {
      var len = 4;
      for (var i = 1; i <= len; i++)
      {
      document.getElementById('tab_a' + i).style.display = (i == n) ? 'block' : 'none';
      document.getElementById('tab_' + i).className = (i == n) ? 'aaa' : 'none';
      }
      }
      </script>
      <div class="tab">
      <ul class="menu" id="menutitle">
      <li id="tab_1" class="aaa"><a href="javascript:void(0)" onclick="tabs('1');" >新闻</a></li>
      <li id="tab_2" ><a href="javascript:void(0)" onmouseover="tabs('2');" >生活</a></li>
      <li id="tab_3" ><a href="javascript:void(0)" onmouseover="tabs('3');" >滚动</a></li>
      <li id="tab_4" ><a href="javascript:void(0)" onmouseover="tabs('4');" >旅游</a></li>
      </ul>
      <div class="tab_b" id="tab_a1" style="display:block;"> 国内国际新闻</div>
      <div class="tab_b" id="tab_a2" style="display:none;">本土快乐生活</div>
      <div class="tab_b" id="tab_a3" style="display:none;">适时新闻滚动</div>
      <div class="tab_b" id="tab_a4" style="display:none;">期待完美假日</div>
      </div>
      </body>
      </html>

    简洁网页滑动门菜单代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/wangzhan/6523.html
    标签:网站源码