На сайтах иногда возникает необходимость создать пункт меню, по клику на который не происходит перехода на другую страницу. Такие элементы обычно используются в многослойных меню, где разные пункты не имеют взаимосвязи.
Чтобы сделать пункт меню некликабельным в WordPress, можно воспользоваться следующими способами:
- Использование кастомного CSS: Можно добавить специальный стиль к ссылке, чтобы она выглядела как текст. Например, добавьте CSS-класс к элементу меню и задайте ему стиль
pointer-events: none;. - Создание элемента меню без ссылки: В разделе «Внешний вид» -> «Меню» можно добавить произвольный элемент меню и просто указать текст без добавления URL. Это позволит создать элемент, который будет выглядеть как пункт меню, но не будет кликабельным.
- Использование JavaScript: Можно использовать простой скрипт, чтобы предотвратить действия по умолчанию. Добавьте обработчик событий на элемент, который будет вызывать
event.preventDefault();при клике.
Независимо от выбранного метода, важно убедиться, что посетители сайта понимают, что это не кликабельный элемент, чтобы избежать путаницы. Также можно использовать визуальные подсказки, например, сделать некликабельный пункт менее ярким или отличным по стилю от остальных.
Как сделать некликабельный пункт меню?
К счастью, система WordPress предлагает все нужные инструменты для реализации этой идеи. Рассмотрим на примере, как организовать многослойное меню, в котором родительский элемент будет неактивен. Первым делом необходимо зайти в администраторскую панель и выбрать раздел Внешний вид -> Меню.
На странице настройки меню важно активировать использование произвольных ссылок. Для этого нажмите кнопку Настройки экрана и установите отметку рядом с пунктом Произвольные ссылки.
После этого в перечне доступных элементов для включения в меню появится новый раздел с Произвольные ссылки.
Для начала необходимо щелкнуть на соответствующий блок, после чего в поле URL ввести знак #, а в разделе Текст ссылки указать название для пункта меню.
Затем следует нажать на кнопку Добавить в меню. Далее можно продолжать добавлять необходимые подпункты, соблюдая заданную иерархию.
Чтобы сохранить все внесенные изменения, обязательно нажмите кнопку Сохранить меню.
Помимо способа с произвольными ссылками, вы также можете сделать пункт меню неактивным с помощью добавления класса CSS к родительскому элементу. Для этого активируйте отображение CSS классов в настройках экрана и задайте нужный класс. Например, класс not-clickable позволит вам визуально выделить элемент и отключить его кликабельность с помощью CSS стилей: .not-clickable { pointer-events: none; color: gray; }.
Таким образом, вы можете не только создать вложенные меню, но и управлять их активностью, что сделает навигацию по вашему сайту более удобной и интуитивной.
Способы редактирования навигации в WordPress
Каждый веб-разработчик сталкивается с необходимостью внесения изменений в навигационные элементы. Лучший подход для выполнения этой задачи – использование встроенного редактора. В административной панели можно перейти в раздел «Внешний вид» и выбрать «Меню». Здесь возможно добавление, удаление или изменение существующих навигационных ссылок. Для того чтобы сделать часть меню не кликабельной, добавьте настраиваемую ссылку без URL и выберите ее для отображения.
Важно помнить, что правильная организация навигации повышает пользовательский опыт.
Дальше, для более глубокого редактирования, используйте виды тем и плагины. Некоторые настраиваемые темы предлагают расширенные функции, позволяющие изменять порядок пунктов, изменять стили и добавлять дополнительные элементы. Для разработчиков подойдут плагины, такие как Max Mega Menu, которые значительно расширяют возможности настройки интерфейса, включая создание выпадающих меню и оформление под разные устройства.