【註】
⇒ 您想問任何問題之前,請您先使用站內搜尋,或在文章分類內找找先。
⇒ 每篇文章都有發文日期,距今已久的舊文章通常不會維護或會可能消失。
⇒ 臉書專頁是給我用來隨便貼文兼站務聯絡 - 【游牧大白の日常】

[HTML]+[CSS]側邊欄位伸縮選單

參考資料來源: 點這裡
如果對細節有興趣可以點上連結參考
該作者後來還有開發出一個新方法更為便捷
不過我個人選用這招.原因不詳細說明.

第一步:


作用:產生伸縮選單效果

這段放 自訂欄位

<script type="text/javascript">
jQuery(function($){
$("h4.box-title").css({cursor:"pointer"}).click(function(){
$(this).next().toggle("normal");
});
});
</script>



選單開啟速度.可置換下列
normal=中
fast=快
slow=慢


第二步:

作用:將所有側邊選單預設為關閉(不可見)

到 CSS原始碼編輯 找到這段.box-text {}

夾在{}中間的東西一些東西不用管他.只要把display屬性改成none;
如果沒有宣告display屬性 就自己補充進去.如下所示


.box-text {
XXXXX:XXXX;(←不要管)
XXXXX:XXXX;(←也不要管)
display:none;
}




第三步:



作用:將個別需要預設顯示的選單打開(可見)

到 CSS原始碼編輯 最下端自行新增需要打開的欄位

下方CSS只是舉例.需由使用者自行設定增減




/*------------------------------ #側邊欄位打開 ------------------------- */
#box94741 div{
display:block;
}
#box99353 div{
display:block;
}
#recent-article div{
display:block;
}
#counter div{
display:block;
}




自訂欄位或原廠欄位都有一個元素值.打開網頁原始碼看就知道了.

大概都會長成這樣 <div id="box16630"> 或是 <div id="category">
位置在欄位名稱上方幾行,反正就長的這樣 id="XXXXXXXX"
如上所示.把想要顯示的id值(XXXXXXXX)置換上方就可以預設顯示




(註)一旦自行編輯過"CSS 原始碼編輯"
請不要再回去用"自訂樣式簡易版"、"樣式設計精靈"改東西
以免發生悲劇,非常提醒


澄涼 發表在 痞客邦 PIXNET 留言(3) 人氣()


留言列表 (3)

發表留言
  • 。比爾蓋飯。
  • 好文必推!
    PS:等你箭頭更換教學..XD
  • 箭頭教學麻煩翻前文.你只是沒圖可以顯示.不是壞了

    澄涼 於 2011/11/29 03:33 回覆

  • 綠茶多多
  • 重點同樓上,以推文,別人的語法有照著改過,可惜失敗了,繼續裝潢新家。
    n天前,剛搬家過來。
  • 綠茶多多
  • 以推文→更正"已推文"
  • 已閱

    澄涼 於 2013/09/08 01:17 回覆