学做网站培训课程介绍

当前位置：

网站折叠菜单制作方法（附代码）

对于一些栏目很多的网站，如果想把所有栏目都展示出来，特别占版面。这时我们可以使用网站折叠菜单来进行多栏目的展示。效果如下图：

网站折叠菜单

怎么在自己建网站时，制作出这样的折叠菜单呢？下面学做网站论坛就来介绍一下网站折叠菜单的制作方法。

方法/步骤

  1. 复制以下的HTML代码，放在网站上需要显示折叠菜单的位置；（如果不懂HTML，可先学习一下html入门教程） 
    

    <div class="box-zdmeau">
    
<h3 class="Collapsing  current">客户保障</h3>
    
<div class="coll_body">
    
<ul>
    
<li><a href="#">正品保障</a></li>
    
<li><a href="#">海外直供</a></li>
    
</ul>
    
</div>
    
<h3 class="Collapsing">新手帮助</h3>
    
<div class="coll_body">
    
<ul>
    
<li><a href="#">申请支付宝</a></li>
    
<li><a href="#">支付宝充值</a></li>
    
</ul>
    
</div>
    
<h3 class="Collapsing">支付方式</h3>
    
<div class="coll_body">
    
<ul>
    
<li><a href="#">支付宝快捷支付</a></li>
    
<li><a href="#">支付宝余额支付</a></li>
    
<li><a href="#">新手入门</a></li>
    
</ul>
    
</div>
    
<h3 class="Collapsing">商家支持</h3>
    
<div class="coll_body">
    
<ul>
    
<li><a href="#">交易规则</a></li>
    
<li><a href="#">国际招商</a></li>
    
<li><a href="#">服务商招募</a></li>
    
<li><a href="#">商家系统对接</a></li>
    
<li><a href="#">联系我们</a></li>
    
</ul>
    
</div>
    
</div>
  2. 将以下的JS代码，粘贴到网站代码的</head>标签上面； 
    

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    
<script type="text/javascript">
    
$(function(){
    
    $(".coll_body").eq(0).show();
    
    $(".Collapsing").click(function(){
    
        $(this).toggleClass("current").siblings('.Collapsing').removeClass("current");//切换图标
    
        $(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
    
    });
    
});
    
</script>
  3. 复制以下的CSS代码，粘贴到自己的CSS文件里，用于控制折叠菜单的样式； 
    

    *{padding:0; margin:0;}
    
        a{text-decoration:none;}
    
        .box-zdmeau{margin:50px auto; width:300px; height: auto;  border: 1px solid #ccc;}         
    
        .Collapsing {height: 40px;line-height: 40px;text-indent: 10px;outline: none;font-size: 14px;font-weight: 700;border-top: 1px solid #ddd;background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));cursor: pointer;}
    
        .Collapsing::-webkit-details-marker {display: none;}        
    
        .Collapsing:before {content: "+";display: inline-block;width: 16px;height: 16px;margin-right: 10px;font-size:18px;font-weight:700;}       
    
        .coll_body{display: none; }        
    
        .current:before {content: "-";}     
    
        .coll_body ul {padding: 10px 0;}
    
        .coll_body ul li {list-style: none;text-indent: 25px;font-size: 12px;height: 30px;line-height: 30px;}
    
        .coll_body ul li a {display: block;color: #666;}
    
        .coll_body ul li a:hover {text-decoration: underline;}
  4. 这样网站折叠菜单就制作好了，里面的文字和链接可以更换成自己的内容。

附全部代码：



<!doctype html>

<html lang="zh">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<title>网站折叠菜单</title>

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

    $(".coll_body").eq(0).show();

    $(".Collapsing").click(function(){

        $(this).toggleClass("current").siblings('.Collapsing').removeClass("current");//切换图标

        $(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);

    });

});

</script>

<style type="text/css">

        *{padding:0; margin:0;}

        a{text-decoration:none;}

        .box-zdmeau{margin:50px auto; width:300px; height: auto;  border: 1px solid #ccc;}         

        .Collapsing {height: 40px;line-height: 40px;text-indent: 10px;outline: none;font-size: 14px;font-weight: 700;border-top: 1px solid #ddd;background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));cursor: pointer;}

        .Collapsing::-webkit-details-marker {display: none;}        

        .Collapsing:before {content: "+";display: inline-block;width: 16px;height: 16px;margin-right: 10px;font-size:18px;font-weight:700;}       

        .coll_body{display: none; }        

        .current:before {content: "-";}     

        .coll_body ul {padding: 10px 0;}

        .coll_body ul li {list-style: none;text-indent: 25px;font-size: 12px;height: 30px;line-height: 30px;}

        .coll_body ul li a {display: block;color: #666;}

        .coll_body ul li a:hover {text-decoration: underline;}        

    </style>

</head>

<body>

<div class="box-zdmeau">

<h3 class="Collapsing  current">客户保障</h3>

<div class="coll_body">

<ul>

<li><a href="#">正品保障</a></li>

<li><a href="#">海外直供</a></li>

</ul>

</div>

<h3 class="Collapsing">新手帮助</h3>

<div class="coll_body">

<ul>

<li><a href="#">申请支付宝</a></li>

<li><a href="#">支付宝充值</a></li>

</ul>

</div>

<h3 class="Collapsing">支付方式</h3>

<div class="coll_body">

<ul>

<li><a href="#">支付宝快捷支付</a></li>

<li><a href="#">支付宝余额支付</a></li>

<li><a href="#">新手入门</a></li>

</ul>

</div>

<h3 class="Collapsing">商家支持</h3>

<div class="coll_body">

<ul>

<li><a href="#">交易规则</a></li>

<li><a href="#">国际招商</a></li>

<li><a href="#">服务商招募</a></li>

<li><a href="#">商家系统对接</a></li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

</div>





</body>

</html>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 网站折叠菜单制作方法（附代码） 图文教程 (111308 次浏览)
    对于一些栏目很多的网站，如果想把所有栏目都展示出来，特别占版面。这时我们可以使用网站折叠菜单来进行多栏目的展示。效果如下图：怎么在自
  • 网站树状点击展开折叠二级菜单+当前点击后变色 图文教程 (135055 次浏览)
    一个客户需要开发这样的网站，左侧菜单是一个点击展开式菜单，默认是收缩的，点击后会展开带下拉子菜单的网站导航。当用户点击某个子菜单时，当前点击
  • Dreamweaver跳转菜单制作 视频教程 (1123824 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • WordPress导航菜单添加二级菜单的方法 图文教程 (120851 次浏览)
    在我们的建站课程中，跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时，会自动调用出来。
  • Wordpress前台游客投稿功能制作方法（纯代码） 图文教程 (114856 次浏览)
    纯代码Wordpress前台投稿功能制作方法，很多建网站学员学习了Wordpress教程后，使用Wordpress 程序建了网站。但如果每天都是自己更新文章，感觉会有点
  • html+js动态时钟钟表制作方法 图文教程 (123088 次浏览)
    我们在有些网站上看到会在网站的某个位置显示一个动态变化的时钟，它是一秒秒的变化。对于这种效果，我们自己做网站时也可以制作出来，只需要通过JS就
  • 网页设计学习必备：颜色名称和HTML代码对照表 (124625 次浏览)
    学做网站时，经常要修改代码，很多时候需要用到颜色代码，由于太多，不可能都记住，所以找到了一个带有中文颜色名称表示的颜色代码表，以便后期网页设
  • 网站简繁体转换js代码（简繁体网站制作） 图文教程附件下载 (124543 次浏览)
    如果我们的网站有港澳台的用户，那么网站特别好是能支持文字简繁互转，这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时，实

建站培训课程

最新教程

其它教程