JSFiddle - React, Tailwind, and code Playground

by Samuel Ruiz de Gopegui Muñoz

HTML

<div id="container">
<div id="header">
<h2>header</h2>
</div>
    <div id="panel-frame"> 
			<div class="panel"> 
				<!-- Content to load in slide-in menu	-->
				
				<div class="data" >
				
				</div>
			</div> 
		</div> 
		<div class="top">
			<div class="menu-item block" dataid="1">Inicio</div> 			
			<div class="menu-item block" dataid="2">Las Valles</div> 
			<div class="menu-item block" dataid="3">Granja</div>
			<div class="menu-item block" dataid="4">Contacto</div>
		</div> 
		<div style="display:none">
				<div id="1">Presentamos ...</div> 	
				<div id="2">Las valles es un queso de...</div> 	
				<div id="3">El proceso de produccion es...</div>
				<div id="4">Se puede poner en contacto a traves de ...</div> 	
		</div>
	<div id="footer">
<h2>footer</h2>    
</div>	
</div>

CSS

<style> 
		body{
			font-family:sans-serif;
			padding:0;
			margin:0;
		}
		
.right
		{
			
			float:right;
			width:100%;
			padding-left:250px;
		}
		.top
		{
			float:left;
			
			width:100%;
			height:50px;
			position:fixed;
			top:0;
			
			background-color:green;
			box-shadow:0px 0px 10px rgba(0, 0, 0, 0.7);
		}
		.menu-item
		{
			position:relative;
			float:left;
			padding: 10px 15px 0 15px;
			height:40px;
			
		}

		.menu-item:hover
		{
			background-color:#ffc72e;
			cursor:pointer;
		}
		.menu-item-selected
		{
			background-color:black;
			color:white;
		}
			
		#panel-frame
		{
			width:100%;
			position:fixed;
			height:50px;
		}
		
.panel
		{
			background-color:#f2f2f2;
			position:relative;
			width:100%;
			height:50px;
			box-shadow:0px 0px 10px rgba(0, 0, 0, 0.7);
			top:0px;	 
		}
		
		#header
		{
			background-color: #666699;
		}
		
		#footer
		{
		    position: relative;
			background-color: #666699;
		}
	</style>

JavaScript

function loadContent()
		{
			
		}

	   $('.block').click
	   (
			function()
			{
				
				var id= $(this).attr('dataid');
				var did="#" + id;
				var data_id= $(did).html();
				var panel= $('.panel');
				var panel_width=$('.panel').css('top');		
				var pixels = parseInt(panel_width,0);
				
				
				//close the element if it was already selected
				if($(this).hasClass("menu-item-selected"))
				{
					//remove css class
					$(this).removeClass("menu-item-selected");
					
					//close the item
					panel.animate({top: 0});
				}
				//open it up if not selected or changing element
				else
				{
					//remove all selected tags
					$('.block').removeClass("menu-item-selected");
					
					//add it to the current one
					$(this).addClass("menu-item-selected");
					
					//if opened, close open and open it up again
					if(pixels > 0)
					{
						panel.animate({top: 0},function()
						{
							//empty data
							$('.data').html('');
						})
						.animate({top: panel.outerHeight() },
							function()
							{
								//AJAX CALL OR COPY ELEMENT TO .data using loadContent(toElement,fromWhere); 
								// toElement -> CSS selector, fromWhere, CSSSelector
								$('.data').html(data_id);		
							}
						);
					}
					//open/close	panel
					else
					{
						panel.animate({top: pixels == 0 ? +panel.outerHeight() : 0},
						function()
						{
								//AJAX CALL OR COPY ELEMENT TO .data using loadContent(toElement,fromWhere); 
								// toElement -> CSS selector, fromWhere, CSSSelector	
								$('.data').html(data_id);	
						}
						);
					}
					
				}
				
				return false;												
			}
		);
	  
		$('.close').click
		(
			function() 
			{
				var panel= $('.panel');
				panel.animate({top: parseInt(panel.css('top'),0) == 0 ? +panel.outerHeight() : 0});
				return false;
			}
		);