Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:
RSS
ВКонтакте

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

помогите с меню на JS

Web программирование
36K
30 января 2011 года
twi5ter
37 / / 06.08.2009
есть css
<STYLE type=text/css>
#menu { PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 194px; HEIGHT: 22px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; }
#menu LI { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; }
#menu LI A { background: transparent url('hover.gif') no-repeat; clip:rect(0,194,22,0); width:194; height:22; FONT-FAMILY: verdana, arial, sans-serif; TEXT-DECORATION: none; }
#menu LI UL { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; }
#menu LI UL LI { BORDER-LEFT: 0px; COLOR: #fff; BORDER-TOP: 0px; BORDER-RIGHT: 0px; }
</STYLE>


код на страничке примерно такой
<UL id=menu>
<LI><A onclick="openMenu(this);return false" href="#">&nbsp;&nbsp;menu 1</A>
<UL>
<LI><A href="#">&nbsp;&nbsp;sub menu 1</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 2</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 3</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 4</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 5</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 6</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 7</A></LI></UL></LI>
<LI><A onclick="openMenu(this);return false" href="#">&nbsp;&nbsp;menu 2</A>
<UL>
<LI><A href="#">&nbsp;&nbsp;sub menu 1</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 2</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 3</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 4</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 5</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 6</A></LI>
<LI><A href="#">&nbsp;&nbsp;sub menu 7</A></LI></UL></LI>
</UL>


скрипт JS
<SCRIPT type=text/javascript>
function allClose(){
var list = document.getElementById("menu").getElementsByTagName("ul");
for(var i=0;i<list.length;i++){
list.style.display = "none";
}
}
function openMenu(node){
allClose();
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</SCRIPT>


Это выпадающее меню! Хочу добиться того, чтобы при нажатии на элемент меню верхнего уровня, когда он становится активным, менялся background, и у выпавшего блока меню тоже
сделал бы сам, но JS вообще не знаю.
добавил файл с кодом этого меню!
По порядку
Сначала полезные
Сначала решения

22 ответа

36K
31 января 2011 года
twi5ter
37 / / 06.08.2009
ну или просто подскажите как обратиться к элементу
<LI><A onclick="openMenu(this);return false" href="#">menu 1</A>
<LI><A href="#">sub menu 1</A></LI>

а стиль можно поменять с помощью скриптов

document.getElementById(div_id).className='class1';
document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";
244
31 января 2011 года
UAS
2.0K / / 19.07.2006
Цитата:
ну или просто подскажите как обратиться к элементу

К какому из них? К li, к a? Тем более верстка у вас неправильная абсолютно.

36K
31 января 2011 года
twi5ter
37 / / 06.08.2009
к li
а что не так в верстке? я новичок, готов выслушать все предложения!
13
31 января 2011 года
RussianSpy
3.0K / / 04.07.2006
 
Код:
<UL id=menu>

кавычки пропущены

Если элементы меню будут обрабатываться скриптом, то незачем их оформлять тегом <a>.

В остальном приемлемо
244
31 января 2011 года
UAS
2.0K / / 19.07.2006
/ code] + оформите отступы визуальные - и тогда я с радость вам помогу, а так разбираться - тяжко
36K
31 января 2011 года
twi5ter
37 / / 06.08.2009
[HTML]
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu</title>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<META lang="ru" name="description" content="menu">
<META lang="ru" name="keywords" content="menu">
<script type="text/javascript">
function allClose(){
var list = document.getElementById("menu").getElementsByTagName("ul");
for(var i=0;i<list.length;i++){
list.style.display = "none";
}
}
function openMenu(node){
allClose();
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>
<style type="text/css">
#menu {
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
width: 194px;
height: 22px;
padding-right: 0px;
padding-top: 0px;
}
#menu li {
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li a {
background: transparent url('hover.gif') no-repeat;
clip:rect(0,194,22,0);
width:194;
height:22;
font-family: verdana, arial, sans-serif;
text-decoration: none;
}
#menu li ul {
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li ul li {
border-left: 0px;
color: #fff;
border-top: 0px;
border-right: 0px;
}
</style>
</head>

<body onload="allClose()">
<div>
<ul id="menu">
<li>
<a onClick="openMenu(this);return false" href="#">menu 1</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<a onClick="openMenu(this);return false" href="#">menu 2</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<a onClick="openMenu(this);return false" href="#">menu 3</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<a onClick="openMenu(this);return false" href="#">menu 4</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<a onClick="openMenu(this);return false" href="#">menu 5</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<a onClick="openMenu(this);return false" href="#">menu 6</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<a onClick="openMenu(this);return false" href="#">menu 7</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<a onClick="openMenu(this);return false" href="#">menu 8</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

</ul>
</div>
</body>
</html>
[/HTML]

теперь о том, что мне нужно
хочу чтобы после клика на элемент меню верхнего уровня(пример "menu 1") его background заменялся на другой("active.gif" - синего цвета), а background выпадающего меню (пример "sub menu 1", "sub menu 2", "sub menu 2" ...) заменялся на другой("linked.gif" - серый, но темнее). Буду очень признателен, а то я уже заколебался всяко пробовать, достучаться до необходимого элемента меню не получается.

p.s. Сделал все отступы, как просили но тут они почему-то исчезли! В .zip исходнике есть!
32K
31 января 2011 года
Clubberry
186 / / 19.01.2011
оффтоп.

весь код пожалуйста вставьте в теги
 
Код:
 
, чтобы не занимали много места на страничке.
32K
31 января 2011 года
Clubberry
186 / / 19.01.2011
на hover у меня вышло сделать, при наводке срабатывает, да и то, это при помощи css, а вот active срабатывает только при нажатии на кнопку меню и сабменю, но не заменяет бекграунд.
36K
31 января 2011 года
twi5ter
37 / / 06.08.2009
Цитата: Clubberry
на hover у меня вышло сделать, при наводке срабатывает, да и то, это при помощи css, а вот active срабатывает только при нажатии на кнопку меню и сабменю, но не заменяет бекграунд.



вот и у меня такая же финя! по любому ведь можно сделать при помощи JS

277
31 января 2011 года
arrjj
1.7K / / 26.01.2011
Вот пример как делать не надо:)
Свернуть исходник 
Код:
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu</title>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<META lang="ru" name="description" content="menu">
<META lang="ru" name="keywords" content="menu">
<script type="text/javascript">
var active='';
function installact()
{
var list = document.getElementsByClassName("par");
for(var i=0;i<list.length;i++){
list.&#111;&#110;click=function (){ openMenu(this);};
list.&#111;&#110;mouseover=function (){ if(active!=this) this.className="paro";};
list.&#111;&#110;mouseout=function (){ if(active!=this) this.className="par";};
}
}

function allClose(){
var list = document.getElementsByClassName("para");
for(var i=0;i<list.length;i++){
list.className="par";
}
list = document.getElementById("menu").getElementsByTagName("ul");
for(var i=0;i<list.length;i++){
list.style.display = "none";
}
}
function openMenu(node){
allClose();
active=node;
node.className="para";
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>

<style type="text/css">
.par {
background: url('hover.gif');
}
.paro {
background: url('linked.gif');
cursor: pointer;
}
.para {
background: url('active.gif');
}
#menu {
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
width: 194px;
height: 22px;
padding-right: 0px;
padding-top: 0px;
}
#menu li {
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li a {
background: url('hover.gif');
clip:rect(0,194,22,0);
width:194;
height:22;
font-family: verdana, arial, sans-serif;
text-decoration: none;
}
#menu li ul {
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li ul li {
border-left: 0px;
color: #fff;
border-top: 0px;
border-right: 0px;
}
</style>

</head>

<body>
<div>
<ul id="menu" class="menu">
<li>
<div class="par">menu 1</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 2</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 3</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 4</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 5</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 6</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 7</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 8</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

</ul>
</div>
<script type="text/javascript">

installact();
allClose();
</script>
</body>
</html>
32K
31 января 2011 года
Clubberry
186 / / 19.01.2011
Сделал фокус. Теперь бекграунд меняется и остаётся активным, но опять же, оно срабатывает и на сабменю. Если бы переписать полностью весь код с ноля, тогда я бы может и понял как это сделать, но лень перебарывает))
277
31 января 2011 года
arrjj
1.7K / / 26.01.2011
Clubberry, см выше
32K
31 января 2011 года
Clubberry
186 / / 19.01.2011
Цитата: arrjj
Clubberry, см выше


у тебя js переписан, а я попытался воспроизвести это на css) я в js не очень хорошо шарю)

36K
31 января 2011 года
twi5ter
37 / / 06.08.2009
Цитата: arrjj
Вот пример как делать не надо:)



пасибо! один момент, почему эта штука в IE не работает?

277
31 января 2011 года
arrjj
1.7K / / 26.01.2011
Потомучто ИЕ не поддерживает document.getElementsByClassName я написал там только для примера. Вот тож самое но будет ещё и в ИЕ работать:

Свернуть исходник 
Код:
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu</title>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<META lang="ru" name="description" content="menu">
<META lang="ru" name="keywords" content="menu">
<script type="text/javascript">
var active='';
function installact()
{
var list = document.getElementsByClassName("par");
for(var i=0;i<list.length;i++){
list.&#111;&#110;click=function (){ openMenu(this);};
list.&#111;&#110;mouseover=function (){ if(active!=this) this.className="paro";};
list.&#111;&#110;mouseout=function (){ if(active!=this) this.className="par";};
}
}

function allClose(){
var list = document.getElementsByClassName("para");
for(var i=0;i<list.length;i++){
list.className="par";
}
list = document.getElementById("menu").getElementsByTagName("ul");
for(var i=0;i<list.length;i++){
list.style.display = "none";
}
}
function openMenu(node){
allClose();
active=node;
node.className="para";
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>

<style type="text/css">
.par {
background: url('hover.gif');
}
.paro {
background: url('linked.gif');
cursor: pointer;
}
.para {
background: url('active.gif');
}
#menu {
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
width: 194px;
height: 22px;
padding-right: 0px;
padding-top: 0px;
}
#menu li {
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li a {
background: url('hover.gif');
clip:rect(0,194,22,0);
width:194;
height:22;
font-family: verdana, arial, sans-serif;
text-decoration: none;
}
#menu li ul {
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li ul li {
border-left: 0px;
color: #fff;
border-top: 0px;
border-right: 0px;
}
</style>

</head>

<body>
<div>
<ul id="menu" class="menu">
<li>
<div class="par">menu 1</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 2</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 3</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 4</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 5</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 6</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 7</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 8</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

</ul>
</div>
<script type="text/javascript">
if(document.getElementsByClassName == undefined)
{
    document.getElementsByClassName = function(cl)
    {
        var retnode = [];
        var myclass = new RegExp('\\b'+cl+'\\b');
        var elem = this.getElementsByTagName('*');
        for (var i = 0; i < elem.length; i++)
        {
            var classes = elem.className;
            if (myclass.test(classes))
            {
                retnode.push(elem);
            }
        }
        return retnode;
    }
}


installact();
allClose();
</script>
</body>
</html>
36K
02 февраля 2011 года
twi5ter
37 / / 06.08.2009
arrjj, у меня к вам вопрос, если можно! в общем дело такое, встраиваю меню в таблицу и оно как то не особо встраивается! что касается IE, то там еще как-то похоже, то в google chrome ничего подобного не наблюдается(
я как бы хочу чтобы оно лежало в ячейке, и при раскрытии sub menu, ячейка растягивалась, а все что под ней смещалось ниже!
277
02 февраля 2011 года
arrjj
1.7K / / 26.01.2011
twi5ter, код покажи
36K
02 февраля 2011 года
twi5ter
37 / / 06.08.2009
вот код
[HTML]
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu</title>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<META lang="ru" name="description" content="menu">
<META lang="ru" name="keywords" content="menu">
<script type="text/javascript">
var active='';
function installact()
{
var list = document.getElementsByClassName("par");
for(var i=0;i<list.length;i++){
list.onclick=function (){ openMenu(this);};
list.onmouseover=function (){ if(active!=this) this.className="paro";};
list.onmouseout=function (){ if(active!=this) this.className="par";};
}
}

function allClose(){
var list = document.getElementsByClassName("para");
for(var i=0;i<list.length;i++){
list.className="par";
}
list = document.getElementById("menu").getElementsByTagName("ul");
for(var i=0;i<list.length;i++){
list.style.display = "none";
}
}
function openMenu(node){
allClose();
active=node;
node.className="para";
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>

<style type="text/css">
.par {
background: url('hover.gif');
}
.paro {
background: url('linked.gif');
cursor: pointer;
}
.para {
background: url('active.gif');
}
#menu {
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
width: 194px;
height: 22px;
padding-right: 0px;
padding-top: 0px;
}
#menu li {
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li a {
background: url('hover.gif');
clip:rect(0,194,22,0);
width:194;
height:22;
font-family: verdana, arial, sans-serif;
text-decoration: none;
}
#menu li ul {
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li ul li {
border-left: 0px;
color: #fff;
border-top: 0px;
border-right: 0px;
}
</style>

</head>

<body>
<table border="1" align="center" width="194px"><tr><td>
<div>
<ul id="menu" class="menu">
<li>
<div class="par">menu 1</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 2</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 3</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 4</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 5</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 6</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 7</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 8</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

</ul>
</div>
<script type="text/javascript">
if(document.getElementsByClassName == undefined)
{
document.getElementsByClassName = function(cl)
{
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++)
{
var classes = elem.className;
if (myclass.test(classes))
{
retnode.push(elem);
}
}
return retnode;
}
}


installact();
allClose();
</script>
</td></tr>
<tr height="20px"><tr>привет</tr></tr>
<tr height="50px"><tr>привет</tr></tr>
<tr height="20px"><tr>привет</tr></tr>
</body>
</html>
[/HTML]
277
02 февраля 2011 года
arrjj
1.7K / / 26.01.2011
2 ошибки было: для #menu height в стиле был указан и "приветы" были в <tr><tr> а не в <tr><td> После чего в ff врожде норм отображается
Свернуть исходник 
Код:
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu</title>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<META lang="ru" name="description" content="menu">
<META lang="ru" name="keywords" content="menu">
<script type="text/javascript">
var active='';
function installact()
{
var list = document.getElementsByClassName("par");
for(var i=0;i<list.length;i++){
list.&#111;&#110;click=function (){ openMenu(this);};
list.&#111;&#110;mouseover=function (){ if(active!=this) this.className="paro";};
list.&#111;&#110;mouseout=function (){ if(active!=this) this.className="par";};
}
}

function allClose(){
var list = document.getElementsByClassName("para");
for(var i=0;i<list.length;i++){
list.className="par";
}
list = document.getElementById("menu").getElementsByTagName("ul");
for(var i=0;i<list.length;i++){
list.style.display = "none";
}
}
function openMenu(node){
allClose();
active=node;
node.className="para";
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>

<style type="text/css">
.par {
background: url('hover.gif');
}
.paro {
background: url('linked.gif');
cursor: pointer;
}
.para {
background: url('active.gif');
}
#menu {
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
width: 194px;
//height: 22px;
padding-right: 0px;
padding-top: 0px;
}
#menu li {
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li a {
background: url('hover.gif');
clip:rect(0,194,22,0);
width:194;
height:22;
font-family: verdana, arial, sans-serif;
text-decoration: none;
}
#menu li ul {
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
#menu li ul li {
border-left: 0px;
color: #fff;
border-top: 0px;
border-right: 0px;
}
</style>

</head>

<body>
<table border="1" align="center" width="194px">
<tr>
<td>
<div>
<ul id="menu" class="menu">
<li>
<div class="par">menu 1</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 2</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 3</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 4</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 5</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 6</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 7</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="par">menu 8</div>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>

</ul>
</div>
</td></tr>
<tr height="20px"><td>привет</td></tr>
<tr height="50px"><td>привет</td></tr>
<tr height="20px"><td>привет</td></tr>
<script type="text/javascript">
if(document.getElementsByClassName == undefined)
{
    document.getElementsByClassName = function(cl)
    {
        var retnode = [];
        var myclass = new RegExp('\\b'+cl+'\\b');
        var elem = this.getElementsByTagName('*');
        for (var i = 0; i < elem.length; i++)
        {
            var classes = elem.className;
            if (myclass.test(classes))
            {
                retnode.push(elem);
            }
        }
        return retnode;
    }
}


installact();
allClose();
</script>
</body>
</html>
36K
02 февраля 2011 года
twi5ter
37 / / 06.08.2009
вот спасибо тебе! в который раз помог =)
36K
18 февраля 2011 года
twi5ter
37 / / 06.08.2009
здрасьте! опять трабл!
все то же меню, хочу чтобы выбранная категория не закрывалась при перезагрузке страницы.
<li><a href="#">sub menu 1</a></li>
на месте решетки у меня стоит index.php?category=<параметр>&page=<параметр>
немного объясню category=<параметр>: 0 - menu1, 1 -menu2 и т.д., аналогично для page=<парметр>: 0 - sub menu1, 1 - sub menu2 и т.д.
параметры категория и страница хранятся в сессии и к ним можно обратиться в любое время с помощью $_SESSION['category'] и $_SESSION['page'].

теперь код:
index.php
[HTML]
<?php
session_start(); // открываем сеанс
if(IsSet($_GET['category'])) // get-параметр >> категория
$_SESSION['category'] = $_GET['category'];
else $_SESSION['category'] = 0;
if(IsSet($_GET['page'])) // get-параметр >> страница
$_SESSION['page'] = $_GET['page'];
else $_SESSION['page'] = 0;
?>
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu</title>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<META lang="ru" name="description" content="menu">
<META lang="ru" name="keywords" content="menu">
<link rel="stylesheet" href="css/style.css">
<script src="js/menu.js" type="text/javascript"></script>
</head>
<body>
<table border="1" align="center" width="194px" cellspacing="2px" cellpadding="2px">
<tr><td>
<div>
<ul id="menu" >
<li>
<div class="topLevelMenu">menu 1</div>
<ul>
<li><a href="index.php?category=0&page=0">sub menu 1</a></li>
<li><a href="index.php?category=0&page=1">sub menu 2</a></li>
<li><a href="index.php?category=0&page=2">sub menu 3</a></li>
<li><a href="index.php?category=0&page=3">sub menu 4</a></li>
<li><a href="index.php?category=0&page=4">sub menu 5</a></li>
<li><a href="index.php?category=0&page=5">sub menu 6</a></li>
<li><a href="index.php?category=0&page=6">sub menu 7</a></li>
</ul>
</li>


<li>
<div class="topLevelMenu">menu 2</div>
<ul>
<li><a href="index.php?category=1&page=0">sub menu 1</a></li>
<li><a href="index.php?category=1&page=1">sub menu 2</a></li>
<li><a href="index.php?category=1&page=2">sub menu 3</a></li>
<li><a href="index.php?category=1&page=3">sub menu 4</a></li>
<li><a href="index.php?category=1&page=4">sub menu 5</a></li>
<li><a href="index.php?category=1&page=5">sub menu 6</a></li>
<li><a href="index.php?category=1&page=6">sub menu 7</a></li>
</ul>
</li>

<li>
<div class="topLevelMenu">menu 3</div>
<ul>
<li><a href="index.php?category=2&page=0">sub menu 1</a></li>
<li><a href="index.php?category=2&page=1">sub menu 2</a></li>
<li><a href="index.php?category=2&page=2">sub menu 3</a></li>
<li><a href="index.php?category=2&page=3">sub menu 4</a></li>
<li><a href="index.php?category=2&page=4">sub menu 5</a></li>
<li><a href="index.php?category=2&page=5">sub menu 6</a></li>
<li><a href="index.php?category=2&page=6">sub menu 7</a></li>
</ul>
</li>

</ul>
</div>
</td></tr>
<tr height="20px"><td>привет</tr></tr>
<tr height="20px"><td>привет</tr></tr>
<tr height="20px"><td>привет</tr></tr>
</table>
<script type="text/javascript"> setActive(); allClose(); </script>
</body>
</html>
[/HTML]
файл menu js:
Свернуть исходник 
Код:
var active='';
function setActive() {
    var list = document.getElementsByClassName("topLevelMenu");
    for(var i=0;i<list.length;i++) {
        list.&#111;&#110;click=function () {
            openMenu(this);
        };
    }
}
   
function allClose(){
    var list = document.getElementsByClassName("activeTopLevelMenu");
    for(var i=0;i<list.length;i++) {
        list.className="topLevelMenu";
    }  
    list = document.getElementById("menu").getElementsByTagName("ul");
    for(var i=0;i<list.length;i++) {
        list.style.display = "none";
    }
}

function openMenu(node){
    allClose();
    node.className="activeTopLevelMenu";
    var subMenu = node.parentNode.getElementsByTagName("ul")[0];
    subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}

if(document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(cl) {
        var retnode = [];
        var myclass = new RegExp('\\b'+cl+'\\b');
        var elem = this.getElementsByTagName('*');
        for (var i = 0; i < elem.length; i++) {
            var classes = elem.className;
            if (myclass.test(classes)) {
                retnode.push(elem);
            }
        }
        return retnode;
    }
}

подскажите пожалуйста, как в этот скрипт передать значение категории и какую функцию необходимо добавить чтобы выбранная категория не закрывалась при перезагрузке страницы.
277
18 февраля 2011 года
arrjj
1.7K / / 26.01.2011
Вот нагавнякал без пхп открывается 2-е меню депозит, т.к. файлы после обновления форума не прикрепляются

Вкратце <script type="text/javascript"> setActive(); allClose(); </script>
поменял на <script type="text/javascript"> setActive(); allClose(); openMenuById("menu2");</script>
соотв в js добавил openMenuById, также ко всем категориям добавил menu1 menu2...и т.д.
вместо menu2 сделай menu<?php echo $_REQUEST['category'];?> или через кукизы подставляй
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог