Верстка nav (кастомная кнопка)

137

15 декабря 2020, 05:50

Начал изучать flexbox, и столкнулся с проблемой верстки навбара (из-за не стандартной кнопки, активного положения на скрине приложу как выглядит в дизайне). Вопрос заключается в том, правильно ли я делаю, или возможно у кого то из вас есть варианты получше решения данного задания. Что было сделано: сверстан стандартный бутстраповский (4) nav, с классами nav-item, nav-link. сделана кастомная кнопка активного положения (бекграунд с помощью свг, ссылка на него есть в приложенном коде). Но часть кнопки должна вылазить с nav в низу на несколько пикселей, в таком случае, высота nav увеличивается, и текст меню, уже не центриуется по вертикали, а прижимается к верху.

Вопрос, можно ли сделать такую кнопку, что бы она выглядела так же, но не делала высоту всего nav больше, тем самым что бы текст не пришлось центрировать с помощью padding ?

/*Стили Меню __ Style menu nav*/ 
nav.navbar.menu__box { 
	padding: 0; 
} 
.menu__box { 
	width: 100%; 
	height: 50px; 
	background-color: #00e695; 
	background-image: linear-gradient(-268deg, #7800e2 0%, #9a4cfb 100%); 
} 
/*Стили Активной Кнопки Картинкой*/ 
.btn__active { 
	background: url(http://mail-investbary.com/wp-content/uploads//2019/05/btn__active.svg) no-repeat; 
    background-position-y: -3px; 
    width: auto; 
    min-width: 129px; 
    height: 65px; 
    text-align: center; 
} 
a.nav-link { 
	color: #ffffff; 
font-size: 14px; 
font-weight: 500; 
}

<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Blog</title> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
  <link rel="stylesheet" type="text/css" href="css/main.css"> 
</head> 
 
<nav class="navbar menu__box"> 
  <div class="container"> 
    <div class="row"> 
      <ul class="nav nav-pills"> 
        <li class="nav-item"> 
          <a class="nav-link btn__active" href="#">Главная</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Мониторинг</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Криптовалюта</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Форум нашего блога</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Реклама</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Задай свой вопрос</a> 
        </li> 
      </ul> 
    </div> 
  </div> 
 
</nav>

Answer 1

Для таких случаев обычно используются псевдоклассы ::before и ::after. Ваш пример с ними.

.btn__active::before {
  content: '';
  position: absolute;
  background: url(http://mail-investbary.com/wp-content/uploads//2019/05/btn__active.svg) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  height: 150%;
}

/*Стили Меню __ Style menu nav*/ 
 
nav.navbar.menu__box { 
  padding: 0; 
} 
 
.menu__box { 
  width: 100%; 
  height: 50px; 
  background-color: #00e695; 
  background-image: linear-gradient(-268deg, #7800e2 0%, #9a4cfb 100%); 
} 
 
.nav-item { 
  position: relative; 
} 
 
 
/*Стили Активной Кнопки Картинкой*/ 
 
.btn__active::before { 
  content: ''; 
  position: absolute; 
  background: url(http://mail-investbary.com/wp-content/uploads//2019/05/btn__active.svg) no-repeat; 
  background-size: 100% 100%; 
  width: 100%; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 150%; 
} 
 
a.nav-link { 
  color: #ffffff; 
  font-size: 14px; 
  font-weight: 500; 
  position: relative; 
}

<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Blog</title> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
  <link rel="stylesheet" type="text/css" href="css/main.css"> 
</head> 
 
<nav class="navbar menu__box"> 
  <div class="container"> 
    <div class="row"> 
      <ul class="nav nav-pills"> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Главная</a> 
        </li> 
        <li class="nav-item btn__active"> 
          <a class="nav-link" href="#">Мониторинг</a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Криптовалюта</a> 
        </li> 
      </ul> 
    </div> 
  </div> 
 
</nav>