javascript:折叠菜单分析

不点 阅读:152 2020-10-18 22:04:23 评论:0

  最近做网页用到了折叠菜单,在网上搜索了一番后还不错,现在放到自己的博客中。

  下面是自己改的一个折叠菜单,导入三个js文件就可以执行啦。

<!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>Untitled Document</title> 
        <script src="prototype.lite.js" type="text/javascript"></script> 
        <script src="moo.fx.js" type="text/javascript"></script> 
        <script src="moo.fx.pack.js" type="text/javascript"></script> 
        <style> 
            body { 
                font:12px Arial, Helvetica, sans-serif; 
                color: #000; 
            } 
            #container { 
                width: 200px; 
            } 
            H1 { 
                font-size: 11px; 
                margin: 0px; 
                width: 200px; 
                cursor: pointer; 
                height: 22px; 
                line-height: 20px;     
            } 
            H1 a { 
                display: block; 
                padding-top: 1px; 
                padding-right: 8px; 
                padding-bottom: 0px; 
                padding-left: 8px;     
                width: 500px; 
                color: #000; 
                height: 22px; 
                text-decoration: none;     
                moz-outline-style: none; 
                background-image: url(title.gif); 
                background-repeat: repeat-x; 
            } 
            .content{ 
                padding-left: 8px; 
            } 
        </style> 
    </head> 
 
    <body> 
        <div id="container"> 
            <!-- 第一个菜单块--> 
            <H1 class="title"><A href="javascript:void(0)">门户网站</a></H1> 
            <div class="content"> 
                <p><a href=http://www.baidu.com/>进入百度</a></p> 
                <p><a href=http://www.yahoo.com/>进入雅虎</a></p> 
            </div> 
 
            <!-- 第二个菜单块--> 
            <H1 class="title"><A href="javascript:void(0)">购物天堂</a></H1> 
            <div class="content"> 
                <p><a href=http://www.amazon.cn/>进入亚马逊</a></p> 
                <p><a href=http://www.taobao.com/>进入淘宝</a></p> 
            </div> 
 
            <!-- 第三个菜单块--> 
            <H1 class="title"><A href="javascript:void(0)">聊天室</a></H1> 
            <div class="content"> 
               <p><a href=http://web.qq.com/>QQ</a></p> 
               <p><a href=https://webim.feixin.10086.cn/login.aspx>飞信</a></p> 
            </div> 
        </div> 
 
        <script type="text/javascript"> 
            //定义contents 数组为所有将要显示的内容 
            var contents = document.getElementsByClassName('content'); 
            //定义toggles 数组为所有标题,也是可点击展开的按钮 
            var toggles = document.getElementsByClassName('title'); 
            //调用moofx JS库 
            var myAccordion = new fx.Accordion( 
                toggles, contents, {opacity: true, duration: 400}    //opacity确定是否有alpha透明变化,duration确定动作所有事件 
            ); 
            myAccordion.showThisHideOpen(contents[0]);    //默认打开第一个内容 
        </script> 
    </body> 
</html>

   效果图:

 

  

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容