JSFiddle - React, Tailwind, and code Playground

by TuxBoy

HTML

<div class="topbar">
      <nav class="navhidden" id="options_bar">
        <span class="content-right">
         <a href="#" class="link">Sign In</a>
         <h4 class="tel_support"><span class="glyphicon glyphicon-phone-alt"></span> Nous contacter</h4>
         </span>
        <span class="content-left">
           
        </span>
      </nav>
      <span class="plus">
       <a href="#"><span class="glyphicon glyphicon-chevron-down"></span></a>
     </span>
   </div>

CSS

#options_bar { display: none; margin-bottom: -1px; transition: 0.5s; }
.callonline  {
    display: inline-block;
    top: -46px;
    margin-left: 20px;
}

.tel_support {
    display: inline-block;
    margin-left: 10px;
    color: #FFFFFF;
}



.plus {
    right: -2px;
    width: 80px;
    margin-top: 0px;
    float: right;
    cursor: pointer;
    border: 1px solid #252528;
    position: relative;
    background-color: #252528;
    border-radius: 0px 0px 8px 8px;
}

.plus  a {
    left: 25px;
    width: 80px;
    height: 30px;
    line-height: 30px;
    position: relative;
    display: block;
}

.navhidden {
  height: 65px;
  position: relative;
  top: 0;
  border: 1px solid #252528;
  background: #252528;
  padding: 1px;
  bottom: 0;
  padding-bottom: 73px;
}
/* line 34, ../sass/perso.scss */
.navhidden p.content-right {
  display: inline-block;
  float: left;
}
/* line 37, ../sass/perso.scss */
.navhidden p.content-right .link {
  margin-left: 20px;
}
/* line 42, ../sass/perso.scss */
.navhidden p.content-left {
  display: inline-block;
  float: right;
}

JavaScript

/**
     * Bar d'options et de recherche
     **/
     var optionsBar = $('#options_bar');
     var topbar     = $('.topbar');
     var plus       = $('#plus');
     var txtPlus    = $('.plus');
     //optionsBar.hide();

     function initTopbarDown(time){
        optionsBar.slideDown({
            duration: 1000,
            easing: 'jswing'
        });
        $('.plus span').removeClass('glyphicon glyphicon-chevron-down');
        $('.plus span').addClass('glyphicon glyphicon-chevron-up');
     }

     $('.plus').mouseover(function(){
        initTopbarDown(500);
        // La souris est sur l'élément
        optionsBar.bind('mouseenter', function(){
            initTopbarDown(1000);
            //clearTimeout(vartimeTopbar);
            //vartimeTopbar = null;
        }).bind('mouseleave', function(){
            setTimeout(function(){
                optionsBar.slideUp({
                    duration: 1000,
                    easing: 'jswing'
                });
            }, 2000);
            $('.plus span').removeClass('glyphicon glyphicon-chevron-up');
            $('.plus span').addClass('glyphicon glyphicon-chevron-down');
        });
     });