JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

<div id="menu">
    	<ul>
    		<li><a href="index_tmp.html">Тест1</a></li>
    		<li><a href="index_tmp.html">Тест2</a></li>
    	</ul>
    </div>

	<div id="panel">
	    <div id="panel-content">
	        Какой-то контент, который вы хотите показать.<br/>
	        Несколько строк<br/>
	        для наглядности
	    </div>
	    <div id="panel-sticker">
	        <span>Открыть</span>
	        <div class="close">×</div>    
	    </div>
	</div>

CSS

#menu ul{
    list-style-type: none;
}

#menu li{
    float: left;
    margin: 0 25px 0 0;
}

#menu a {
    padding: 5px;
    font-family: 'Verdana';
    font-size: 18px;
    color: red;
    text-decoration: none;
}

#menu a:hover {
    padding: 5px;
    border-bottom: solid 2px red;
    border-right: solid 2px red;
    border-left: solid 2px green;
    border-top: solid 2px green;
}

#panel {
    position: absolute;
    top: 50%;
    left: -400px;
    margin: -40px 0 0 0;
    overflow: hidden;
}
#panel-content {
    background: #EEE;
    border: 1px solid #CCC;
    width: 388px;
    height: 80px;
    float: left;
    padding: 3px 5px;
}
#panel-sticker {
    float: left;
    position: relative;
    background: orange;
    padding: 3px 20px 3px 5px;
    margin: 0;
    cursor: pointer;
}
#panel-sticker .close {
    position: absolute;
    right: 3px;
    top: 3px;
}

JavaScript

(function($) {
			    $(document).ready(function() {
			        var $panel = $('#panel');
			        if ($panel.length) {
			            var $sticker = $panel.children('#panel-sticker');
			            var showPanel = function() {
			                $panel.animate({
			                    left: '+=400',
			                }, 900, function() {
			                    $(this).addClass('visible');
			                });
			            };
			            var hidePanel = function() {
			                $panel.animate({
			                    left: '-=400',
			                }, 900, function() {
			                    $(this).removeClass('visible');
			                });
			            };
			            $sticker
			                .children('span').click(function() {
			                    if ($panel.hasClass('visible')) {
			                        hidePanel();
			                    }
			                    else {
			                        showPanel();
			                    }
			                }).andSelf()
			                .children('.close').click(function() {
			                    $panel.remove();
			                });
			        }
			    });
			})(jQuery);