JSFiddle - React, Tailwind, and code Playground

by Jiteen Khera

HTML

<div class="logo">
<div class="m1">M</div>
</div>

<div class="slide">cdscsdvEDIA
</div>
<div class="m2">M
</div>
<div class="slide3">ANTRA
</div>

CSS

.slide {
    position:absolute;
    height : 50px;
    width:100px;
    top:10px;
    left:-50px;
    background-color:#8cc;
    cursor:pointer;
    z-index : 99;
}
/*********************************/
.m2 {
    position:absolute;
    height : 50px;
    width:50px;
    top:10px;
    left:50px;
    background-color:#80c;
    cursor:pointer;
    z-index : 90;
}/************************************/
.slide3 {
    position:fixed;
    height : 50px;
    width:100px;
    top:10px;
    left:-50px;
    background-color:#36c;
    cursor:pointer;
    z-index : 95;
}
/****************************************/

.m1 {
    position:fixed;
    height : 50px;
    width:50px;
    top:10px;
    left:0px;
    background-color:#f0c;
    cursor:pointer;
    z-index : 100;
}

JavaScript

$(document).ready(function(){
    var r=0, dir=true;
    $(".m1").hover(function() {
        dir = !dir;
        r = dir? -50 : 0;
        t = dir? 50 : 0;
        
        $(".slide").stop().animate({left: r+'px'}, 300);
        
    });
});