タブメニューの上部にブロックを配置

1. はじめに

Client-side JavaScriptおよびCSS を用いて、タブメニューの上部にブロックを配置するサンプルを紹介します。

2. サンプル機能の内容と確認ポイント

タブ名を設定せず非表示となったブロックを再表示し、タブメニューの上部に配置して表示する方法を示します。

通常、「機能設定画面」で任意のブロックにタブ名を入力すると、当該ブロックはタブメニューとして表示され、タブ名が設定されていないブロックは非表示となります。
本手法では、非表示状態にあるブロックをJavaScriptおよびCSSで制御し、明示的に再表示したうえで、タブメニューの上部に配置します。

【Client-side JavaScript による実装内容】  

1. タブメニュー要素、挿入先要素、および挿入位置の基準となるブロック要素を取得します。

2. タブメニュー要素を複製し、id 属性に cloned_tab_menu_area を設定します。

3. 取得した挿入先要素に対し、insertBefore を用いて、基準ブロック要素の直前に複製したタブメニュー要素を挿入します。

4. 複製したタブメニューリスト内の id 属性 tab_menu_list を clonedTabMenuList に変更し、ID の重複を回避します。

5. 複製したタブメニューリスト内の a.selected を取得し、click() を実行することで、非表示ブロックの再表示による高さの超過分が再計算され、正しく反映されます。

【CSS による対応内容】

1. 単票ブロック #box0 を表示するため、display: initial !important; を指定します。

2. コピー元のタブメニュー #tab_menu_area は、display: none !important; により非表示とします。

3. 複製して挿入したタブメニュー div.tab_menu_area には、margin-left: initial; を指定して位置を調整します。 

🔍 確認いただけるポイント 

• タブメニューの上部に単票ブロックが表示されている状態であること 

3. 画面イメージ

以下は、タブメニューの上部に単票ブロックが表示されている状態を示しています。

!++++

!----