Выбор меню. Оставить фокус при загразки другой html?
Доброго дня всем.
Есть меню (пунктов 50-70), html, статическое (получаемое из include, php).
Каждый пункт меню ведёт на однотипную по структуре страницу.
Естественно активный "фокус" с выбранного пункта меню пропадает на вновь открытой странице.
Возникшая мысль про php-cессии и генерации страницы с полученным меню, как-то не впечатлила меня.
Знаю, что есть ещё и JavaScript.
На каком механизме лучше реализовать данную процедуру? И где об этом почитать? (с примерами, будет вообще замечательно)
В Google нашёл заметки, как ставить фокус, но как его передать на др.страницы не нашёл.
Буду благодарен за полезную информацию.
Дополнительно:
Ну сделайте из двух одну. В пхп сессию, жс на фокус
Ну либо вообще без жс, одним пхп по ид пункта меню из урл
Второй этап подумаю, как прокрутить до фокуса.
Ответы:
Вариант 1, решение на коленке, которое нужно здесь и сейчас.
Написать костыль на JS в виде функции, которая возьмет подстроку из текущего url и произведет поиск нужной ссылки в меню с таким же href атрибутом, и поставит найденному html элементу класс активного элемента (или контейнеру ссылки - li элементу). Не забудьте прогуляться до первого уровня меню и тоже расставить классы активного элемента, если у вас меню многоуровневое.
Вариант 2, как должно быть.
У вас во входном скрипте index.php должен быть реализован примитивный роутинг url.
Благодаря роутеру для каждой страницы вы точно можете получить путь из компонентов адреса.
Например, site.com/page1/subpage2.
От роутера вы легко можете получить путь к странице, хотя бы в таком виде:
$page_path = ['page1', 'subpage2'];
Также меню должно формироваться динамически, из какой-то сохраненной структуры, пусть структура будет статичной.
$site_menu = [ 'page1' => [ 'title' => 'Страница 1', 'child' => [ 'subpage2' => ['title' => 'Субстраница 2', 'child' => []] ] ], 'page2' => [ 'title' => 'Страница 2', 'child' => [] ], ]; |
$site_menu = [ 'page1' => [ 'title' => 'Страница 1', 'child' => [ 'subpage2' => ['title' => 'Субстраница 2', 'child' => []] ] ], 'page2' => [ 'title' => 'Страница 2', 'child' => [] ], ];
Примерная функция для формирования меню:
// рекурсивная функция для получения сверстанного меню из структуры function get_main_menu( $curr_menu, //часть меню текущего уровня $level, // номер текущего уровня $menu_path, // путь к текущему уровню меню &$page_path // путь к текущей странице ) { $out = ''; if(count($curr_menu) > 0) { $out .= '<ul class="main-menu main-menu_level-'.$level.'">'; foreach($curr_menu as $key_item => $menu_item) { $out .= '<li class="main-menu__item ' .($page_path[$level] == $key_item ? 'main-menu__curent' : '') // определяем текущий пункт меню .'"><a href="'.$menu_path.'/'.$key_item.'">'.$menu_item['title'].'</a>'; get_main_menu($curr_menu['child'], $level + 1, $menu_path.'/'.$key_item, $page_path); // рекурсивный вызов функции для прорисовки следующего уровня $out .= '</li>'; } $out .= '</ul>'; } return $out; } // получаем html-фрагмент меню по структуре $out_site_menu = get_main_menu($site_menu, 0, '', $page_path); |
// рекурсивная функция для получения сверстанного меню из структуры function get_main_menu( $curr_menu, //часть меню текущего уровня $level, // номер текущего уровня $menu_path, // путь к текущему уровню меню &$page_path // путь к текущей странице ) { $out = ''; if(count($curr_menu) > 0) { $out .= '<ul class="main-menu main-menu_level-'.$level.'">'; foreach($curr_menu as $key_item => $menu_item) { $out .= '<li class="main-menu__item ' .($page_path[$level] == $key_item ? 'main-menu__curent' : '') // определяем текущий пункт меню .'"><a href="'.$menu_path.'/'.$key_item.'">'.$menu_item['title'].'</a>'; get_main_menu($curr_menu['child'], $level + 1, $menu_path.'/'.$key_item, $page_path); // рекурсивный вызов функции для прорисовки следующего уровня $out .= '</li>'; } $out .= '</ul>'; } return $out; } // получаем html-фрагмент меню по структуре $out_site_menu = get_main_menu($site_menu, 0, '', $page_path);
- Огромное спасибо за пример. Думаю действительно лучше реализовать по грамотному. По опыту знаю, что простые решения, хоть и работают, да и реализовываются быстро, но в будущем их всё-таки приходится переделывать.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сохранить фокус на выбранном элементе меню при загрузке другой части HTML страницы, можно использовать JavaScript.
Прежде всего, необходимо сохранить текущий активный элемент (элемент меню) в переменной перед загрузкой другой части HTML. Затем, после загрузки новой части HTML, можно установить фокус обратно на сохраненный элемент.
Пример реализации на JavaScript:
// Сохраняем текущий активный элемент меню var activeElement = document.activeElement; // Загружаем новую часть HTML // Ваш код загрузки HTML // Устанавливаем фокус обратно на сохраненный элемент activeElement.focus();
Этот код позволит сохранить фокус на выбранном элементе меню при загрузке другой части HTML. Помните, что для корректной работы скрипта необходимо убедиться, что выбранный элемент меню доступен на странице после загрузки новой части HTML.