1

Нужно получить высоту Родительского элемента в меню и установить данное значение в line-height кнопки, что бы выровнять стрелку по центу.

$(document).ready(function() {
  $('#cssmenu li.has-sub >span').on('click', function() {
    $(this).removeAttr('href');
    var element = $(this).parent('li');
    if (element.hasClass('open')) {
      element.removeClass('open');
      element.find('li').removeClass('open');
      element.find('ul').hide();
    } else {
      element.addClass('open');
      element.children('ul').show();
      element.siblings('li').children('ul').hide();
      element.siblings('li').removeClass('open');
      element.siblings('li').find('li').removeClass('open');
      element.siblings('li').find('ul').hide();
    }
  });

  $('.accordion-btn').each(function() {
    var parentItem = $('#accordion-btn').closest('li'),
      lineheight = $('> a', parentItem).innerHeight();
    $('#accordion-btn').css({
      'line-height': lineheight + 'px',
      'height': lineheight
    });
  })
});
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}

#cssmenu ul ul {
  display: none;
}

.align-right {
  float: right;
}

#cssmenu>ul>li>a {
  padding: 15px 20px;
  border-left: 1px solid #1682ba;
  border-right: 1px solid #1682ba;
  border-top: 1px solid #1682ba;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #36aae7;
  background: -webkit-linear-gradient(#36aae7, #1fa0e4);
  background: -moz-linear-gradient(#36aae7, #1fa0e4);
  background: -o-linear-gradient(#36aae7, #1fa0e4);
  background: -ms-linear-gradient(#36aae7, #1fa0e4);
  background: linear-gradient(#36aae7, #1fa0e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#cssmenu>ul>li>a:hover,
#cssmenu>ul>li.active>a,
#cssmenu>ul>li.open>a {
  color: #eeeeee;
  background: #1fa0e4;
  background: -webkit-linear-gradient(#1fa0e4, #1992d1);
  background: -moz-linear-gradient(#1fa0e4, #1992d1);
  background: -o-linear-gradient(#1fa0e4, #1992d1);
  background: -ms-linear-gradient(#1fa0e4, #1992d1);
  background: linear-gradient(#1fa0e4, #1992d1);
}

#cssmenu>ul>li.open>a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #1682ba;
}

#cssmenu>ul>li:last-child>a,
#cssmenu>ul>li.last>a {
  border-bottom: 1px solid #1682ba;
}

.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}

.holder::after,
.holder::before {}

.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

#cssmenu>ul>li>a:hover>span::after,
#cssmenu>ul>li.active>a>span::after,
#cssmenu>ul>li.open>a>span::after {
  border-color: #eeeeee;
}

.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}

#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li.open>a,
#cssmenu ul ul li.active>a {
  background: #424852;
  color: #ffffff;
}

#cssmenu ul ul li:first-child>a {
  box-shadow: none;
}

#cssmenu ul ul ul li:first-child>a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#cssmenu ul ul ul li a {
  padding-left: 30px;
}

#cssmenu>ul>li>ul>li:last-child>a,
#cssmenu>ul>li>ul>li.last>a {
  border-bottom: 0;
}

#cssmenu>ul>li>ul>li.open:last-child>a,
#cssmenu>ul>li>ul>li.last.open>a {
  border-bottom: 1px solid #32373e;
}

#cssmenu>ul>li>ul>li.open:last-child>ul>li:last-child>a {
  border-bottom: 0;
}

#cssmenu ul ul li.has-sub>a::after {}

#cssmenu ul ul li.active>a::after,
#cssmenu ul ul li.open>a::after,
#cssmenu ul ul li>a:hover::after {
  border-color: #ffffff;
}

.accordion-btn-wrap {
  width: 20%;
  position: absolute;
  top: 0;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  right: 0px;
  z-index: 99999;
  border: 1px solid grey;
}

.accordion-btn {
  display: inline-block;
  width: 100%;
}

.has-sub {
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<div id='cssmenu'>
  <ul>
    <li><a href='#'><span>Home</span></a></li>
    <li class='active has-sub'>
      <a href='#'><span>Products</span></a>
      <span class="accordion-btn-wrap"><!-- Кнопка-->
                   <span class="accordion-btn">
                      <i class="fa fa-chevron-down" aria-hidden="true"></i>
                   </span>
      </span>
      <!-- Конец кнопки-->
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <span class="accordion-btn-wrap">
                      <span class="accordion-btn">
                         <i class="fa fa-chevron-down" aria-hidden="true"></i>
                      </span>
          </span>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'><span>About</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
  </ul>
</div>

Вроде простая задача, нужно сделать что то вроде цикла, где есть класс has-sub, у того элемента брать высоту и задать ее элементу, пытался написать что то похожее но не работает

Нарисовал схему небольшую

введите сюда описание изображения

4
  • 1
    В css есть значение inherit - берет значение у родительского элемента. Попробуйте, это лучше, чем js. И еще, у вас не правильные селекторы #accordion-btn - ищет элемент с id="accordion-btn". 5 июл 2018 в 13:24
  • @Stepan Kasyanenko это свойство работает если только высота блока заранее известно вроде как , в моем случае высота может динамический изменяться в зависимости от длинны текста, по этому тут только через js(. С селекторами и правда косяк , спасибо
    – Vitaly
    5 июл 2018 в 13:29
  • 1
    С чего вы это взяли? Если у родителя будет меняться значение line-height то и у дочернего элемента с line-height:inherit тоже будет меняться. 5 июл 2018 в 13:32
  • @Stepan Kasyanenko я как то попытался использовать это свойство , но никак не работает, не подскажите как можно его использовать ?
    – Vitaly
    5 июл 2018 в 14:52

2 ответа 2

2

Сделай проще и без скриптов, для стрелки добавь следующие стили:

top: 50%;
transform: translateY(-50%);

ну и не забудь допилить все необходимые вендорные префиксы для transform: translateY

CSS3 уже давно поддерживается всеми браузерами, не понимаю почему многие чураются их использовать, 2018 год на дворе как никак

3
  • Тут ваше решение не совсем подходит, меню же раскрывающееся, таким образом стрелка выравнивается по середине, но по нажатию элемент li становится шире и стрелка опять смещается
    – Vitaly
    5 июл 2018 в 15:19
  • 1
    ну да, вообще это вечная проблема с вертикальным выравниванием... но ведь можно сделать еще один уровень вложенности, положить ссылку и стрелку ещё в один блок, выравнивать стрелку внутри этого блока, а раскрывающееся меню будет под этим блоком 5 июл 2018 в 15:22
  • Если ответ вам помог, поставьте галочку, если не сложно ) 7 июл 2018 в 2:07
2

Как написал @АнатолийШевелев, лучше всего в вашем случае будет создать еще один оберточные блок, где будет храниться стрелка и кнопка.

Пример.

$(document).ready(function() {
  $('#cssmenu li.has-sub>div >span').on('click', function() {
    $(this).removeAttr('href');
    var element = $(this).closest('li');
    console.log(element);
    if (element.hasClass('open')) {
      element.removeClass('open');
      element.find('li').removeClass('open');
      element.find('ul').hide();
    } else {
      element.addClass('open');
      element.children('ul').show();
      element.siblings('li').children('ul').hide();
      element.siblings('li').removeClass('open');
      element.siblings('li').find('li').removeClass('open');
      element.siblings('li').find('ul').hide();
    }
  });
});
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}

#cssmenu ul ul {
  display: none;
}

.align-right {
  float: right;
}

#cssmenu>ul>li>div>a {
  padding: 15px 20px;
  border-left: 1px solid #1682ba;
  border-right: 1px solid #1682ba;
  border-top: 1px solid #1682ba;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #36aae7;
  background: -webkit-linear-gradient(#36aae7, #1fa0e4);
  background: -moz-linear-gradient(#36aae7, #1fa0e4);
  background: -o-linear-gradient(#36aae7, #1fa0e4);
  background: -ms-linear-gradient(#36aae7, #1fa0e4);
  background: linear-gradient(#36aae7, #1fa0e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#cssmenu>ul>li>a:hover,
#cssmenu>ul>li.active>a,
#cssmenu>ul>li.open>a {
  color: #eeeeee;
  background: #1fa0e4;
  background: -webkit-linear-gradient(#1fa0e4, #1992d1);
  background: -moz-linear-gradient(#1fa0e4, #1992d1);
  background: -o-linear-gradient(#1fa0e4, #1992d1);
  background: -ms-linear-gradient(#1fa0e4, #1992d1);
  background: linear-gradient(#1fa0e4, #1992d1);
}

#cssmenu>ul>li.open>a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #1682ba;
}

#cssmenu>ul>li:last-child>a,
#cssmenu>ul>li.last>a {
  border-bottom: 1px solid #1682ba;
}

.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}

.holder::after,
.holder::before {}

.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

#cssmenu>ul>li>a:hover>span::after,
#cssmenu>ul>li.active>a>span::after,
#cssmenu>ul>li.open>a>span::after {
  border-color: #eeeeee;
}

.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}

#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li.open>a,
#cssmenu ul ul li.active>a {
  background: #424852;
  color: #ffffff;
}

#cssmenu ul ul li:first-child>a {
  box-shadow: none;
}

#cssmenu ul ul ul li:first-child>a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#cssmenu ul ul ul li a {
  padding-left: 30px;
}

#cssmenu>ul>li>ul>li:last-child>a,
#cssmenu>ul>li>ul>li.last>a {
  border-bottom: 0;
}

#cssmenu>ul>li>ul>li.open:last-child>a,
#cssmenu>ul>li>ul>li.last.open>a {
  border-bottom: 1px solid #32373e;
}

#cssmenu>ul>li>ul>li.open:last-child>ul>li:last-child>a {
  border-bottom: 0;
}

#cssmenu ul ul li.has-sub>a::after {}

#cssmenu ul ul li.active>a::after,
#cssmenu ul ul li.open>a::after,
#cssmenu ul ul li>a:hover::after {
  border-color: #ffffff;
}

.accordion-btn-wrap {
  width: 20%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  cursor: pointer;
  display: inline-block;
  right: 0px;
  z-index: 99999;
  border: 1px solid grey;
}

.accordion-btn {
  display: inline-block;
  width: 100%;
}

.item-wrapper {
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<div id='cssmenu'>
  <ul>
    <li>
      <div class="item-wrapper"><a href='#'><span>Home</span></a></div>
    </li>
    <li class='active has-sub'>
      <div class="item-wrapper">
        <a href='#'><span>Products</span></a>
        <span class="accordion-btn-wrap"><!-- Кнопка-->
                     <span class="accordion-btn">
                        <i class="fa fa-chevron-down" aria-hidden="true"></i>
                     </span>
        </span>
      </div>
      <!-- Конец кнопки-->
      <ul>
        <li class='has-sub'>
          <div class="item-wrapper">
            <a href='#'><span>Product 1</span></a>
            <span class="accordion-btn-wrap">
                      <span class="accordion-btn">
                         <i class="fa fa-chevron-down" aria-hidden="true"></i>
                      </span>
            </span>
          </div>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <div class="item-wrapper"><a href='#'><span>About</span></a></div>
    </li>
    <li class='last'>
      <div class="item-wrapper"><a href='#'><span>Contact</span></a></div>
    </li>
  </ul>
</div>

P.S. От себя могу добавить.

Старайтесь не писать css, который зависит от структуры вашего html.

Старайтесь не писать js, который зависит от структуры вашего html.

Не используйте id селекторы в css - это тоже не очень хорошо. Старайтесь везде использовать классы. Также посмотрите на БЭМ - удобная вещь!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.