TYPO3: dropdown login box (menu) - typo3

Question

I would like to create a dropdown login box in the menu. When users hover over "login" in the menu, it shows the login or register form. I found an example here: https://www.planet-sports.com/en/
I am quite new to TYPO3 so I don't know where I should start. Is there a way to do this with Typoscript only or should I modify the navbar with html and javascript? What is the best way to do this ?
EDIT: I am using a custom theme (not done by myself)
The Menu is called in a "header.html" file like this:
<nav class="collapse navbar-collapse navbar-main-collapse" role="navigation">
<f:cObject typoscriptObjectPath="menu.navbar" />
</nav>
Typoscript for the navbar:
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

first of all: the visibility of a layer can be handled with CSS (even fade in/fade out or explode/implode). just put all content in a div which is included in the trigger div.
How you get your content into this div depends of the kind you build your page. fluid-template, marker-template, pure typoscript.
there are multiple ways to get the login form (and other content) into the div: create it by typoscript, get the content from a fix page, get the content from a special column which is inherited to all subpages (slide).
just be a little be more specific what your current configuration is, what you are familiar with and what you want to achieve.