TYPO3：ドロップダウン・ログイン・ボックス（メニュー）

Question

メニューにドロップダウン・ログイン・ボックスを作成したいと思います。ユーザーがメニューの「ログイン」にカーソルを合わせると、ログインフォームまたは登録フォームが表示されます。私はここで例を見つけました：https://www.planet-sports.com/en/

私はTYPO3にはかなり新しいので、私はどこから始めなければならないのか分かりません。 Typoscriptでのみこれを行う方法はありますか、またはhtmlとjavascriptでnavbarを変更する必要がありますか？これを行う最善の方法は何ですか？

EDIT：ナビゲーションバーのため

<nav class="collapse navbar-collapse navbar-main-collapse" role="navigation"> 
     <f:cObject typoscriptObjectPath="menu.navbar" /> 
    </nav> 

のTypoScript：：私はメニューがこのような "header.html" ファイルで呼び出されるカスタムテーマ（自分で行わない）

を使用しています

menu.navbar = HMENU 
menu.navbar { 
    entryLevel = 0 
    excludeUidList = 112 

    1 = TMENU 
    1 { 
     expAll = 1 
     stdWrap.dataWrap = <ul class="nav navbar-nav colum-{register:count_menuItems}">|</ul> 

     NO { 
      htmlSpecialChars = 1 
      wrapItemAndSub = <li id="navbar{field:uid}" class="first" >|</li> |*| <li id="navbar{field:uid}">|</li> |*| <li id="navbar{field:uid}" class="last navbar-right">|</li> 
      wrapItemAndSub.insertData = 1 
      ATagTitle.field = description // subtitle 
     } 

     ACT = 1 
     ACT { 
      htmlSpecialChars = 1 
      wrapItemAndSub = <li id="navbar{field:uid}" class="first active">|</li> |*| <li id="navbar{field:uid}" class="active">|</li> |*| <li id="navbar{field:uid}" class="last active navbar-right">|</li> 
      wrapItemAndSub.insertData = 1 
      ATagTitle.field = description // subtitle 
     } 

     IFSUB = 1 
     IFSUB { 
      ATagTitle.field = description // subtitle 
      wrapItemAndSub = <li id="navbar{field:uid}" class="dropdown first">|</li> |*| <li id="navbar{field:uid}" class="dropdown">|</li> |*| <li id="navbar{field:uid}" class="dropdown last">|</li> 
      wrapItemAndSub.insertData = 1 
      stdWrap.htmlSpecialChars = 1 
      ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" 
      linkWrap = |<span class="caret"></span> 
      ATagBeforeWrap = 1 
     } 

     ACTIFSUB < .IFSUB 
     ACTIFSUB = 1 
     ACTIFSUB.wrapItemAndSub = <li id="navbar{field:uid}" class="dropdown first active">|</li> |*| <li id="navbar{field:uid}" class="dropdown active">|</li> |*| <li id="navbar{field:uid}" class="dropdown last active">|</li> 
    } 

    2 = TMENU 
    2 { 
     expAll = 1 
     wrap = <ul class="dropdown-menu">|</ul> 

     NO.htmlSpecialChars = 1 
     NO.wrapItemAndSub = |*| <li class="odd">|</li> || <li class="even">|</li> |*| 

     ACT = 1 
     ACT.htmlSpecialChars = 1 
     ACT.wrapItemAndSub = |*| <li class="odd active">|</li> || <li class="even active">|</li> |*| 
    } 

    3 = TMENU 
    3 { 
     expAll = 1 
     wrap = <ul class="dropdown-submenu">|</ul> 

     NO.htmlSpecialChars = 1 
     NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li> 

     ACT = 1 
     ACT.htmlSpecialChars = 1 
     ACT.wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="active last">|</li> 
    } 

    4 = TMENU 
    4 { 
     wrap = <ul class="dropdown-submenu-1">|</ul> 

     NO.htmlSpecialChars = 1 
     NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li> 

     ACT = 1 
     ACT.htmlSpecialChars = 1 
     ACT.wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="active last">|</li> 
    } 
} 

Answer 1

まず、レイヤーの可視性はCSS（フェードイン/フェードアウトまたは爆発/爆縮）で処理できます。トリガーdivに含まれるdivにすべてのコンテンツを入れてください。
このdivへのコンテンツの取得方法は、ページを作成する種類によって異なります。流体テンプレート、マーカーテンプレート、純粋なtyposcript。
ログインフォーム（およびその他のコンテンツ）をdivに入れるには複数の方法があります：typoscriptで作成し、修正ページからコンテンツを取得し、すべてのサブページ（スライド）に継承された特別な列からコンテンツを取得します。

あなたの現在の設定が何であるか、あなたがよく知っていることと達成したいことを具体的に少し具体的にするだけです。