JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<header>
	<div class="topbar">
    		<div class="lobobox"></div>
    </div>
	<div class="menu clearfix">
                       <ul class="clearfix">
                            <li><a href="#">Главная</a></li>  
                            <li><a href="#">Новости</a></li>  
                            <li><a href="#">Статьи</a></li>  
                            <li><a href="#">Игры</a></li>  
                            <li><a href="#">Компании</a></li> 
                            <li><a href="#">Видео</a></li> 
                            <li><a href="#">Файлы</a></li>
                            <li><a href="#">Скриншоты</a></li>
                            <li><a href="#">Сообщества</a></li>
                            <li><a href="#">Блоги</a></li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                        <a href="#" id="pull">Меню</a>
    </div>
</header>
<div class="main">
	<div class="bg">
    </div>
    
    <div class="contentbox">
    	<div class="content">новости выводятся тут</div>
    	<div class="rightbox"></div>
    </div>

</div>

CSS

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style: none;
}

body{
	font-family: 'Trebuchet MS', sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: #000;
	margin: 0 0 1px;
	height: 100%;
	line-height: 1.5;
	}
	
header{
	background: #000;
	height: 74px;
	width: 100%;
	position: fixed;
	z-index: 100;
	top: 0px;
	left: 0px;}
	
.main{
	position: relative;
	min-height: 100%;
	margin: 76px auto -117px;
	max-width: 1400px;
	min-width: 250px;
	/* height: 1600px; */
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	}
	
.bg{
	width: 100%;
	background-image: url(img/bg.png);
	top:0px;
	left: 0px;
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
	height:0px;
	padding-bottom: 23%;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-animation-duration: 1.4s;
	-webkit-animation-name: tadaaa;
	}
	
.topbar{
	width:1000px;
	margin: 0 auto;
	}
	
.lobobox{
	background-color:#efefef;
	background-image:url(img/LogoBlack.png);
	width:200px;
	height:40px;}
	
	
.menu{
	height: 35px;  
    width: 100%;  
    background: #efefef;
    font-size: 120%;   
    position: relative;  
    border-bottom: 1px solid #d00;
}

.menu ul{ 
	margin: 0 auto;  
	width: 1000px;  
	height: 40px;
	padding:7px; }
		
.menu li{	
	display: inline;  
	float: left;
	padding:0 10px
	
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}

.menu li a{
	color: #4ba6da;}
	
.menu li a:hover,.menu li a:active{
	/*color: #d00;*/
	color:#00baff;}
	
#pull {  
    display: none; ...

JavaScript

$(function() {
			var pull 		= $('#pull');
				menu 		= $('.menu ul'),
				menuHeight	= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});
		});