Menu wielopoziomowe

Prezentowany skrypt obsługuje również wielopoziomowe struktury menu. Zasada zagnieżdżania polega na zbudowaniu najpierw pierwszego, płaskiego poziomu, a następnie wybraniu określonego elementu <dd>...</dd> i umieszczeniu w nim podrzędnej listy <dl>...</dl>, ze swoimi nagłówkami <dt>...</dt> i elementami <dd>...</dd>. Oczywiście ilość poziomów zagnieżdżenia nie jest niczym ograniczona.

W celu osadzenia wielopoziomowego menu, należy powtórzyć wszystkie przedstawione wcześniej kroki. Zmianie ulegnie tylko kod HTML tworzący sam blok menu:

<dl id="menu0">
<dt>Nagłówek 1</dt>
<dd>
	<dl>
	<dt>Nagłówek 1.1</dt>
	<dd>
		<dl>
		<dt>Nagłówek 1.1.1</dt>
		<dd>Element 1.1.1.1</dd>
		<dd>Element 1.1.1.2</dd>
		<dd>Element 1.1.1.3</dd>
		<dt>Nagłówek 1.1.2</dt>
		<dd>Element 1.1.2.1</dd>
		<dd>Element 1.1.2.2</dd>
		<dd>Element 1.1.2.3</dd>
		</dl>
	</dd>
	<dt>Nagłówek 1.2</dt>
	<dd>Element 1.2.1</dd>
	<dd>Element 1.2.2</dd>
	<dd>Element 1.2.3</dd>
	</dl>
</dd>
<dt>Nagłówek 2</dt>
<dd>
	<dl>
	<dt>Nagłówek 2.1</dt>
	<dd>Element 2.1.1</dd>
	<dd>Element 2.1.2</dd>
	<dd>Element 2.1.3</dd>
	<dt>Nagłówek 2.2</dt>
	<dd>Element 2.2.1</dd>
	<dd>Element 2.2.2</dd>
	<dd>Element 2.2.3</dd>
	</dl>
</dd>
</dl>

Przykład

Nagłówek 1

Nagłówek 1.1

Nagłówek 1.1.1

Element 1.1.1.1

Element 1.1.1.2

Element 1.1.1.3

Nagłówek 1.1.2

Element 1.1.2.1

Element 1.1.2.2

Element 1.1.2.3

Nagłówek 1.2

Element 1.2.1

Element 1.2.2

Element 1.2.3

Nagłówek 2

Nagłówek 2.1

Element 2.1.1

Element 2.1.2

Element 2.1.3

Nagłówek 2.2

Element 2.2.1

Element 2.2.2

Element 2.2.3