Форум

Sonya00 · #1 (**permalink**) 06.05.2020, 18:53

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>

<script type="text/javascript">
document.getElementById('nav').onmouseover= function(event) {
var target = event.target; // где был клик?
if (target.className == 'menu-item') {
var s=target.getElementsByClassName('submenu');
closeMenu();
s[0].style.display='block';
}
}
document.onmousemove=function(event) {
var target = event.target; // где был клик?
console.log(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";
}
}
</script>

<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>
</body>
</html>

laimas · #2 (**permalink**) 06.05.2020, 19:00

https://learn.javascript.ru/onload-ondomcontentloaded

иначе на момент document.getElementById('nav') объект недоступен. В отладчик посмотреть.

рони · #3 (**permalink**) 06.05.2020, 19:06

Sonya00,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Sonya00 · #4 (**permalink**) 06.05.2020, 19:14

Готово

рони · #5 (**permalink**) 06.05.2020, 19:23

Сообщение от Sonya00

Готово

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>
<body>
  <script>
document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("nav").onmouseover = function(event) {
    var target = event.target;
    if (target.className == "menu-item") {
      var s = target.getElementsByClassName("submenu");
      closeMenu();
      s[0].style.display = "block";
    }
  };
  document.onmousemove = function(event) {
    var target = event.target;
    console.log(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";
    }
  }
});
  </script>
  <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>
</body>
</html>

Sonya00 · #6 (**permalink**) 06.05.2020, 20:10

Спасибо. Но этот код был с сайта, вот мой, но он так же не работает. но пишется по понятнее чем пред. код.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/menu-child-child.css">
	<link rel="stylesheet" href="css/clean.css">
	
	<title>Online Textbook</title>
</head>
<body>
	<div class="hover">
		<div class="main">
			<div class="logo">
				<h1><a href="#" class="change-main">Online Textbook</a></h1>
				<div class="menu">
					<ul class="menu-child">
						<li class="indent"><a class="change" href="#">Об учебнике</a></li>


						<li class="indent"><a class="change" href="#">Практические работы</a>
							<ul class="menu-child-child">
								<li><a href="#">ffffffffff</a></li>
							</ul>
						</li>




						<li class="indent"><a class="change" href="#">Тестирование</a>
							<ul class="menu-child-child">
								<li><a href="#">fffffffffff</a></li>
							</ul>
						</li>

						<li class="indent"><a class="change" href="#">Дополнительная информация</a>
							<ul class="menu-child-child">
								<li><a href="#">ffffff</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

<script>
		var el document.getElementByClassName('menu-child');
	for (var i=0; i<element.length; i++;)
	el[i].addEventListener('mouseenter', showSub, false);
	el[i].addEventListener('mouseleave', hideSub, false);

	function showSub() {
		if (this.children.length>1) {
			this.children[1].style.height = "auto";
			this.children[1].style.height = "opacity";
			this.children[1].style.height = "visible";
		}
		else {
			return: false;
		}
	}
	</script>

body {
	margin: 0;
	font-family: Roboto, sans-serif;
}

.hover {
	display: flex;
	justify-content: center;
}

.main {
	margin: 35px 35px 35px 35px;
	
}

.logo {
display: flex;

}

.change-main {
	color: black;
	text-transform: uppercase;
	text-decoration: none;
	/*font-size: 0.9em;*/
}

.menu {
	padding: 0px 0px 0px 200px;
}

.menu-child {
	display: flex;
}

.indent {
	display: block;
	padding: 0px 15px 0px 0px;
}

.change {
	text-transform: uppercase;
	text-decoration: none;
	color: black;
	font-size: 11.5px; 
	letter-spacing: 2px; /*Отступы между букв*/
}

.menu-child-child {
	[overflow: hidden; height: 0; opacity: 0; transition: all 0.5s; ease-in;]
}

рони · #7 (**permalink**) 06.05.2020, 20:33

Сообщение от Sonya00

var el document.getElementByClassName('menu-child')

Форум

Справочник

Discord чат

Курсы javascript