Переход по ссылке главного (верхнего) меню раскрывающего списка в Bootstrap 4

Если вы перешли на эту статью не с «Выпадающее меню на Bootstrap 4 при наведении (событие hover)», то я рекомендую ознакомиться с ней, прежде чем продолжить изучать эту.

Стандартный dropdown-меню список раскрывается только при нажатии на главный пункт меню. При этом перейти на главное меню, по которому происходит действие click, не предоставляется возможным. В меню Bootstrap 4, на главном меню раскрывающегося списка вешается атрибут «data-toggle="dropdown"», который устанавливает JQeury методы «event.stopPropagation()» и «event.preventDefault()».

event.stopPropagation() — предотвращает дальнейшую передачу текущего события, вверх по иерархии дерева DOM (некоторые события, такие как click, после выполнения на самом элементе, передают его родительским, что повторяется до самого основания дерева DOM).

event.preventDefault() — отменяет действие события по умолчанию. Если этот метод вызывается, то действие события по умолчанию не будет срабатывать. Событие продолжает распространяться как обычно, только с тем исключением, что событие ничего не делает.

Вот и получается, что при нажатии на ссылку меню, эти методы блокируют переход по ссылке в стандартном тому понимании.

Используя опыт и наработки предыдущей статьи, сделаем, чтобы список раскрывался только при наведении, и отключим событие click.

 

Отключаем событие click на выпадающем меню Bootstrap 4

 

Как уже понятно из выше сказанного, атрибут «data-toggle="dropdown"» блокирует переход по ссылке и одновременно указывает, что это кнопка раскрывающего списка. Просто удаляем наш атрибут из ссылки и проверяем.

Было:

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Три</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Три один</a>
          <a class="dropdown-item" href="#">Три два</a>
          <a class="dropdown-item" href="#">Три три</a>
        </div>
      </li>

Стало:

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">Три</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Три один</a>
          <a class="dropdown-item" href="#">Три два</a>
          <a class="dropdown-item" href="#">Три три</a>
        </div>
      </li>

Теперь наше раскрывающееся меню работает только при наведении. При нажатии на главный пункт меню мы теперь можем перейти на отдельную страницу.

Данную работу меню, я лично считаю более правильной. На многих проектах, мне хочется задействовать этот главный пункт, чтобы он работал и перенаправлял пользователей на отдельную страницу. С которой уже, в свою очередь, я смогу предоставить навигацию на остальные подпункты меню или задействую как SEO или OFFER страницу.

 

Всем удачи!

 

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

Защитный код
Обновить

Я рекомендую


Челябинская область

Мебель на заказ от производителя

В этот блок попасть не так просто. Я проверяю социальные сети, сайт и отзывы о компании.

Если у вас имеются вопросы по поводу работы сайта, сотрудничества и предложений, Вы можете написать на почту info@alexfine.ru

Я создал первую версию блога и введу его с 2015 года.

Копирование материалов сайта возможно только с указанием активной ссылки "www.alexfine.ru" в качестве источника.

Изображение кнопки наверх

Вконтакте
Вконтакте
Вконтакте
Вконтакте
Вконтакте
+