JSFiddle - React, Tailwind, and code Playground

by orlov0562

HTML

<div class="cover">
    <ul class="headline-mnu">
        <li class="currency">
            <div class="currency-list-active"><span>$ us</span>
                <div class="arrow"></div>
             </div>
            <ul class="currency-list">
                <li >$ us</li>
                <li >€ EUR</li>
                <li >£ GBP</li>
            </ul>
        </li>
        <li><a href="#">my account</a></li>
        <li class="search"><span id="clickme">q</span>
            <form action="" class="search-form">
                <input type="text">
                <input type="submit" value="ok">
            </form>
        </li>
    </ul>
</div>
<div id="overlay" class="hidden"></div>

CSS

ul{
    list-style:none;
    margin:0;
    padding:0;
}
a{
    text-decoration:none;
    color:#fff;
}
.cover{
    margin:50px;
    background:#000;
    text-transform:uppercase;
    color:#fff;
    position:relative;
    z-index:1000;
}

#overlay {position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:red; z-index:500;}
.hidden {display:none;}

.headline-mnu > li{
    display:inline-block;
    padding:5px 10px;
    border-right:1px solid #eee;
    border-left:1px solid #eee;
    margin-right:-5px;
}

.currency-list-active,
.currency-list li{
    cursor: pointer;
    z-index: 11;
}
.currency-list-active{
    width:51px;
}
.arrow {
    background: red;
    width: 5px;
    height: 5px;
    display:inline-block;
    vertical-align:20%;
}
.currency-list-active span {
    display: inline;
}
.currency ul.currency-list {
    margin-top: 0px;
    color:#fff;
    z-index: 10;
    position: absolute;
    display: none;
    box-shadow:1px 1px 2px #333;
    background:#000;
}
ul.currency-list li {
    list-style-type: none;
}
.search{
    position:relative;
}
.search span{
    cursor:pointer;
    display:block;
}
form{
    padding:5px;
    background:#eee;
    position:absolute;
    width:190px;
    right:0;
    display:none;
}
.red{color:red;}
.red1{background:green;}

JavaScript

$('#overlay').click(function(){
	$(this).hide();
    $(".currency-list:visible").slideUp(10);
    $('.search form:visible').hide();
});

$('.currency-list-active').click(function(){
    if ($('.search form').is(':visible')) $('.search form').hide();
	$(".currency-list").slideToggle(10, function(){
    	if ($(".currency-list").is(':visible')) $('#overlay').show(); else $('#overlay').hide();
    });
    
});

$('ul.currency-list li').click(function(){
    var tx = $(this).html();
    $(".currency-list").slideUp(10);
    $(".currency-list-active span").html(tx);
    $('#overlay:visible').hide();
    
});

$('.search span').click(function(){
    if ($('.currency-list').is(':visible')) $('.currency-list').hide();
    $('.search form').toggle();
    if (!$(".search form").is(':visible')) $('#overlay').hide(); else $('#overlay').show();
});