Блог

Главная - Вопросы по программированию - Основное меню изменяет вертикальное расположение после открытия поля поиска

Основное меню изменяет вертикальное расположение после открытия поля поиска

#jquery #css #wordpress

#jquery ( jquery ) #css #wordpress

Вопрос:

У меня проблема с моим основным меню на сайте WordPress. Элементы меню выровнены по середине (по вертикали).

Но после нажатия кнопки поиска (Szukaj), которая открывает окно поиска, элементы меню перемещаются вниз.

И я понятия не имею, почему это происходит. Ничего нового не появляется во время поиска, хотя инспектор. Я попытался применить ту же высоту и ширину к кнопке поиска и окну поиска, но это не помогло.

HTML:

 <nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
    <ul class="primary-menu my-primary-menu reset-list-style">
        <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-186"><a href="https://mozolewska.pl/kdk/przewodnik/">Przewodnik</a></li>
        <li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-187"><a href="https://mozolewska.pl/kdk/materialy/">Materiały</a></li>
        <li id="menu-item-195" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-195"><a href="https://mozolewska.pl/kdk/deklaracja/">Deklaracja</a></li>
        <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"><a href="https://mozolewska.pl/kdk/o-nas/">O nas</a></li>
        <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="https://mozolewska.pl/kdk/#" aria-current="page">Co nowego</a></li>
        <li id="menu-item-233" class="searchicon menu-item menu-item-type-custom menu-item-object-custom menu-item-233"><a href="#">
            <button class="search-main-nav" id="formButton"><span class="search-menu-text">Szukaj</span></button>
            <form role="search" method="get" id="searchform1" class="searchform" action="https://mozolewska.pl/kdk/">
              <div><label class="screen-reader-text" for="s">Search for:</label>        
              <input type="text" value="" name="s" id="s">      
              <input type="submit" id="searchsubmit" value="Search">    
              </div> </form></a></li>
        <li id="menu-item-27" class="pl-icon menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="https://mozolewska.pl/kdk/#" aria-current="page">PL</a></li>
        <li id="menu-item-28" class="en-icon menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="https://mozolewska.pl/kdk/#" aria-current="page">EN</a></li>
    </ul>
</nav>

CSS — код:

 ul.primary-menu {
  font-size: 14pt;
  letter-spacing: 0.5px;
  margin-right: 150px;}

body:not(.overlay-header) .primary-menu > li > a {
  color:  #0f4d2f;
  text-decoration: none;}

.primary-menu > li {
  margin-top: 2.8rem;
  margin-right: 2.5rem;
  margin-left: 3.5rem;}

button.search-main-nav {
  padding-left: 5px !important;
  padding-bottom: 20px !important;
  color: #0f4d2f !important;
  text-decoration: none !important;
  background-color: #eaeddc;
  font-family: Karla;
  text-transform: none;}

  button.search-main-nav {
   padding: 0;}

  button.search-main-nav:focus {
   outline: 0 solid;}

 .search-menu-text {
  font-size: 14pt !important;
  letter-spacing: 0.5px !important;
  font-weight: 100;}

 input#searchsubmit {
  display: none;}

 #searchform1 {
  display: none;}

 input#s {
  color: #0f4d2f;
  font-size: 12pt;
  background-color: #eaeddc;
  border-top: 0 solid;
  border-left: 0 solid;
  border-right: 0 solid;
  border-bottom: 1px solid #0f4d2f;
  padding-bottom: 0;
  padding-left: 2px;
  padding-right: 0;
  padding-top: 3px;}

input#s:focus {
  outline: 0 solid;}

.searchicon{
 background-image: url(img/SZUKAJ-04_cropped.svg);
 background-repeat: no-repeat;
 background-position: 1% 16%;
 background-size: 1em;
 padding-left: 1.75em;}

li.pl-icon {
 font-size: 9pt;
 background-color: #0f4d2f;
 padding: 12px 14px 12px 14px;
 border: solid 1px;
 border-color: #0f4d2f;
 border-radius: 50%;
 margin-right: 0.5rem;}

#menu-item-27 {
 position: absolute;
 bottom: 45px;
 right: 83px;}

#menu-item-28 {
 position: absolute;
 bottom: 45px;
 right: 35px;}

li.en-icon {
 font-size: 9pt;
 padding: 12px 13px 12px 13px;
 border: solid 1px;
 border-color: #0f4d2f;
 border-radius: 50%;
 margin-left: 0.5rem;
 margin-right: 0.2rem;
 margin-bottom: 0.1rem;}

JS:

 $("#formButton").click(function(){
    $("#formButton").hide();
    $("#searchform1").show();
});

Я предполагаю, что проблема в JS-коде, но я понятия не имею, как это исправить.

Ответ №1:

Ваш #searchform1 должен быть встроенным блоком, когда он показан, чтобы выровняться с элементами перед ним. Поскольку он скрыт с display: none помощью до нажатия кнопки, вам необходимо добавить преобразование в скрипт jQuery, чтобы изменить его на display: inline-block . Я имею в виду эту строку (последняя часть заменяет ранее использованную show() ):

 $("#searchform1").css('display', 'inline-block');

Пожалуйста, обратите внимание: здесь, во фрагменте, очевидно, отсутствует большая часть исходного CSS (т. Е. Особенно Та часть, которая отображает список по горизонтали), плюс ширина фрагмента слишком мала, чтобы строка поиска могла поместиться в одну строку с ее меткой. Если вы просматриваете его в более широком окне, метка и строка поиска выравниваются, как и должно быть в случае полной загрузки исходного CSS.

 $("#formButton").click(function() {
  $("#formButton").hide();
  $("#searchform1").css('display', 'inline-block');
}); 
 ul.primary-menu {
  font-size: 14pt;
  letter-spacing: 0.5px;
  margin-right: 150px;
}

body:not(.overlay-header) .primary-menu>li>a {
  color: #0f4d2f;
  text-decoration: none;
}

.primary-menu>li {
  margin-top: 2.8rem;
  margin-right: 2.5rem;
  margin-left: 3.5rem;
}

button.search-main-nav {
  padding-left: 5px !important;
  padding-bottom: 20px !important;
  color: #0f4d2f !important;
  text-decoration: none !important;
  background-color: #eaeddc;
  font-family: Karla;
  text-transform: none;
  vertical-align: bottom;
}

button.search-main-nav {
  padding: 0;
}

button.search-main-nav:focus {
  outline: 0 solid;
}

.search-menu-text {
  font-size: 14pt !important;
  letter-spacing: 0.5px !important;
  font-weight: 100;
}

input#searchsubmit {
  display: none;
}

#searchform1 {
  display: none;
}

input#s {
  color: #0f4d2f;
  font-size: 12pt;
  background-color: #eaeddc;
  border-top: 0 solid;
  border-left: 0 solid;
  border-right: 0 solid;
  border-bottom: 1px solid #0f4d2f;
  padding-bottom: 0;
  padding-left: 2px;
  padding-right: 0;
  padding-top: 3px;
}

input#s:focus {
  outline: 0 solid;
}

.searchicon {
  background-image: url(img/SZUKAJ-04_cropped.svg);
  background-repeat: no-repeat;
  background-position: 1% 16%;
  background-size: 1em;
  padding-left: 1.75em;
}

li.pl-icon {
  font-size: 9pt;
  background-color: #0f4d2f;
  padding: 12px 14px 12px 14px;
  border: solid 1px;
  border-color: #0f4d2f;
  border-radius: 50%;
  margin-right: 0.5rem;
}

#menu-item-27 {
  position: absolute;
  bottom: 45px;
  right: 83px;
}

#menu-item-28 {
  position: absolute;
  bottom: 45px;
  right: 35px;
}

li.en-icon {
  font-size: 9pt;
  padding: 12px 13px 12px 13px;
  border: solid 1px;
  border-color: #0f4d2f;
  border-radius: 50%;
  margin-left: 0.5rem;
  margin-right: 0.2rem;
  margin-bottom: 0.1rem;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
  <ul class="primary-menu my-primary-menu reset-list-style">
    <li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-186"><a href="https://mozolewska.pl/kdk/przewodnik/">Przewodnik</a></li>
    <li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-187"><a href="https://mozolewska.pl/kdk/materialy/">Materiały</a></li>
    <li id="menu-item-195" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-195"><a href="https://mozolewska.pl/kdk/deklaracja/">Deklaracja</a></li>
    <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"><a href="https://mozolewska.pl/kdk/o-nas/">O nas</a></li>
    <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="https://mozolewska.pl/kdk/#" aria-current="page">Co nowego</a></li>
    <li id="menu-item-233" class="searchicon menu-item menu-item-type-custom menu-item-object-custom menu-item-233">
      <a href="#">
        <button class="search-main-nav" id="formButton"><span class="search-menu-text">Szukaj</span></button>
        <form role="search" method="get" id="searchform1" class="searchform" action="https://mozolewska.pl/kdk/">
          <div><label class="screen-reader-text" for="s">Search for:</label>
            <input type="text" value="" name="s" id="s">
            <input type="submit" id="searchsubmit" value="Search">
          </div>
        </form>
      </a>
    </li>
    <li id="menu-item-27" class="pl-icon menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="https://mozolewska.pl/kdk/#" aria-current="page">PL</a></li>
    <li id="menu-item-28" class="en-icon menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="https://mozolewska.pl/kdk/#" aria-current="page">EN</a></li>
  </ul>

ДОБАВЛЕНИЕ ПОСЛЕ КОММЕНТАРИЯ:

Кроме того, у #formButton , или, скорее, у его класса .search-main-nav есть a padding-bottom: 20px !important , который исчезает после нажатия кнопки и становится невидимым. Это вызывает вертикальный сдвиг.

Попробуйте применить vertical-align: bottom; к нему. Вероятно, это приведет к смещению всего меню, но оно больше не сдвинется при нажатии кнопки, так что теперь вы можете изменить положение всего меню.

Комментарии:

1. Это звучит логично, но не помогает. #searchform1 теперь является встроенным блоком, но все меню по-прежнему сдвинуто вниз.

2. Пожалуйста, обратите внимание на дополнение к моему ответу (внизу)

3. Применение vertical-align: bottom; не помогло, но спасибо, что указали, что padding-bottom оно исчезает после нажатия кнопки. Я применил padding-bottom: 20px !important; #searchform1 , и, похоже, это работает.