JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <nav>
    
        <div id="plus"><p>Cliquer ici pour plus de liens...</p></div>
        
        <ul id="liens">
            <li class=""><a href="#">Lien 1</a></li>
            <li class=""><a href="#">Lien 2</a></li>
            <li class=""><a href="#">Lien 3</a></li>
            <li class=""><a href="#">Lien 4</a></li>
            <li class=""><a href="#">Lien 5</a></li>
        </ul>
        
    </nav>
</div>

CSS

<style type="text/css">
* {
    margin:0px;
    padding:0px;
}

#main {
    height:150px;
    background-color:#0F0;
    overflow:hidden;

}

nav {
    position:relative;
    margin-top:129px;
}


#plus {
    background-color:#06F;
    height:20px;
    line-height:20px;
    color:#FFF;
    width:225px;
}

#liens {
    background-color:#F00;
    color:#FFF;
    position:relative;
}
</style>

JavaScript

$(document).ready(function(){
    $('#main #plus').toggle(function(){
        $('#main #plus').animate({width: '100%'}, 500);
        $('#main nav').delay('750').animate({marginTop: '0px'}, 500);    
    },
    function(){
        $('#main nav').animate({marginTop: '129px'}, 500);
        $('#main #plus').delay('750').animate({width: '225px'}, 500);
    });
});