１．メニューバー( Popup メニュー )　→　応用例：　　垂直配列型 　　水平配列型（１）　、　（２）　、（３） 、（ネット入手）

Windows の操作で多用されている方式で便利。
垂直（Vertical）配列と水平(Horizontal)配列の２種あるが、水平型は項目数が多くなると画面幅によっては複数行となるので、垂直型のほうがレイアウト上使い易い。

---

垂平配列型 CSS設定
（SpryMenuBarHorizontal.css）

ＤＷの編集画面からもCSSファイルの変更ができるが窓が小さいので分かりにくい。直接CSSファイルを編集する方がコメントもあって楽である。
　→　ＣＳＳファイル

垂直配列型 編集画面でのCSS設定例
（SpryMenuBarVertical.css）

ＤＷの編集画面からCSSファイルを変更する場合：
・3行目：　ul.MenuBarVertical li
メニュー幅。　初期設定 8em　個別の幅設定はないが、水平配列型の場合、狭く設定して文字列の改行禁止である程度変えられる。（このページがその例）
・4行目：　ul.MenuBarVertical ul
主と副メニューの間隔。　初期設定 8.2em

・7行目：　ul.MenuBarVertical
主メニュー枠(border)の幅と色。　初期設定 1px, 灰色
・8行目：　ul.MenuBarVertical ul
副メニュー枠(border)の幅と色。　初期設定 1px, 灰色
・9行目：　ul.MenuBarVertical a
背景色、文字色。　初期設定　薄灰、黒
・10行目：　ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
マウスON時の背景色、文字色　初期設定　青、白　（下優先で？？？）

・11行目：　ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
マウスON時の背景色　初期設定　青、白
・15行目：　色設定あるが？？？

トラブル対処

・Html ファイルは、上記例　のソースを見れば分かるように、ul、li、の羅列で単純なリスト表である。
・参照するＣＳＳファイル：SpryMenuBarVertical.css（垂直型）、SpryTabbedPanels.css（水平型）　ともに単純な構造になっている。
したがって、編集でエラーメッセージが表示されて続行できなくなった場合はHtml ファイルのリスト表を修正するか、あるいはＣＳＳファイルを新しく入れ替えると解決する。
プルダウン表示にならなかった時、別に作成した新ＣＳＳファイルと入れ替えたら解決した。
例：端末で、ホームページメニューのプルダウンが動作せず。サーバー上では動作したので、両者比較チェックしたところ、端末の　SpryAssets/SpryMenuBar.js が消えていた。　
サーバーからダウンロードした結果解決。 同じ問題がこのページにも生じ、同じ方法で解決。他に約５つの***.jsが消えていたのでサイトからダウンロード。 (2013/1/14)

２．アコーディオン 　→　説明と応用例

パネル幅を超えるコンテンツの編集がやりにくいが、内容を含めた閲覧性が優れている。
設定法などの詳細は上記リンク先を参照。

・アコディオンメニュー内のコンテンツにアンカー設定しても機能しないから注意。
・MouseON で文字色を変えられるが、タブ色は変えられない。
・タブ文字を指定した場合は、MouseON で文字色を変えることはできない。（多分）
・アコーディオンの横幅は、表内に入れることで変えるとよい。

ルールの表記
・Open　→　メニューを開けた時の色
・Tab/Panel　→　タブ色、パネル内背景色
・Hover　→　MouseON色
・Focused　→　通常時の色。　起動時の色は　Focused　の文字なし。
・Content　→　コンテンツに関する設定
・項目内で、background-color 　→　背景色。　color　→　 文字色

---

３．タブ式パネル　→　応用例

同じ機能が通常のHtml、あるいは、フレーム方式でもできるが、こちらは１ファイルで簡単にできる特長がある。
ただし、編集ミスで JavaScript の記述が誤った場合の修復が面倒である。修復困難な場合は新しく作って壊れたファイルからコンテンツを Copy & Paste する必要がある。
通常のHtml の場合、関連する複数のページ上部に共通の相互リンク先を設定しておけば同じ機能となるし、レイアウトの自由度もある。　はたして実用性はあるか。
マウスONでタブの色が変化する表現力が魅力かも知れない。

・タブ式メニュー内のコンテンツにアンカー設定しても機能しないから注意。
・マウスONでタブ色を変えられるが、文字色は変えられない。（多分）

---

ＣＳＳ設定（SpryTabbedPanels.css）
で行なう（省略）

４．縮小可能(Collapsible)パネル　→　応用例

２つのコンテンツを切替え表示する場合に使う。
しかし、
通常のHtml の場合、関連する２つのページ上部に共通の相互リンク先を設定しておけば同じ機能となるし、レイアウトの自由度もある。　はたして実用性はあるか。
スライドでページが移動したり、マウスONでバーの色が変化する表現力が魅力かも知れない。

・縮小可能パネル内のコンテンツにアンカー設定しても機能しないから注意。

---

ＣＳＳ設定（SpryCollapsiblePanel.css）

メニューバーの色設定
・CollapsiblePanelTab
・CollapsiblePanelOpenCollapsibleTab

マウスONの色
・CollapsiblePanelTabHover..CollapsiblePanelOpen.CollapsiblePanelTabHover

・CollapsiblePanelFocused.CollapsiblePanel