Сделать меню навигации верхнего уровня недоступным для нажатия в Weebly

Weebly предлагает удобную платформу для создания сайтов, которая может оказаться бесполезной, в отличие от большинства пользователей. Например, организация страниц в необходимом порядке является проблемой в Weebly, а сделать меню навигации верхнего уровня неактивным по умолчанию невозможно. Пока Weebly позволяет изменять исходный CSS, мы можем сделать это возможным, добавив простой код CSS в основной файл CSS «main_style.css». В этой статье мы обсудим, как сделать меню навигации верхнего уровня неактивным на сайте Weebly.

Структура навигации верхнего уровня

Прежде чем продолжить, необходимо понять основную структуру меню навигации Weebly. Щелкните правой кнопкой мыши меню на опубликованном сайте и выберите «Проверить» или «Проверить элемент», чтобы открыть консоль разработчика в браузере. Когда вы наводите указатель мыши на каждое меню навигации верхнего уровня, вы можете увидеть соответствующие классы CSS. Каждое меню навигации верхнего уровня идентифицируется с помощью класса CSS, например «.wsite-nav-1», «.wsite-nav-2 ″,». Wsite-nav-3 ″ и т. Д., Где 1 – это обычно страница «Hoe». .

Поиск класса CSS для верхнего меню навигации Weebly

Числа могут меняться в зависимости от вашей темы и запишите CSS-класс меню навигации, которое вы хотите сделать недоступным для кликов. Предположим, вы хотите сделать второе меню навигации недоступным для кликов и соответствующий класс CSS – «.wsite-nav-2».

Сделать меню недоступным для кликов

Теперь перейдите в редактор кода Weebly в разделе «Тема> Изменить HTML / CSS> Активы> main_style.css» и добавьте следующий код CSS.

.wsite-nav-2 {
pointer-events: none;
}

Сохраните изменения и опубликуйте свой сайт, чтобы увидеть, что второе верхнее меню навигации неактивно, а курсор не изменится на руку при наведении. Если вы хотите подвести курсор к руке, но меню все равно не должно быть активным, измените приведенный выше код, как показано ниже:

.wsite-nav-2 a:active {
pointer-events: none;
}

Точно так же вы можете сделать все меню навигации верхнего уровня неактивными, добавив соответствующие классы CSS.

Удаление меню верхнего уровня в мобильной навигации

Weebly имеет другую структуру навигации на мобильных сайтах, и при нажатии на верхнее меню снова отображается список пунктов меню, включая верхнее меню. Это позволяет открыть ссылку верхнего меню, если в ней есть контент, но в нашем случае мы должны удалить эту ссылку из списка. Следовательно, добавьте следующий CSS в ваш файл «main_style.css»:

.wsite-menu-master-item {
display: none !important;
}

После добавления всех кодов CSS это может выглядеть примерно так:

Изменение CSS в Weebly

Изменение CSS в Weebly

Сохраните изменения и опубликуйте свой сайт.

Просмотрите демонстрацию на сайте Weebly, где меню навигации верхнего уровня недоступны для нажатия (кроме домашней страницы)

Посмотреть демо

Скрытие самых популярных страниц навигации от поисковых систем и пользователей

  • Скрыть верхние страницы навигации от поисковых систем, чтобы поисковые системы не сканировали пустые страницы. Вы можете сделать это, установив флажок «Скрыть эту страницу от поисковых систем» в настройках «Дополнительно» на каждой странице верхнего уровня.
  • Помните, что пользователи по-прежнему могут получать доступ к страницам, напрямую вводя URL-адрес в адресной строке браузера. В идеале установка 301 редиректа должна решить эту проблему, к сожалению, Weebly не позволяет устанавливать перенаправления для живых страниц. Следовательно, вы не можете запретить пользователям доступ к страницам через адресную строку.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *