Нижняя веб-навигация - PullRequest
Новая
       10

Нижняя веб-навигация

0 голосов
/ 15 февраля 2019

Я следил за дизайном Материала, разработанным Google, и у них есть новая нижняя панель навигации с формой, которую я хотел бы знать, если возможно архивировать в Интернете.

Заранее спасибодля обмена знаниями.

Навигация внизу по пользовательской форме

1 Ответ

0 голосов
/ 20 февраля 2019

Вам нужно будет использовать некоторые приемы, чтобы это произошло, однако вам действительно нужно опубликовать свою попытку, чтобы увидеть, как ваша попытка может быть изменена.

Здесь я использовал псевдо: before и: afterэлемент для создания кривых на нижнем элементе и красный цвет границы для создания формы.

Вы можете просто использовать элементы: hover в качестве стандарта, я просто использовал его для эффекта:) 

html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: red;
  position: relative;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  transition: all 0.4s;
  background: white;
}

.circle {
  position: absolute;
  top: -50px;
  transition: all 0.4s;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
  background: transparent;
  border: 5px solid red;
  border-radius: 50%;
}

body:hover .bottom:before,
body:hover .bottom:after {
  bottom: 100%;
}

.bottom:before,
.bottom:after {
  content: "";
  transition: all 0.4s;
  position: absolute;
  bottom: calc(100% - 20px);
  width: calc(50% - 30px);
  height: 20px;
  background: white;
}

.bottom:before {
  border-radius: 0 20px 0 0;
  left: 0;
}

.bottom:after {
  border-radius: 20px 0 0 0;
  right: 0;
}

body:hover .circle {
  top: 0;
  background: white;
}

body:hover .bottom {
  height: 100px;
}

body:hover .circle:hover {
  background: gold;
  cursor: pointer;
}
<div class="bottom">
  <div class="circle"></div>
</div>
...