可收合下拉式 選單

-
 
多款 可收合下拉式 選單小工具

在HTML5裡有一個標籤元素 <details> 可以用來收合包容任何物件。
這個可以打開和關閉的 <details> 交互式小部件，默認情況下，小部件是關閉的，打開時，它會展開並顯示其中的內容。

語法如下
<details>
  <summary>提示標題</summary>
  書寫內容處 ...
</details>

現在、我們就用 <details> 這個標籤元素，來把連結清單、網頁清單，包裹起來。

在每種樣式裡 連結清單、網頁清單 小工具，各有一款


首先 選擇複製一款清單 XML 碼 。


接下來，>> 點選編輯HTML >> 進入 XML編輯器 

在你想置放的地方，插入貼上XML碼，即使貼錯地方也沒關係，可以回到版面配置窗框裡再移動。

編輯連結清單 或網頁清單

轉到 [版面配置]窗格 ~ 打開連結清單或網頁清單小工具，在設置中填寫網址和網站名稱。



折合式 選單 ( 樣式 一 )

點按下面的 Code 複製 連結清單 XML碼：

<b:widget id='LinkList11' locked='false' title='連結清單' type='LinkList' version='2' visible='true'>
    <b:includable id='main'>
    <b:include name='content'/>
</b:includable>
    <b:includable id='content'>
   <details class='collapsible extendable'>
     <summary><data:title/></summary>
 <div class='widget-content'>
    <ul>
  <b:loop values='data:links' var='link'>
  <li><a expr:href='data:link.target'><data:link.name/></a></li>
  </b:loop>
   </ul>
 </div>
  </details>
  <style>
#<data:widget.instanceId/> summary{display: list-item; cursor: pointer; font-size: 20px; font-weight: bold;}
#<data:widget.instanceId/> summary::marker{ color:red;}
#<data:widget.instanceId/> ul{
      list-style: none;
      background: linear-gradient(#ddd,white,#ccc);
      padding:6px 0;
      box-shadow:1px 2px 5px rgba(50,50,50,0.3);
      margin:10px 3px 0;
    }
#<data:widget.instanceId/> li{color:#555; border:3px solid transparent; padding:5px 12px; margin:2px 6px;}       
#<data:widget.instanceId/> li:hover{
  background:rgba(250,250,250,0.7);
   border-left-color:red; box-shadow:1px 2px 3px rgba(30,30,30,0.6);}
  </style>
</b:includable>
  </b:widget>



點按下面的 Code 複製 網頁清單 XML碼：

<b:widget id='PageList11' locked='false' title='網頁清單' type='PageList' version='2' visible='true'>
  <b:includable id='main'>
<b:include name='content'/>
</b:includable>
  <b:includable id='content'>
<details>
<summary> <data:title/> </summary>
<div class='widget-content'>
<b:include cond='data:widget.sectionId == &quot;page_list_top&quot;' name='overflowablePageList'/>
<b:include cond='data:widget.sectionId != &quot;page_list_top&quot;' name='pageList'/>
</div>
</details>
  <style>
#<data:widget.instanceId/> summary{display: list-item; cursor: pointer; font-size: 20px; font-weight: bold;}
#<data:widget.instanceId/> summary::marker{ color:red;}
#<data:widget.instanceId/> ul{
      list-style: none;
      background: linear-gradient(#ddd,white,#ccc);
      padding:6px 0;
      box-shadow:1px 2px 5px rgba(50,50,50,0.3);
      margin:10px 3px 0;
    }
#<data:widget.instanceId/> li{color:#555; border:3px solid transparent; padding:5px 12px; margin:2px 6px;} 
#<data:widget.instanceId/> li:hover{
  background:rgba(250,250,250,0.7);
   border-left-color:red; box-shadow:1px 2px 3px rgba(30,30,30,0.6);}
  </style>
    </b:includable>
    <b:includable id='overflowButton'>
<a><data:messages.moreEllipsis/></a>
</b:includable>
    <b:includable id='overflowablePageList'>
<div class='overflowable-container'>
<div class='overflowable-contents'>
<div class='container'>
<b:with value='true' var='overflow'>
<b:with value='&quot;tabs&quot;' var='pageListClass'>
<b:include name='pageList'/>
</b:with>
</b:with>
</div>
</div>
<div class='overflow-button hidden'>
<b:include name='overflowButton'/>
</div>
</div>
</b:includable>
    <b:includable id='pageLink'>
<li>
<b:class cond='data:overflow' name='overflowable-item'/>
<b:class cond='data:link.isCurrentPage' name='selected'/> <a expr:href='data:link.href'><data:link.title/></a>
</li>
</b:includable>
    <b:includable id='pageList'>
<ul>
<b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
<b:loop values='data:links' var='link'>
<b:include name='pageLink'/>
</b:loop>
</ul>
</b:includable>
  </b:widget>




折合式 選單 ( 樣式 二 )

點按下面的 Code 複製 連結清單 XML碼：

<b:widget id='LinkList12' locked='false' title='連結清單' type='LinkList' version='2' visible='true'>
    <b:includable id='main'>
    <b:include name='content'/>
</b:includable>
  <b:includable id='content'>
   <details class='collapsible extendable'>
  <summary>
<div class='collapsible-title'>
<h3 class='title'><data:title/></h3>
<svg class='svg-icon-24 chevron-down'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
<svg class='svg-icon-24 chevron-up'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
</div>
</summary>
 <div class='widget-content'>
    <ul>
  <b:loop values='data:links' var='link'>
  <li><a expr:href='data:link.target'><data:link.name/></a></li>
  </b:loop>
   </ul>
 </div>
  </details>
 <style>
#<data:widget.instanceId/> ul{
      list-style: none;
    background: linear-gradient(#caccc7,#fff,#b1b8be);
    padding:6px 0;
      box-shadow:1px 2px 5px rgba(50,50,50,0.3);
      margin:10px 3px 0;
    }
#<data:widget.instanceId/> li{
    color:#fff;
      margin:6px;
  border-radius: 6px;
      border:3px solid transparent;
      background:rgb(80,80,80);
  padding:5px 12px;
   transition: 0.3s;}  
#<data:widget.instanceId/> li:hover{
  background:rgb(250,250,250);
   border-left-color:red; box-shadow:1px 2px 3px rgba(30,30,30,0.6);
      color:#666}
  </style>
  </b:includable>
  </b:widget>



點按下面的 Code 複製 網頁清單 XML碼：

<b:widget id='PageList12' locked='false' title='網頁清單' type='PageList' version='2' visible='true'>
    <b:includable id='main'>
<b:include name='content'/>
</b:includable>
   <b:includable id='content'>
  <details class='collapsible extendable'>
    <summary>
<div class='collapsible-title'>
<h3 class='title'><data:title/></h3>
<svg class='svg-icon-24 chevron-down'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
<svg class='svg-icon-24 chevron-up'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
</div>
  </summary>
<div class='widget-content'>
<b:include cond='data:widget.sectionId == &quot;page_list_top&quot;' name='overflowablePageList'/>
<b:include cond='data:widget.sectionId != &quot;page_list_top&quot;' name='pageList'/>
</div>
</details>
 <style>
#<data:widget.instanceId/> ul{
      list-style: none;
      background: linear-gradient(#caccc7,#fff,#b1b8be);
      padding:6px 0;
      box-shadow:1px 2px 5px rgba(50,50,50,0.3);
      margin:10px 3px 0;
    }
#<data:widget.instanceId/> li{
    color:#fff;
      margin:6px;
      border-radius: 6px;
      border:3px solid transparent;
      background:rgb(80,80,80);
 padding:5px 12px;
   transition: 0.3s;}    
#<data:widget.instanceId/> li:hover{
  background:rgb(250,250,250);
      border-left-color:red; box-shadow:1px 2px 3px rgba(30,30,30,0.6);
      color:#666}
  </style> 
</b:includable>
    <b:includable id='overflowButton'>
<a><data:messages.moreEllipsis/></a>
</b:includable>
  <b:includable id='overflowablePageList'>
<div class='overflowable-container'>
<div class='overflowable-contents'>
<div class='container'>
<b:with value='true' var='overflow'>
<b:with value='&quot;tabs&quot;' var='pageListClass'>
<b:include name='pageList'/>
</b:with>
</b:with>
</div>
</div>
<div class='overflow-button hidden'>
<b:include name='overflowButton'/>
</div>
</div>
</b:includable>
    <b:includable id='pageLink'>
<li>
<b:class cond='data:overflow' name='overflowable-item'/>
<b:class cond='data:link.isCurrentPage' name='selected'/> <a expr:href='data:link.href'><data:link.title/></a>
</li>
</b:includable>
  <b:includable id='pageList'>
<ul>
<b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
<b:loop values='data:links' var='link'>
<b:include name='pageLink'/>
</b:loop>
</ul>
</b:includable>
  </b:widget>

留言

張貼留言

這個網誌中的熱門文章