跟隨我的腳步唄...

扩展式菜單





也就是這個冬菇啦 :D

這教程 專屬 于 Snoopy Mui 的嚕 :P






设计 → 修改 HTML → CTRL + F

寻找

<head>






② 在 它的 后面 添加 以下代码



<script src='http://pujangga.googlecode.com/files/jquery.tools.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#accordion&quot;).tabs(&quot;#accordion div.pane&quot;, {tabs: &#39;h2&#39;, effect: &#39;slide&#39;, initialIndex: null});

});

</script>










即可! ♥ :P






④ 设计 → 添加小工具 HTML/Javascript






⑤ ② 在 它的 里面 添加 以下代码



&lt;style type=&quot;text/css&quot;&gt;
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFB6D6;
margin:1px;

-moz-border-radius: 35px;
border-radius: 35px;

}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://sites.google.com/site/jquery01/tabmenuaccordion.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(&quot;.msg_body&quot;).hide();
//slides the element with class &quot;msg_body&quot; when paragraph with class &quot;msg_head&quot; is clicked
$(&quot;#firstpane h5.msg_head&quot;).click(function()
{
$(this).next(&quot;div.msg_body&quot;).slideToggle(700).siblings(&quot;div.msg_body&quot;).slideUp(&quot;slow&quot;);
});
//slides the element with class &quot;msg_body&quot; when mouse is over the paragraph
$(&quot;#secondpane h5.msg_head&quot;).mouseover(function()
{
$(this).next(&quot;div.msg_body&quot;).slideDown(&quot;slow&quot;).siblings(&quot;div.msg_body&quot;).slideUp(&quot;slow&quot;);
});
});
&lt;/script&gt;
&lt;div class=&quot;msg_list&quot; id=&quot;secondpane&quot;&gt;
&lt;h5 class=&quot;msg_head&quot;&gt;标题 ①&lt;/h5&gt;
&lt;div class=&quot;msg_body&quot;&gt;
&lt;center&gt;

标题 ① 的 内容</div>
<h5 class="msg_head">标题 ②</h5>
<div class="msg_body">

标题 ② 的 内容
</div>
<h5 class="msg_head">标题 ③</h5>
<div class="msg_body">
标题 3 的 内容</div>
</div>










小常识


淡紫色字體

标 题 字 体 的 颜 色 代 码



粉色字體

标 题 背 景 的 颜 色 代 码



橙色字體

内 容 的 背 景 的 颜 色 代 码



藍色字體

是 你 要 的 标 题 題目



紅色字體

是 裏 面 要 放 的 內 容








即可! ♥ :P













謝謝欣賞 ♥ 如喜歡就分享 ♥ Follow 我的部落喔 :P ♥

3 留言 ♥ :

Cindy Chow 说... [Reply]

请问你能教我吗?我不会哦

小吡 ♥ 说... [Reply]

跟著 step 做就能了哦 :)

Cindy Chow 说... [Reply]

我试了很多次哦~还是不能:(