Есть следующее меню:
<div class="nav_link">
<div class="nav_link_text">
<div id="sweeties" class="menu"> <span id="sweeties-title" class="title">???????? (????? ????)!</span>
<ul>
<li>????</li>
<li>??????</li>
<li>????????</li>
</ul>
</div>
</div>
</div>
<script>
var titleElem = document.getElementById('sweeties-title');
titleElem.onclick = function () {
var menu = this.parentNode
if (hasClass(menu, 'menu-open')) {
removeClass(menu, 'menu-open');
} else {
addClass(menu, 'menu-open');
}
}
// -------------- helpers --------------
function addClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) return;
}
if (el.className == "") el.className = cls
else el.className += ' ' + cls
}
function hasClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) return true;
}
}
function removeClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) c.splice(i, 1);
}
el.className = c.join(' ');
}
</script>
Как можно сделать так, что пользователь открывает меню, переходит по внутреннему пункту, и на новой странице меню не закрывается, а остаётся открытым?
Как сделать меню открывающимся, решено.
Но почему-то при переходе на другую страницу меню закрывается.
Код первой страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav_link">
<div class="nav_link_text">
<div id="sweeties" class="menu"> <span id="sweeties-title" class="title">???????? (????? ????)!</span>
<ul>
<li><a href="#">????</a></li>
<li><a href="1.html">??????</a></li>
<li>????????</li>
</ul>
</div>
</div>
</div>
<script>
var titleElem = document.getElementById('sweeties-title');
var menu = titleElem.parentNode;
if(localStorage.getItem('menu') != undefined && localStorage.getItem('menu') == true) {
addClass(menu, 'menu-open');
}
titleElem.onclick = function () {
if (hasClass(menu, 'menu-open')) {
localStorage.setItem('menu', false); // false - закрыт
removeClass(menu, 'menu-open');
} else {
localStorage.setItem('menu', true); // true - открыт
addClass(menu, 'menu-open');
}
}
// -------------- helpers --------------
function addClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) return;
}
if (el.className == "") el.className = cls
else el.className += ' ' + cls
}
function hasClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) return true;
}
}
function removeClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) c.splice(i, 1);
}
el.className = c.join(' ');
}
</script>
</body>
</html>
Код второй страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav_link">
<div class="nav_link_text">
<div id="sweeties" class="menu"> <span id="sweeties-title" class="title">???????? (????? ????)!</span>
<ul>
<li><a href="#">????</a></li>
<li><a href="1.html">??????</a></li>
<li>????????</li>
</ul>
</div>
</div>
</div>
<script>
var titleElem = document.getElementById('sweeties-title');
var menu = titleElem.parentNode;
if(localStorage.getItem('menu') != undefined && localStorage.getItem('menu') == true) {
addClass(menu, 'menu-open');
}
titleElem.onclick = function () {
if (hasClass(menu, 'menu-open')) {
localStorage.setItem('menu', false); // false - закрыт
removeClass(menu, 'menu-open');
} else {
localStorage.setItem('menu', true); // true - открыт
addClass(menu, 'menu-open');
}
}
// -------------- helpers --------------
function addClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) return;
}
if (el.className == "") el.className = cls
else el.className += ' ' + cls
}
function hasClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) return true;
}
}
function removeClass(el, cls) {
for (var c = el.className.split(' '), i = c.length - 1; i >= 0; i--) {
if (c[i] == cls) c.splice(i, 1);
}
el.className = c.join(' ');
}
</script>
</body>
</html>