index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#menu {
width: 250px;
height: 100vh;
background: black;
position: fixed;
left: -230px;
top: 0;
transition: all ease 1s;
}
1.js
window.onload = function() {
document.querySelector('#menu').onmouseover = menuShow; // по наведении выши показываем меню
document.querySelector('#menu').onmouseout = menuHide; // скрышаем меню
// Покажем меню при нажатии клавиши М
document.onkeydown= function(event) {
console.log(event);
if(event.code == 'KeyM') menuShow();
if(event.code == 'Escape') menuHide(); // Закроем меню по нажатию клавиши Escape
}
// показ меню
function menuShow() {
document.querySelector('#menu').style.left = 0;
}
// скрытие меню
function menuHide() {
document.querySelector('#menu').style.left = '-230px';
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#menu {
width: 250px;
height: 100vh;
background: black;
position: fixed;
left: -230px;
top: 0;
transition: all ease 1s;
}
1.js
window.onload = function() {
document.querySelector('#menu').onmouseover = menuShow; // по наведении выши показываем меню
document.querySelector('#menu').onmouseout = menuHide; // скрышаем меню
// Покажем меню при нажатии клавиши М
document.onkeydown= function(event) {
console.log(event);
if(event.code == 'KeyM') menuShow();
if(event.code == 'Escape') menuHide(); // Закроем меню по нажатию клавиши Escape
}
// показ меню
function menuShow() {
document.querySelector('#menu').style.left = 0;
}
// скрытие меню
function menuHide() {
document.querySelector('#menu').style.left = '-230px';
}
}
Комментариев нет:
Отправить комментарий