Вкладки в стиле Material Design

Question

Делаю для своего проекта фронт. Дизайн готов.

С вёрсткой проблемы. Уже 3ий день бьюсь с этой шапкой. Не получается сверстать вкладки, как на Android.

По идее, по дефолту, нужен фиксированный перемещающийся эффект выбора вкладки с анимацией.

У меня пока всё выглядит похоже, за исключением этих вкладок.

Не получается сделать адекватную анимацию и структуру HTML. Пытался через div, обёрнутый a. Пытался через button. Сейчас пробую уже через radiobutton. Не понимаю как реакцию на наведение курсором/нажатие анимировать и добавить отправление на сервер изменение состояния.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap');
header {
  background-color: #00BCD4;
  color: white;
  min-height: 140px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: white;
  text-decoration: none;
}

.container-fluid:first-child {
  background-color: rgba(0, 0, 0, 0.2);
}

.navigate>.row:first-child {
  min-height: 100px;
}

.contacts {
  min-height: 40px;
  padding-top: 9px;
}

.phones {
  font-weight: 400;
  display: flex;
  justify-content: flex-end;
}

.phone {
  padding-right: 10px;
  padding-left: 10px;
}

.contacts-bg {}

.text {
  opacity: 70%;
}

.marked {
  opacity: 70%;
}

.logo {
  font-size: 44pt;
  font-weight: 900;
  font-family: 'Roboto', sans-serif;
}

.divider {
  width: 1px;
  height: 52px;
  background-color: black;
  opacity: 0.12;
  margin-left: 22px;
  margin-right: 22px;
}

.interact {
  display: flex;
}

.interact>a:first-child {
  padding-left: 10px;
}

.username {
  font-size: 24px;
}

ul li {
  display: inline;
  text-align: center;
}

#nav-tabs {
  display: flex;
  margin-bottom: 0;
}

.tabs {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  font-weight: 500;
}

.tab {
  min-height: 48px;
  min-width: 118px;
  display: flex;
  justify-content: center;
  border: none;
}

input[type=radio] {
  display: none;
}

label {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

#nav-tabs>label {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

#nav-tabs>label:hover {
  color: rgba(255, 255, 255, 1);
}

#nav-tabs>label::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #536DFE;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

#nav-tabs>label:hover::before {
  transform: scaleX(1);
}

#stroke {
  height: 0.25em;
  width: 70px;
  margin: 0;
  background: blue;
  border: none;
}

#search:hover {}

#catalog:hover {}

#tariff:hover {}

.active {
  color: rgba(255, 255, 255, 1);
  border-bottom: 3px solid #536DFE;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Reset CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="../static/style/header.css">
  <title>${title}</title>
</head>

<body>
  <header>
    <div class="container-fluid align-items-center">
      <div class="container contacts col-12">
        <div class="row justify-content-between">
          <div class="col-1">Pine LLC.</div>
          <div class="col-4"></div>
          <div class="col-7 phones justify-content-end">
            <div class="phone">
              <span class="marked">МТС</span> 123456789
            </div>|
            <div class="phone">
              <span class="marked">life:)</span> 123456789
            </div>|
            <div class="phone">
              <span class="marked">email</span> [email protected]
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="container col-12 navigate justify-content-center">
      <div class="row">
        <div class="col-2 logo">
          <a href="#">
            <div class="logo-text">Pine.RK</div>
          </a>
        </div>
        <div class="col-4 tabs">
          <input name="radio-tab" type="radio" value="search" checked></input>
          <label for="radio-tab" class="tab">ПОИСК</label>
          <input name="radio-tab" type="radio" value="tariff"></input>
          <label for="radio-tab" class="tab">ТАРИФЫ</label>
          <input name="radio-tab" type="radio" value="catalog"></input>
          <label for="radio-tab" class="tab">КАТАЛОГИ</label>
        </div>
        <div class="col-2"></div>
        <div class="col-4 interact align-self-center align-items-center justify-content-start">
          <a href="#">
            <div class="shopping-cart">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none" style="&#10;">
                <path d="M11.6665 30C9.83317 30 8.34984 31.5 8.34984 33.3334C8.34984 35.1667 9.83317 36.6667 11.6665 36.6667C13.4998 36.6667 14.9998 35.1667 14.9998 33.3334C14.9998 31.5 13.4998 30 11.6665 30ZM1.6665 5.00004C1.6665 5.91671 2.4165 6.66671 3.33317 6.66671H4.99984L10.9998 19.3167L8.74984 23.3834C7.53317 25.6167 9.13317 28.3334 11.6665 28.3334H29.9998C30.9165 28.3334 31.6665 27.5834 31.6665 26.6667C31.6665 25.75 30.9165 25 29.9998 25H11.6665L13.4998 21.6667H25.9165C27.1665 21.6667 28.2665 20.9834 28.8332 19.95L34.7998 9.13337C35.4165 8.03337 34.6165 6.66671 33.3498 6.66671H8.68317L7.5665 4.28337C7.29984 3.70004 6.69984 3.33337 6.0665 3.33337H3.33317C2.4165 3.33337 1.6665 4.08337 1.6665 5.00004V5.00004ZM28.3332 30C26.4998 30 25.0165 31.5 25.0165 33.3334C25.0165 35.1667 26.4998 36.6667 28.3332 36.6667C30.1665 36.6667 31.6665 35.1667 31.6665 33.3334C31.6665 31.5 30.1665 30 28.3332 30Z" fill="white"/>
              </svg>
            </div>
          </a>
          <div class="divider"></div>
          <a href="#">
            <div class="username">
              %user_name%
            </div>
          </a>
        </div>
      </div>
    </div>
    </div>
    </div>
    </div>
  </header>

Answer 1

Не понимаю как реакцию на наведение курсором/нажатие анимировать и добавить отправление на сервер изменение состояния.

реакции анимации через CSS псевдоклассы прекрасно реализуются

наведение:hover

нажатие:active

почти полный список можно глянуть например в справочнике htmlbook.ru

для отправки состояния используйте события с помощью dhtml например

<input
  type='radio'
  value='ok'
  onClick='alert("функция срабатывающая по нажатию")'
  onChange='alert("функция срабатывающая по изменению состояния")'
  onMouseOver='alert("функция срабатывающая по наведению мыши")'
  />

их так же можно и в скриптах прикреплять к элементам с помощью метода .addEventListner, вроде правильно написал...

p.s. for в теге label привязывается не к name а к id инпута. и инпуты не двойные а одинарные теги(закрывающий тег не нужен вместо него используется слеш в конце открывающего ) ниже ваш код пофикшеный, но без анимации(сниппеты что-то глючат), места куда ставить желаемый эффект, в принципе пометил комментариями на капсе.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap');
header {
  background-color: #00BCD4;
  color: white;
  min-height: 140px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: white;
  text-decoration: none;
}

.container-fluid:first-child {
  background-color: rgba(0, 0, 0, 0.2);
}

.navigate>.row:first-child {
  min-height: 100px;
}

.contacts {
  min-height: 40px;
  padding-top: 9px;
}

.phones {
  font-weight: 400;
  display: flex;
  justify-content: flex-end;
}

.phone {
  padding-right: 10px;
  padding-left: 10px;
}

.contacts-bg {}

.text {
  opacity: 70%;
}

.marked {
  opacity: 70%;
}

.logo {
  font-size: 44pt;
  font-weight: 900;
  font-family: 'Roboto', sans-serif;
}

.divider {
  width: 1px;
  height: 52px;
  background-color: black;
  opacity: 0.12;
  margin-left: 22px;
  margin-right: 22px;
}

.interact {
  display: flex;
}

.interact>a:first-child {
  padding-left: 10px;
}

.username {
  font-size: 24px;
}

ul li {
  display: inline;
  text-align: center;
}

#nav-tabs {
  display: flex;
  margin-bottom: 0;
}

.tabs {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  font-weight: 500;
}

.tab {
  min-height: 48px;
  min-width: 118px;
  display: flex;
  justify-content: center;
  border: none;
}

input[type=radio] {
  display: none;
}

label {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

#nav-tabs>label {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

#nav-tabs>label:hover {
  color: rgba(255, 255, 255, 1);
}

#nav-tabs>label::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #536DFE;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

#nav-tabs>label:hover::before {
  transform: scaleX(1);
}

#stroke {
  height: 0.25em;
  width: 70px;
  margin: 0;
  background: blue;
  border: none;
}

#search:hover {}

#catalog:hover {}

#tariff:hover {}

.active {
  color: rgba(255, 255, 255, 1);
  border-bottom: 3px solid #536DFE;
}
   .tab:hover {box-shadow: 3px 3px 3px #9f9;}
   /*ЗЕЛЕНАЯ ТЕНЬ ЗДЕСЬ*/
   input:checked + .tab{text-decoration: overline wavy red;}
   /*ВОЛНИСТАЯ ЛИНИЯ ЗДЕСЬ*/

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Reset CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="../static/style/header.css">
  <title>${title}</title>
</head>

<body>
  <header>
    <div class="container-fluid align-items-center">
      <div class="container contacts col-12">
        <div class="row justify-content-between">
          <div class="col-1">Pine LLC.</div>
          <div class="col-4"></div>
          <div class="col-7 phones justify-content-end">
            <div class="phone">
              <span class="marked">МТС</span> 123456789
            </div>|
            <div class="phone">
              <span class="marked">life:)</span> 123456789
            </div>|
            <div class="phone">
              <span class="marked">email</span> [email protected]
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="container col-12 navigate justify-content-center">
      <div class="row">
        <div class="col-2 logo">
          <a href="#">
            <div class="logo-text">Pine.RK</div>
          </a>
        </div>
        <div class="col-4 tabs">
          <input name="radio-tab" type="radio" value="search" checked id="search"/>
          <label for="search" class="tab">ПОИСК</label>
          <input name="radio-tab" type="radio" value="tariff" id="tariff"/>
          <label for="tariff" class="tab">ТАРИФЫ</label>
          <input name="radio-tab" type="radio" value="catalog" id="catalog"/>
          <label for="catalog" class="tab">КАТАЛОГИ</label>
        </div>
        <div class="col-2"></div>
        <div class="col-4 interact align-self-center align-items-center justify-content-start">
          <a href="#">
            <div class="shopping-cart">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none" style="&#10;">
                <path d="M11.6665 30C9.83317 30 8.34984 31.5 8.34984 33.3334C8.34984 35.1667 9.83317 36.6667 11.6665 36.6667C13.4998 36.6667 14.9998 35.1667 14.9998 33.3334C14.9998 31.5 13.4998 30 11.6665 30ZM1.6665 5.00004C1.6665 5.91671 2.4165 6.66671 3.33317 6.66671H4.99984L10.9998 19.3167L8.74984 23.3834C7.53317 25.6167 9.13317 28.3334 11.6665 28.3334H29.9998C30.9165 28.3334 31.6665 27.5834 31.6665 26.6667C31.6665 25.75 30.9165 25 29.9998 25H11.6665L13.4998 21.6667H25.9165C27.1665 21.6667 28.2665 20.9834 28.8332 19.95L34.7998 9.13337C35.4165 8.03337 34.6165 6.66671 33.3498 6.66671H8.68317L7.5665 4.28337C7.29984 3.70004 6.69984 3.33337 6.0665 3.33337H3.33317C2.4165 3.33337 1.6665 4.08337 1.6665 5.00004V5.00004ZM28.3332 30C26.4998 30 25.0165 31.5 25.0165 33.3334C25.0165 35.1667 26.4998 36.6667 28.3332 36.6667C30.1665 36.6667 31.6665 35.1667 31.6665 33.3334C31.6665 31.5 30.1665 30 28.3332 30Z" fill="white"/>
              </svg>
            </div>
          </a>
          <div class="divider"></div>
          <a href="#">
            <div class="username">
              %user_name%
            </div>
          </a>
        </div>
      </div>
    </div>
    </div>
    </div>
    </div>
  </header>

БЛОГ НА HUSL

Вкладки в стиле Material Design

Ответы (1 шт):