Блог

Главная - Вопросы по программированию - Как я могу создать эффект подчеркивания в своем меню?

Как я могу создать эффект подчеркивания в своем меню?

#css #menu #hover #styling #underline

Вопрос:

Я практикуюсь в CSS, поэтому после нескольких уроков я начал создавать простой веб-сайт. Я хочу создать что-то вроде этого:

Меню подчеркивания

Как я могу добиться такого эффекта? Я искал ответ в Интернете, и я просто нашел только решения с причудливыми анимациями и эффектами подчеркивания, но я не мог найти решение, аналогичное моей проблеме. Я добился только чего-то подобного:

Мое меню

Это мой код

 .button {  background-color: white;  border: none;  color: black;  text-align: center;  text-decoration: none;  cursor: pointer;  margin: 0; }  .button:hover {  background-color: white;  border-bottom: #55415f 4px solid;  color: #55415f;  text-align: center;  text-decoration: none;  cursor: pointer;  margin: 0; }  .r_menu {  display: flex;  justify-content: flex-end;  border-bottom: black 3px solid;  gap: 20px;  margin: 0; } 
 lt;div class="r_menu"gt;  lt;button class="button"gt;Home pagelt;/buttongt;  lt;button class="button"gt;Style demolt;/buttongt;  lt;button class="button"gt;Full widthlt;/buttongt;  lt;button class="button"gt;Portfoliolt;/buttongt;  lt;button class="button"gt;Gallerylt;/buttongt;  lt;button class="button"gt;Dropdownlt;/buttongt; lt;/divgt;

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

1. Добро пожаловать в SO.Предоставьте код того, что вы пробовали до сих пор, только предоставление изображений не поможет. Так как мы до сих пор не можем извлечь код из изображений ; ) .

2. И эта проблема связана с элементом по умолчанию margin (тег, используемый для меню ). Поэтому, чтобы устранить эту проблему, используйте margin: 0 тот элемент, который содержит border-bottom: 3px solid black (т. е. ваше меню)

Ответ №1:

При наведении есть пробел и «движение», потому что граница изменяется от нуля до 4 пикселей.

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

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

 .button {  background-color: white;  border: none;  border-bottom: transparent 4px solid;  color: black;  text-align: center;  text-decoration: none;  cursor: pointer;  margin: 0; }  .button:hover {  background-color: white;  border-bottom: #55415f 4px solid;  color: #55415f;  text-align: center;  text-decoration: none;  cursor: pointer;  margin: 0; }  .r_menu {  display: flex;  justify-content: flex-end;  border-bottom: black 1px solid;  gap: 20px;  margin: 0; } 
 lt;div class="r_menu"gt;  lt;button class="button"gt;Home pagelt;/buttongt;  lt;button class="button"gt;Style demolt;/buttongt;  lt;button class="button"gt;Full widthlt;/buttongt;  lt;button class="button"gt;Portfoliolt;/buttongt;  lt;button class="button"gt;Gallerylt;/buttongt;  lt;button class="button"gt;Dropdownlt;/buttongt; lt;/divgt;
Метки: