JSFiddle - React, Tailwind, and code Playground

by mobilat

HTML

<div class="germany">
                            <div class="open"><a href="#" class="ger_open">Deutschland</a></div>
                            <div class="close"><a href="#" class="ger_close">Deutschland</a></div>
                            <div class="panel_ger">
                                <div class="panel">
                                
                                    <div class="map_ger"></div>
                                    <h2>headline</h2>
                                    
                                    <div id="companies">
                                        <div class="one">
                                            <div class="icon"></div>
                                            <a href="#">navipt.</a>
                                        </div>
                                        
                                        <div class="two">
                                            <div class="icon"></div>
                                            <a href="#">navipt</a>
                                        </div>
                                        
                                        <div class="three">
                                            <div class="icon"></div>
                                            <a href="#">navipt</a>
                                        </div>
                                        
                                        <div class="four">
                                            <div class="icon"></div>
                                            <a href="#">navipt</a>
                                        </div>
                                        
                                        <div class="five">
                                            <div class="icon"></div>
                                            <a href="#">navipt</a>
                                        </div>
                                        
               ...

CSS

/*    --------------------
        header germany navigation --- */
    .header_left div {
        position: relative; /* need to be set for overlay div */
    }
    
    div.germany div.open, div.germany div.close {
        float: left;
        height: 30px;
        width: 120px;
    }
    
    div.germany div.open a {
        color: #000;
        text-decoration: none;
        padding: 5px 0 0 35px;
        background: transparent url('http://nbvfx.net/img/bg_sprite.png') no-repeat -957px -30px;
    }
    
    div.germany div.close {
        background-color: #007858;
         /* display: none; */
    }
    
    div.germany div.close a {
        color: #fff;
        text-decoration: none;
        padding: 5px 0 0 35px;
        background: transparent url('http://nbvfx.net/img/bg_sprite.png') no-repeat -957px -130px;
    }
    
    div .panel_ger {
        position: absolute;
        z-index: 10;
        top: 30px;
        left: 0;
        width: 987px;
        height: 280px;
        background-color: #007858;
        background-image: none;
    }
.panel {
        padding: 20px;
        position: relative;
    }
    
    /*    --------------------
        panel germany --- */    
    #companies {
        margin: 0;
        padding: 0;
        width: 625px;
        overflow: hidden;
        border-top: 1px dotted #fff;
    }
    
    #companies div {
        border-bottom: 1px dotted #fff;
        width: 285px;
        margin: 0 25px 0 0;
        padding: 0;
        float: left;
        background: none;
        cursor: pointer;
    }
    
    #companies div.icon {
        border: 0;
        padding: 0;
        margin: 0;
        height: 50px;
        width: 45px;
        background: transparent url('http://nbvfx.net/img/bg_sprite.png') no-repeat;
    }
    
    #companies div a {
        background: none;
        padding: 18px 0 0 10px;
        color: #fff;
        width: auto;
    }
    
    #companies div.one div.icon { background-position: -285px -80px; }
   ...

JavaScript

// germany panel
    $(function() {
      gradient = { "background-color":"lime" };

      
      $('#companies div').hover(function() {
          $(this).css(gradient);
      }, function(){
          $(this).css('background','none')
      });
    });
    
    // open panel
    gerclose = $('.germany .close');
    geropen = $('.germany .open');
    
    $('.panel_ger').hide();
    gerclose.hide();
    
    $('div.germany .ger_open').click(function(){
          $('.panel_ger').slideDown('slow');
          $(geropen).hide();
          $(gerclose).show();
    });
    
    $('div.germany .ger_close').click(function(){
          $('.panel_ger').slideUp('slow');
          $(gerclose).hide();
          $(geropen).show();
    });