<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<!-- Кнопка открытия меню -->
<button class="menu" id="mn" onmouseover="MouseMenu()" onclick="Oppener()">≡</button>
<!-- Конец кнопки меню -->
<!-- Меню -->
<div id="rw" class="menu_notap">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Search</a>
<a href="#" class="close_menu" id="close" onclick="Closer()">✖</a>
</div>
<!-- Конец меню -->
<!-- JavaScript -->
<script>
// Функция выполняемая при наведении на кнопку меню
function MouseMenu(){
document.getElementById('mn').innerHTML="∨";
}
// Функция открытия меню
function Oppener(){
document.getElementById('mn').className="menu_open";
document.getElementById('rw').className="menu_tap";
}
// Функция закрытия меню
function Closer(){
document.getElementById('mn').className="menu";
document.getElementById('rw').className="menu_notap";
document.getElementById('mn').innerHTML="≡";
}
</script>
<!-- Конец JavaScript -->
</body>
</html>
body{
padding-left:10px;
padding-top:15px;
margin: 0;
background-color: rgb(145, 145, 145);
}
.menu{
width: 50px;
height: 50px;
font-size: 25px;
color: #fff;
border: 0;
background-color: #000;
transition: ease-in 1s;
}
.menu:hover{
width: 50px;
height: 50px;
font-size: 25px;
color: rgb(0, 143, 0);
border: 0;
background-color: #000;
cursor: pointer;
}
.menu_open{
display: none;
}
.menu_notap{
display: none;
}
.menu_tap{
display:flex;
flex-direction: column;
width: 10%;
height:100%;
background-color: #000;
font-size: 30px;
}
a{
text-decoration: none;
color: #fff;
padding: 30% 20px;
margin: 0 auto;
transition: ease-in 0.7s;
cursor: pointer;
}
a:hover{
color:rgb(0, 143, 0);
}
#close:hover{
color:rgb(255, 0, 0);
}
@media screen and (max-width:1260px){
.menu_tap{
display:flex;
flex-direction: column;
width:12%;
height:100%;
background-color: #000;
font-size: 30px;
}
@media screen and (max-width:1010px){
.menu_tap{
display:flex;
flex-direction: column;
width:14%;
height:100%;
background-color: #000;
font-size: 30px;
}
@media screen and (max-width:860px){
.menu_tap{
display:flex;
flex-direction: column;
width:16%;
height:100%;
background-color: #000;
font-size: 20px;
}
@media screen and (max-width:600px){
.menu_tap{
display:flex;
flex-direction: column;
width:18%;
height:100%;
background-color: #000;
font-size: 17px;
}
@media screen and (max-width:500px){
.menu_tap{
display:flex;
flex-direction: column;
width:20%;
height:100%;
background-color: #000;
font-size: 16px;
}
@media screen and (max-width:410px){
.menu_tap{
display:flex;
flex-direction: column;
width:18%;
height:100%;
background-color: #000;
font-size: 14px;
}
@media screen and (max-width:370px){
.menu_tap{
display:flex;
flex-direction: column;
width:20%;
height:100%;
background-color: #000;
font-size: 12px;
}
Внутри процедур