Help pls! CSS! PHP! login system Hover...

[zzmrzz]

Hi there follow coders! I just found this awesome login hover menu...Thing. But can anyone make a code, to me, that shows me how to make that kind of hover... The website i know they use it is: http://www.badlion.net/ It is a Minecraft server website, if you wonder.
Please put the code down below, and show how it works. And i mean the kind of CSS code, and Html.

Screenshot: http://gyazo.com/cdfc26da47f6bda47abdc5cfec7ec596

Sorry for taking your time, but Thanks! =)

• zzMrMartinzz

[hericles]

Its not really a hover menu. Its just a normal div set to not display until the login button is clicked.
The scrolling appearance is probably done in jquery (or something very similar).
To mimic this, simply create your login div, set it to display: none.
Then add a javascript function to the login button that makes the div appear. After that, adding visual animation effects is just the icing on the cake.
This would take you maybe half an hour to learn off the web. It would be good practise :)

[<M/>]

Here is something i wrote in the past:

HTML:

<div tabindex="0" class="onclick-menu">
    <ul class="onclick-menu-content">
        <li><button onclick="alert('click 1')">Look, mom</button></li>
        <li><button onclick="alert('click 2')">no JavaScript!</button></li>
        <li><button onclick="alert('click 3')">Pretty nice, right?</button></li>
    </ul>
</div>

CSS:

.onclick-menu {
    position: relative;
    display: inline-block;
}
.onclick-menu:before {
    content: "click me!";
}
.onclick-menu:focus .onclick-menu-content {
    /* content is visible if menu is 'opened' */
    visibility: visible;
}
.onclick-menu-content {
    position: absolute;
    z-index: 1;

    /* disable visibility by default, delay to enable clicks */
    visibility: hidden;
    transition: visibility 0.5s;
}

Hope this helps!

[zzmrzz]

Thanks so much! =)

-zzMrMartinzz

[<M/>]

No problem! If you have any questions, please ask! If not, please mark the question solved and possibly offer upvotes & comments to those who contributed!

[zzmrzz]

But how do you make it stay opened if i added a Login menu in it?
Then it Closes, when i tap in the Username Tab/Password Tab??? =)

Thanks

[<M/>]

Oh okay, I see... I found someone's code who does something like that, except he did it for his Search button (not login but they meet the same purpose of what your asking).

Here is the link to the page: http://codepen.io/nexxos/pen/qLAJd

I would write the code myself but sadly, it is not that easy writing anything while on a treadmill :D

[JorgeM]

Its more helpful for everyone if you provide a sample of your relevant code you are currently working with so we can see the behavior that you are referring to.