index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Работа с input</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<div class="menu-item">
Меню 1
<div class="submenu">
Подменю
</div>
</div>
<div class="menu-item">
Меню 2
<div class="submenu">
Подменю
</div>
</div>
<div class="menu-item">
Меню 3
<div class="submenu">
Подменю
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
.menu-item {
border: 2px solid #66CDAA;
display: inline-block;
position: relative;
cursor: pointer;
}
.menu-item .submenu {
height: 40px;
width: 120px;
background: green;
position: absolute;
cursor: pointer;
}
script.js
document.getElementById('nav').onmouseover = function(event) {
var target = event.target; // event.target - DOM элемент, на котором было инициализировано событие.
if(target.className == 'menu-item') {
var s = target.getElementsByClassName('submenu');
closeMenu();
s[0].style.display='block';
}
}
document.onmouseover = function(event) {
var target = event.target;
if(target.className!='menu-item' && target.className!='submenu') {
closeMenu();
}
}
function closeMenu() {
var menu = document.getElementById('nav');
var subm = document.getElementsByClassName('submenu');
for(var i = 0; i < subm.length; i++) {
subm[i].style.display="none";
}
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Работа с input</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<div class="menu-item">
Меню 1
<div class="submenu">
Подменю
</div>
</div>
<div class="menu-item">
Меню 2
<div class="submenu">
Подменю
</div>
</div>
<div class="menu-item">
Меню 3
<div class="submenu">
Подменю
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
.menu-item {
border: 2px solid #66CDAA;
display: inline-block;
position: relative;
cursor: pointer;
}
.menu-item .submenu {
height: 40px;
width: 120px;
background: green;
position: absolute;
cursor: pointer;
}
script.js
document.getElementById('nav').onmouseover = function(event) {
var target = event.target; // event.target - DOM элемент, на котором было инициализировано событие.
if(target.className == 'menu-item') {
var s = target.getElementsByClassName('submenu');
closeMenu();
s[0].style.display='block';
}
}
document.onmouseover = function(event) {
var target = event.target;
if(target.className!='menu-item' && target.className!='submenu') {
closeMenu();
}
}
function closeMenu() {
var menu = document.getElementById('nav');
var subm = document.getElementsByClassName('submenu');
for(var i = 0; i < subm.length; i++) {
subm[i].style.display="none";
}
}
Комментариев нет:
Отправить комментарий