JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="header">
  <ul>
    <li class="test-1"><a href="test-1">test-1</a></li>
    <li class="test-2"><a href="test-2">test-2</a></li>
    <li class="test-3"><a href="test-3">test-3</a></li>
    <li class="test-4"><a href="">test-4</a></li>
    <li class="test-5"><a href="">test-5</a></li>
    <li class="test-6"><a href="">test-6</a></li>
    <li class="test-7"><a href="">test-7</a></li>
    <li class="test-8"><a href="">test-8</a></li>
    <li class="test-9"><a href="">test-9</a></li>
    <li class="test-10"><a href="">test-10</a></li>
    <li class="test-11"><a href="">test-11</a></li>
    <li class="test-12"><a href="">test-12</a></li>
    <li class="test-13"><a href="">test-13</a></li>
    <li class="test-14"><a href="">test-14</a></li>
    <li class="test-15"><a href="">test-15</a></li>
    <li class="test-16"><a href="">test-16</a></li>
    <li class="test-17"><a href="">test-17</a></li>
    <li class="test-18"><a href="">test-18</a></li>
    <li class="test-19"><a href="">test-19</a></li>
    <li class="test-20"><a href="">test-20</a></li>
    <li class="test-21"><a href="">test-21</a></li>
    <li class="test-22"><a href="">test-22</a></li>
    <li class="test-23"><a href="">test-23</a></li>
    <li class="test-24"><a href="">test-24</a></li>
    <li class="test-25"><a href="">test-25</a></li>
  </ul>
</div>

<div class="content-page">
<nav class="menu">MENU</nav>
  <div class="content">
  <p class="page-1">Страница-1</p>
  <p style="display: none;" class="page-2">Страница-2</p>
  <p style="display: none;" class="page-3">Страница-3</p>
  <p style="display: none;" class="page-4">Страница-4</p>
  <p style="display: none;" class="page-5">Страница-5</p>
  <p style="display: none;" class="page-6">Страница-6</p>
  <p style="display: none;" class="page-7">Страница-7</p>
  <p style="display: none;" class="page-8">Страница-8</p>
  <p style="display:...

CSS

*{
margin: 0;
padding: 0;
}


a,ul{
  text-decoration:none;
  list-style:none;
  color:#fff;
}


.menu{
  background:#000;
  color:#fff;
  font-weight:bold;
  padding:10px;
  position:fixed;
  width:100%;
  height:20px;
  z-index:3;
}
.menu:hover{
  background:#fff000;
  color:#000;
  cursor:pointer;
}
.header{
  float:left;
  width:200px;
  height:100%;
  display:block;
  z-index:1;
  position:fixed;
  background:#444;
  overflow:auto;
  top:40px;
}
.header>ul>li>a{
  padding:10px;
  color:#ccc;
  background:#444;
  display:block;
}
.header>ul>li>a:hover{
  background:#fff000;
  color:#000;
}
.content{
  float:right;
  width:100%;
  height:1000px;
  display:block;
  z-index:2;
  position: relative;
  background:#fff;
  color:#000;
}
.content>p{
  padding:5px;
  margin-top:40px;
}

JavaScript

var contador = 1;
main();
function main(){
    $('.menu').click(function(){
        
      if(contador == 1){
        
            $('.content').animate({
                left:'200px'
            })
           $('body').css({'overflow':'hidden'});
            contador = 0;
        } else{
            contador = 1;
            $('body').css({'overflow':'auto'});
           $('.content').animate({
                left:'0px'
            }) 
        }
    });
    
  $('a').click(function(){
  var pageNum = $(this).attr('href').split('-')[1];
	$('.content>p').hide();
	$('.page-'+pageNum).show();
  return false;
   });
   
	$('.content').click(function(){
		$(this).animate({left:'0px'});
    contador = 1;
	})
    
    
}