JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

<div id="menu">
    	<ul>
    		<li><a href="http://javascript.ru/forum">Тест1</a></li>
    		<li><a href="http://javascript.ru">Тест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:none}
 #menu li{float:left;margin:0 25px 0 0}
 #menu a{padding:5px;font:18px 'Verdana';color:#F00;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:#FFA500;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 (href) {
                $panel.animate({
                    left: '-=400',
                }, 900, function () {
                    $(this).removeClass('visible');
                    href && (window.location = href)
                });
            };
            showPanel();
            $("#menu a").click(function () {
                if ($panel.hasClass('visible')) {
                    event.preventDefault();
                    hidePanel(this.href)
                }

            })
            $sticker
                .children('span').click(function () {
                    if ($panel.hasClass('visible')) {
                        hidePanel();
                        $(this).text('Открыть')
                    } else {
                        showPanel();
                        $(this).text('Закрыть')
                    }
                }).andSelf()
                .children('.close').click(function () {
                    $panel.remove();
                });
        }
    });
})(jQuery);