Javascript-форум - Меню с выезжающим сайдбаром

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Меню с выезжающим сайдбаром (https://javascript.ru/forum/dom-window/63716-menyu-s-vyezzhayushhim-sajjdbarom.html)

А можно все же поинтересоваться для полного понимания работы скрипта, каким образом он соотносит ссылки к сайдбарам?
Я так понял у первой id 11 должен быть, а остальные по порядку или как?
Просто движок генерит ссылки из id страниц, получается ссылка id 15 открывает сайдбар 3, а ссылка id11 открывает сайдбар 18, просто не могу логику тут уловить, подскажите если не затруднит.

Jaz,
по индексу -- нулевая ссылка для нулевого меню

Цитата:

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

мне нужно чтобы ссылка 1 открывала панель 1, а ссылка 2 открывала панель 2,

id не имеет значения можно убрать как и href

Jaz,

Цитата:

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

только для кнопок 'a[data-effect="st-effect-11"]' и меню 'nav.st-effect-11'

в ссылке нужна дата с st-effect-11 а в меню класс с st-effect-11 -- только эти кнопки и меню будут связаны -- количество кнопок и меню естественно одинаковое

это в дополнение было к вопросу что ссылки не связаны с панелями

Jaz,

ниже порядок ваших меню

нулевая ссылка с текстом Вопрос 1
откроет меню Вопрос 4

всё согласно индексу

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<div id="st-container" class="st-container">

<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-7">
				<h2 class="icon icon-lab">Вопрос 4</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-6">
				<h2 class="icon icon-lab">Вопрос 3</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-8">
				<h2 class="icon icon-lab">Вопрос 5</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-9">
				<h2 class="icon icon-lab">Вопрос 6</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-10">
				<h2 class="icon icon-lab">Вопрос 7</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-11">
				<h2 class="icon icon-lab">Вопрос 8</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-12">
				<h2 class="icon icon-lab">Вопрос 9</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-13">
				<h2 class="icon icon-lab">Вопрос 10</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-14">
				<h2 class="icon icon-lab">Вопрос 11</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-15">
				<h2 class="icon icon-lab">Вопрос 12</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-16">
				<h2 class="icon icon-lab">Вопрос 13</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-17">
				<h2 class="icon icon-lab">Вопрос 14</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-18">
				<h2 class="icon icon-lab">Вопрос 15</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-19">
				<h2 class="icon icon-lab">Вопрос 16</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-5">
				<h2 class="icon icon-lab">Вопрос 2</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-3">
				<h2 class="icon icon-lab">Вопрос 1</h2>
		</nav>
</div>
<div class="tickets-row">
    	<nav class="st-menu  st-effect-11 " id="menu-2">
				<h2 class="icon icon-lab">Тема 1</h2>
		</nav>
</div>
</div>
</body>
</html>