JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<label class="btn" for="btn">меню</label>
<input type="checkbox" id="btn">
<div class="topmenu">
	<ul>
		<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>
	</ul>
</div>
<p>
Новость о том, что ведущие внешние игроки в сирийском конфликте готовы дать дипломатии еще один, возможно, последний шанс, сообщили в среду в МИД РФ: «По договоренности министра иностранных дел Сергея Лаврова и госсекретаря Джона Керри 15 октября в Лозанне состоится встреча глав внешнеполитических ведомств России, США и ряда ключевых стран региона».


Боевые действия в Сирии грозят новым кризисом в отношениях с Западом
«Мы хотим провести встречу в узком формате, чтобы иметь деловой разговор»,— сказал российский министр в интервью телеканалу CNN. И выразил надежду на то, что эти переговоры «запустят серьезный диалог на основе принципов, которые содержатся в российско-американских договоренностях (достигнутых в Женеве 10 сентября.— “Ъ”), которые широко приветствовали, но которые, однако, не были реализованы».

Сергей Лавров уточнил, что в переговорах примут участие Турция, Саудовская Аравия и, возможно, Катар. Еще в среду утром информированные источники “Ъ” сообщали, что в Лозанну должен также прилететь глава МИД Ирана, однако в окончательном списке участников встречи его не оказалось.


Владимир Путин отменил визит во Францию из-за разногласий по Сирии
Предстоящая встреча в Швейцарии стала одной из тем, обсуждавшихся в среду вечером в ходе телефонного разговора между президентом РФ Владимиром Путиным, его французским коллегой Франсуа Олландом и канцлером ФРГ Ангелой Меркель. Как сообщила пресс-служба Кремля, господин Путин выразил надежду, что переговоры будут «результативными с точки зрения реального содействия урегулированию в Сирии».

В среду же вышло в эфир интервью Владимира Путина французскому телеканалу TF1, содержавшее весьма жесткие формулировки. Президент РФ...

CSS

html, body {background:#eee;}
.topmenu {position: fixed; z-index: 1; top: 0px; left:0; background:#fff; height:50px; width:100%;}
.btn {width:50px; height:50px; position:fixed; top:0; right:0; z-index:2; cursor:pointer; line-height:50px; text-align:center; background:#111; color:#fff;}
#btn {display:none;}
#btn:checked + div {display:block;}
.topmenu * {margin:0; padding:0; display:inline-block; list-style:none; line-height:50px; text-decoration:none;}
.topmenu ul {padding: 0 50px 0 20px;}
.topmenu a {padding:0 15px; color:#c00;}
.topmenu a:hover {padding:0 15px; color:#f00; background:#f7f7f7;}

.topmenu {display:block;}
.btn {display:none;}
@media (max-width: 767px) {
  .topmenu {display:none;}
  .btn {display:block;}
}