JSFiddle - React, Tailwind, and code Playground

by oshirowanen

HTML

<div class="menu">
    <div class="navigation">Account ▼</div>
    <div class="dropdown">
        picture of user goes here<br />
        other options go here<br />
        further options go here
    </div>
</div>

CSS

.menu
{
    position: relative;
    height:25px;
    background-color:silver;
    font-family:arial;
    font-size:12px;
}

.navigation
{
    float:right;
    background-color:silver;
    padding:5px 10px 5px 10px;
    cursor:pointer;
}

.navigation:hover
{
    background-color:gray;
}

.dropdown{
    display:none;
    border-left:1px black solid;
    border-right:1px black solid;
    border-bottom:2px black solid;
    border-top:1px black solid;
    background-color:white;
    float:left;
    position:absolute;
    top:24px;
    right: 0;
    padding:5px 10px 5px 10px;
    cursor:pointer;
}

JavaScript

/* facebook style dropdown right */

$(function() {
    $( ".navigation" ).hover(
        function () {
            if( $(".dropdown").is(":hidden") ) {
                $(".navigation").css("background-color", "gray");
            }
        },
        function () {
            if( $(".dropdown").is(":hidden") ) {
                $(".navigation").css("background-color", "silver");
            }
        }
    );
    
    $(".navigation").click( function () {
        $(".navigation").css( {
            "border-left":"1px black solid",
            "padding-left":"9px",
            "border-top":"1px black solid",
            "padding-top":"4px",
            "border-right":"1px black solid",
            "padding-right":"9px",
            "background-color":"white",
            "padding-bottom":"4px",
            "border-bottom":"1px white solid",
            "position":"relative",
            "z-index":"1"
        });                 
                             
        $(".dropdown").toggle( 0, function () {
            if( $(".dropdown").is(":hidden") ) {
                $(".navigation").css("border","none");
                $(".navigation").css("background-color","gray");
                $(".navigation").css("padding","5px 10px 5px 10px");
            }
        });
    });
});