Показать сообщение отдельно
  #1 (permalink)  
Старый 10.11.2011, 21:12
Новичок на форуме
Отправить личное сообщение для chdn Посмотреть профиль Найти все сообщения от chdn
 
Регистрация: 10.11.2011
Сообщений: 1

меню в стиле аккордеон из таблицы
на сайте реализовано меню следующим образом
<table id="Left_menu" class="LeftList" cellpadding="0" border="1">
	<tr>
		<th title="">
			<e01>меню 1
		</th>
	</tr>
	<tr class="LeftList1">
		<td>
			<a title="" href="">подменю 1</a>
		</td>
	</tr>
	<tr class="LeftList">
		<td>
			<a title="" href="">подменю 2</a>
		</td>
	</tr>
	<tr class="LeftList1">
		<td>
			<a title="" href="">подменю 3</a>
		</td>
	</tr>
	<tr class="LeftList">
		<td>
			<a title="" href="">подменю 4</a>
		</td>
	</tr>
	<tr>
		<th title="">
			<e03>меню 2
		</th>
	</tr>
	<tr class="LeftList1">
		<td>
			<a title="" href="">подменю 1</a>
		</td>
	</tr>
	<tr class="LeftList">
		<td>
			<a title="" href="">подменю 2</a>
		</td>
	</tr>
	<tr class="LeftList1">
		<td>
			<a title="" href="">подменю 3</a>
		</td>
	</tr>
	<tr class="LeftList">

		<td>
			<a title="" href="">подменю 4</a>
		</td>
	</tr>
</table>


хочется из этого сделать меню в стиле аккордеон.

В инете есть много готовых скриптов, но они заточены под теги <ul> <li>,
а структуру и теги меню я изменить не могу.
Попытался написать скрипт который задает пунктам меню id,
вот скрипт

window.onload = (function idTable() {
var table=document.getElementById("ctl00_LeftContent_ListLeft1_TList")
var thh = document.getElementById('ctl00_LeftContent_ListLeft1_TList').getElementsByTagName('th');
var tdd = document.getElementById('ctl00_LeftContent_ListLeft1_TList').getElementsByTagName('td');
for (r=0; r<table.rows.length; r++)
{
	if (table[r]=thh[r])
		{
			table[r].parentNode.id += ('menu'+r);
		}
}
for (i=0; i<table.rows.length; i++)
{
	if  (table[i]=tdd[i])
	{
		table[i].parentNode.id += ('submenu'+i);
	}
	
}
});

вот что получилось
<tbody>
<tr id="menu0">
<tr id="submenu0" class="LeftList1">
<tr id="submenu1" class="LeftList">
<tr id="submenu2" class="LeftList1">
<tr id="submenu3" class="LeftList">
<tr id="menu1">
<tr id="submenu4" class="LeftList1">
<tr id="submenu5" class="LeftList">
<tr id="submenu6" class="LeftList1">
<tr id="submenu7" class="LeftList">
</tbody>


Хотел присвоить первому пунку меню (th) id="menu0" подпунктам (td) id="submenu0", второму id="menu1" подпунктам id="submenu1" и т.д.

Помогите написать скрипт, если вообще возможно реализовать сворачивающееся меню из таблицы.

P.S. На сайте меню длиной на три высоты экрана смотрится не очень
В javascripte новичок.
Ответить с цитированием