zoukankan      html  css  js  c++  java
  • 很酷的伸缩导航菜单效果,可自定义样式和菜单项。

    <!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" />
    <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
    <meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
    <style type="text/css">
    *{margin:0; padding:0;}
    body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}
    #box{200px; border:1px solid #ccc;}
    .title{ font-size:12px; padding-left:3px; height:20px; border-bottom:1px solid #fff; background:#000; line-height:20px; color:#FFF; cursor:pointer;}
    .content{ padding:5px; height:150px;}
    </style>
    <script type="text/javascript">
    function flexMenu(id)
    {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    var $id = document.getElementById(id);
    var titleList = $id.getElementsByTagName('h2');
    var contentList = $id.getElementsByTagName('div');
    titleList[titleList.length-1].style.border = 'none';
    for(var i=0;i<titleList.length;i++)
    {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    titleList[i].onclick = function()
    {
    for(var a=0;a<contentList.length;a++)
    {
    contentList[a].style.display = 'none';
    }
    if(this.nextSibling.nodeType=='3')
    {
    this.nextSibling.nextSibling.style.display = '';
    }else
    {
    this.nextSibling.style.display = '';
    }
    }
    }
    }
    window.onload = function(){ flexMenu('box')}
    </script>
    <title>很酷的伸缩导航菜单,sky整理收集。</title>
    </head>
    <body>
    <a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
    <!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
    <div id="box">
    <h2 class="title">站长特效</h2>
    <div class="content" ><a href="http://zzjs.net/?cat=1">站长特效频道子菜单</a></div>
    <h2 class="title">网页特效</h2>
    <div class="content" style="display:none;"><a href="http://zzjs.net/?cat=2">网页特效子菜单</a></div>
    <h2 class="title">广告代码</h2>
    <div class="content" style="display:none;"><a href="http://zzjs.net/?cat=11">广告代码子菜单</a></div>
    </div>
    </body>
    </html>

  • 相关阅读:
    Markdown 入门指南
    跨域
    正则表达式之基础(二)
    Java并发编程 ReentrantLock是如何通过AbstractQueuedSynchronizer(AQS)来加锁解锁的
    Java异步编程工具 CompletableFuture
    IntelliJ idea evaluate expression
    Java Arrays.asList 返回的集合执行iterator.remove报java.lang.UnsupportedOperationException问题
    ie浏览器 GET请求带中文请求,tomcat返回400
    Spring boot 集成dubbo
    [REUSE_ALV_GRID_DISPLAY_LVC]-显示单选按钮(radio button)
  • 原文地址:https://www.cnblogs.com/skyay/p/3826140.html
Copyright © 2011-2022 走看看