Как Подчеркнуть первый уровень раскрывающегося меню?

Question

[Natasha000]

Сайт на WordPress.
Код меню следующий :

<style>
  
/* Enable class below once you're done editing the menu */ 
   

.dropdown-menu {
visibility: hidden;
}

  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: auto;
right: auto;
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}
 
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 5px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}
  
</style>  

<script>
  
jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});
</script>

Каждому верхнему меню присвоен класс: first-level first-level-1, first-level first-level-2, etc
Каждому выпадающему меню присвоен класс: dropdown-menu dropdown-menu-1, dropdown-menu dropdown-menu-2, etc
Чтобы подчеркнуть первый уровень, я нашел в Интернете следующий код, но в моем случае он работает некорректно.

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}

.et_pb_menu__menu a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 0%;
 background: #000000; /*** COLOR OF THE LINE ***/
 height: 2px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.et_pb_menu__menu li a:hover {
 opacity: 1 !important;
}
.et_pb_menu__menu li a:hover:before {
 right: 0;
}
.et_pb_menu__menu li li a:before {
 bottom: 10%;
}

Сейчас это выглядит так:

Нужно вот так:

Answer 1

[Орхан Гасанлы]

Natasha000, добрый день! Было бы неплохо предоставить ссылку на сайт. Так будет проще что-либо подсказать.
А если отвечать общими словами, то попробуйте например:

.category-menu .et_pb_menu__menu li.first-level {
border-bottom: 2px solid #ff0000;
}

Comments

[Natasha000]

к сожалению не работает, вот сайт

[Орхан Гасанлы]

Natasha000, не могли бы вы уточнить ваш вопрос?
А то если судить по вашему скрину в вопросе, то подчеркивание верхнего уровня меню при наведении у вас имеется.
https://i.imgur.com/xilnBG0.png

Код указанный мной выше всего лишь подчеркивает пункты меню первого уровня.
Вот, скрин:
https://i.imgur.com/mDLp92u.png

[Natasha000]

Орхан Гасанлы, суть в том, что подчеркивание происходит только при наведении на верхний пункт меню - а когда мышкой наводишь на нижний пункт меню, подчеркивание верхнего пропадает и выходит что нижнее меню не понятно к какому меню относится. Суть вопроса чтобы подчеркивание первого уровня сталось до закрытия выпадающего меню или до открытия другого. В общем нужно как здесь https://gagliardi.eu

[Орхан Гасанлы]

Natasha000, как говорится, правильно заданный вопрос, это половина ответа)
Приведу простой пример реализации вашей задачи. Разумеется, что этот код нужно доработать. Например, стили (класс demo) можно перекинуть в css. Улучшить css свойства и т.д. Или же как вариант можно заглянуть в консоль и найти event, который подчеркивает пункт меню, а затем при mousover на дочернем элементе вызвать нужную функцию. Ну в любом случае это уже выходит за рамки моего ответа.

jQuery(document).ready(function(){

	jQuery("<style>")
    .prop("type", "text/css")
    .html("\
    .demo {\
        border-bottom: 3px solid black;\
        -webkit-transition: all .4s ease-in-out;\
        transition:all .4s ease-in-out;\
    }")
    .appendTo("head");

	jQuery('li .et_pb_column > div > div').on('mouseover', function() {
		jQuery('li.first-level a').removeClass('demo');
		jQuery(this).closest('li')
			.find('a').addClass('demo');
	});

});

[Natasha000]

Орхан Гасанлы, Добавила этот код между тэгами <script> и </script>. Ничего не изменилось

[Орхан Гасанлы]

Natasha000, повторюсь, необходимо доработать этот скрипт под себя. Поиграться со стилями и т.д.
Что касается

Добавила этот код между тэгами . Ничего не изменилось

, то вот скрин

[Natasha000]

Орхан Гасанлы, Добавила этот код в консоли разработчика (в браузере) работает. А в самой теме не работает... Помогите понять в чем проблема. Или куда можно прописать этот код еще чтоб он заработал.

[Орхан Гасанлы]

Natasha000, ну у вас в консоли есть ошибки в js и скорее всего код не работает из-за этого.
Попробуйте устранить ошибки, а затем уже пробуйте использовать вышеуказанный код

[Natasha000]

Орхан Гасанлы, спасибо, заработало - но теперь другая проблема = подчеркивание не удаляется когда выпадающее меню закрыто и появляется только при наведении на конкретный пункт выпадающего меню (получается такая сильная задержка перед подчеркиванием, в следствии имеющего расстояния между пунктом верхнего и выпадающего меню, это особенно заметно в меню "CLOTHING" ) и
пропала анимация слева на право (то есть подчеркивание появляется сразу). Можете пожалуйста помочь хотя бы с первой.

[Орхан Гасанлы]

Natasha000,
Не самое лучшее решение, но вот, как-то так:

jQuery(document).ready(function(){

  jQuery("<style>")
    .prop("type", "text/css")
    .html("\
    .demo {\
        border-bottom: 3px solid black;\
        -webkit-transition: all .4s ease-in-out;\
        transition:all .4s ease-in-out;\
    }")
    .appendTo("head");

  jQuery('li .et_pb_column > div > div').on('mouseover', function() {
    jQuery('li.first-level a').removeClass('demo');
    jQuery(this).closest('li')
      .find('a').addClass('demo');
  });
  
  jQuery('li .et_pb_column > div > div').on('mouseout', function() {
  	jQuery('li.first-level a').removeClass('demo');
  });

});

Дальше дорабатывайте сами. Ну или обратитесь во фриланс биржу. Я давно перестал работать с ВП, если честно. Желаю успехов)

[Natasha000]

Орхан Гасанлы, Спасибо большое за помощь, буду развиваться дальше. У меня вот такой вопрос я уже два месяца пытаюсь этот код написать и мне интересно как вы определили нужные селекторы к которым нужно обращаться ? вот этот например 'li .et_pb_column > div > div' или 'li.first-level a'
Я смотрела через фаерфокс но там не нашла этого

[Орхан Гасанлы]

Natasha000, в данном случае я могу порекомендовать вам познакомиться с азами css.

Я смотрела через фаерфокс но там не нашла этого

Это не зависит от браузера. И конечно же вы не найдете этого.

li .et_pb_column > div > div

Это означает, что есть тег li, в котором лежит узел с классом et_pb_column внутри которого есть дочерний элемент div, внутри которого есть другой дочерний элемент div.
Селекторы можно написать разные.
Вот, например тоже самое
html body li .et_pb_column > div > div

Или вот этот код:
li.first-level a
Означает, что есть тег li с классом first-level внутри которого лежит тег a
Можно использовать xpath, если это нужно.

При выборе селекторов совсем необязательно выбирать весь уровень вложенности, если есть идентификаторы, то легче ориентироваться по ним. В общем, нужно смотреть в консоль, инспектировать нужный вам элемент и т.д.

[Natasha000]

Орхан Гасанлы, Благодарю за детальный ответ ! Посоветуйте видео или книги с чего лучше начать осваивать css селекторы