網(wǎng)站折疊菜單制作方法（附代碼）
2018-11-01 來源：學(xué)做網(wǎng)站論壇
對于一些欄目很多的網(wǎng)站，如果想把所有欄目都展示出來，非常占版面。這時我們可以使用網(wǎng)站折疊菜單來進(jìn)行多欄目的展示。效果如下圖：
怎么在自己建網(wǎng)站時，制作出這樣的折疊菜單呢？下面學(xué)做網(wǎng)站論壇就來介紹一下網(wǎng)站折疊菜單的制作方法。
方法/步驟
- 復(fù)制以下的HTML代碼，放在網(wǎng)站上需要顯示折疊菜單的位置；（如果不懂HTML，可先學(xué)習(xí)一下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="#">交易規(guī)則</a></li>
<li><a href="#">國際招商</a></li>
<li><a href="#">服務(wù)商招募</a></li>
<li><a href="#">商家系統(tǒng)對接</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</div> - 將以下的JS代碼，粘貼到網(wǎng)站代碼的</head>標(biāo)簽上面；
<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");//切換圖標(biāo)
? $(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
? });
});
</script> - 復(fù)制以下的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;} - 這樣網(wǎng)站折疊菜單就制作好了，里面的文字和鏈接可以更換成自己的內(nèi)容。
附全部代碼：
<!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>網(wǎng)站折疊菜單</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");//切換圖標(biāo)
? $(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="#">交易規(guī)則</a></li>
<li><a href="#">國際招商</a></li>
<li><a href="#">服務(wù)商招募</a></li>
<li><a href="#">商家系統(tǒng)對接</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</div>
</body>
</html>
標(biāo)簽： isp 代碼 服務(wù)商 建網(wǎng)站
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
最新資訊
熱門推薦