HTML, CSS - Меню

211

01 апреля 2022, 20:20

Доброй день, друзья. Интересует вопрос касательно меню. Имеются 2 проблемы при его верстке:

До сих пор не могу понять кому я должен назначать стили и какие. Поясню: собственно на макете вы увидите как оформляется меню, вопрос в том: кому назначать падинги, задний фон, бордер сверху? Ссылке или лишке?
Попытался импровизировать, но возникла следующая проблема. Бордер сверху над пунктом меню должен быть статичным при наведении на кнопочку, но проблема в том, что после того как срабатывает :hover, этот бордер толкает все меню вниз.

Буду благодарен за любые советы.

Answer 1

Вариант при помощи border-top.

Суть в чём, изначально border-top есть, но его не видно, ибо его цвет transparent (прозрачный), при наведение он становится нужным цветом. Эффект затухания\появления.

.item { 
  display: inline-block; 
  padding: 7px 12px 10px; /* 7px - это верхний отступ, он как и нижний 10px - 3px бордера сверху */ 
  background: #e8ebf1; 
  color: #000; 
  border-top: 3px solid transparent; 
  transition: all .3s linear; 
  font-size: 140%; 
} 
 
.item:hover { 
  border-top-color: #2aacc8; 
  color: #2aacc8; 
  background: #fff; 
}

<div class="item">Наведи на меня</div>

В принципе, можно сделать эффект "выезда", через border-top, но при анимации мы будет наблюдать дёрганье:

.item { 
  display: inline-block; 
  padding: 10px 12px; 
  background: #e8ebf1; 
  color: #000; 
  border-top: 0 solid #2aacc8; 
  transition: all .3s linear; 
  font-size: 140%; 
} 
 
.item:hover { 
  border-top-width: 3px; 
  padding-top: 7px; /* те же 10px - 3px */ 
  color: #2aacc8; 
  background: #fff; 
}

<div class="item">Наведи на меня</div>

По этому, считаю, что для реализации нужной вам фишки, лучше всего использовать box-shadow.
К тому же не придётся трогать padding вообще, ибо box-shadow идёт от границ элемента и по факту игнорирует отступы.

Эффект затухания\появления:

.item { 
  display: inline-block; 
  padding: 10px 12px; 
  background: #e8ebf1; 
  color: #000; 
  transition: all .3s linear; 
  font-size: 140%; 
  box-shadow: 0 3px 0 0 transparent inset; 
} 
 
.item:hover { 
  box-shadow: 0 3px 0 0 #2aacc8 inset; 
  color: #2aacc8; 
  background: #fff; 
}

<div class="item">Наведи на меня</div>

Эффект "выезда":

.item { 
  display: inline-block; 
  padding: 10px 12px; 
  background: #e8ebf1; 
  color: #000; 
  transition: all .3s linear; 
  font-size: 140%; 
  box-shadow: 0 0 0 0 #2aacc8 inset; 
} 
 
.item:hover { 
  box-shadow: 0 3px 0 0 #2aacc8 inset; 
  color: #2aacc8; 
  background: #fff; 
}

<div class="item">Наведи на меня</div>

Answer 2

Получите ваше меню и распишитесь:

nav { 
  background-color: #f1f1f1; 
  padding: 2px 10px 0 10px; 
} 
 
ul, 
li { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
li { 
  display: inline-block; 
  border-top: 1px solid transparent; 
} 
 
li:hover { 
  background-color: white; 
  border-top: 1px solid white; 
} 
 
a { 
  display: inline-block; 
  position: relative; 
  padding: 10px 10px 12px 10px; 
  text-decoration: none; 
  text-transform: uppercase; 
  color: black; 
  font-weight: bold; 
  padding-top: 10px; 
} 
 
a:before, 
a:after { 
  content: ""; 
  display: block; 
  position: absolute; 
  top: 0; 
  height: 4px; 
  width: 0; 
  background-color: skyblue; 
  transition: width 0.4s ease-in-out; 
} 
 
a:before { 
  left: 0; 
} 
 
a:after { 
  right: 0; 
} 
 
li:hover a:before { 
  width: 50%; 
} 
 
li:hover a:after { 
  width: 50%; 
} 
 
li:hover a { 
  color: skyblue; 
}

<nav> 
  <ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">About us</a></li> 
    <li><a href="">Services</a></li> 
    <li><a href="">Portfolio</a></li> 
    <li><a href="">Blog</a></li> 
  </ul> 
</nav>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему не работает атрибут download?

Учу HTMLCделал таблицу с ссылками для скачивания логотипов браузеров

180

HTML

HTML, CSS - Меню

Почему не работает атрибут download?

Как внести чистый svg в html? (svg кнопка)

Приложение как сайт

Как вытащить название ссылки из href?