<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<div class="logo">LOGO</div>
<nav>
<ul>
<li><a href="#">О Нас</a></li>
<li><a href="#">Услуги</a></li>
<li class="sub-menu"><a href="#">Вакансии</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Новости</a></li>
<li class="sub-menu"><a href="#">Соглашение</a>
<ul>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>
<li class="navEnter"><a href="#"><span>Войти</span></a></li>
<li class="navReg"><a href="#"><span>Зарегестрироватся</span></a></li>
</ul>
</nav>
<div class="menu-toggle"><i class="fa fa-bars"></i></div>
</header>
<div class="body2">
<div class="content">
<h1>This one is the sub-section or widget title</h1>
<h2>Next one is the item title inside widgets</h2>
<h3>This is a label or CTA text</h3>
<p>This is the body text which is used for most of the design, like paragraphs, lists, etc.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('nav').toggleClass('active')
})
$('ul li').click(function(){
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
})
})
</script>
</body>
</html>@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
font-size: 14px;
}
.container {
width: 1200px;
margin-right: auto;
margin-left: auto;
}
.content {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
header {
top: 0;
left: 0;
padding: 0 100px;
background: #fff;
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 1;
}
header .logo {
color: rgba(31, 32, 65, 0.5);
height: 50px;
line-height: 50px;
font-size: 24px;
float: left;
font-weight: bold;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: flex;
}
header nav ul li {
list-style: none;
position: relative;
transition: 0.5s;
}
header nav ul li.sub-menu:before {
content: "";
font-family: fontAwesome;
position: absolute;
line-height: 50px;
color: rgba(31, 32, 65, 0.5);
right: 2px;
}
header nav ul li.active.sub-menu:before {
content: "";
}
header nav ul li ul {
position: absolute;
left: 0;
background: rgba(31, 32, 65, 0.05);
display: none;
}
header nav ul li ul li {
display: block;
width: 200px;
transition: 0.5s;
}
header nav ul li a {
height: 50px;
line-height: 50px;
padding: 0 20px;
color: rgba(31, 32, 65, 0.5);
text-decoration: none;
display: block;
transition: 0.5s;
}
header nav ul li a:hover, header nav ul li a.active {
color: #fff;
background: #BC9CFF;
}
.navEnter span {
border: 2px solid #BC9CFF;
border-radius: 22px;
padding: 5px 18px;
color: #BC9CFF;
font-weight: bold;
}
.navEnter span:hover, .navEnter span.active {
color: #fff;
background: #BC9CFF;
}
.navEnter a:hover, .navEnter a.active {
color: none;
background: none;
}
.navReg span {
border: 2px solid #BC9CFF;
border-radius: 22px;
padding: 5px 18px;
color: #fff;
background: #BC9CFF;
font-weight: bold;
}
.navReg span:hover, .navReg span.active {
color: #BC9CFF;
background: #fff;
}
.navReg a:hover, .navReg a.active {
color: none;
background: none;
}
header nav ul li.active ul {
display: block;
transition: 0.5s;
}
.menu-toggle {
color: rgba(31, 32, 65, 0.5);
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
@media (max-width: 991px) {
.container {
width: 100%;
position: relative;
margin-right: auto;
margin-left: auto;
}
header {
padding: 0 20px;
}
header nav {
position: absolute;
width: 100%;
height: calc( 100vh - 50px );
top: 50px;
left: -100%;
transition: 0.5s;
}
header nav.active {
left: 0;
}
header nav ul {
display: block;
text-align: center;
}
header nav ul a {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
header nav ul li.sub-menu:before {
right: 10px;
}
.menu-toggle {
display: block;
}
header nav ul li.active ul {
position: relative;
background: rgba(31, 32, 65, 0.05);
}
header nav ul li ul li {
width: 100%;
}
}
header nav ul li ul {
background: #f7f7f7;
}
Простой
Простой
Средний
