CODEWITHSUNDEEP
javascriptnavigationcss-shapes
Yurisbel Jimenez
Yurisbel Jimenez

Reputation: 1

Web bottom navigation

I've been following the design of the Material developed by Google and they have a new bottom navigation bar with a shape I would love to know if it's possible to archive on the Web.

Thanks in advance for sharing your knowledge.

Custom shape bottom navigation

Upvotes: 0

Views: 114

Answers (1)

jbutler483
jbutler483

Reputation: 24559

You will need to use some tricks to make this happen, however you should really look to post your attempt to see how your attempt can be amended.

Here I have used a :before and :after pseudo element to create the curves on the bottom element, and a border colour of red to create the shape.

You can just use the :hover elements as standard, I just used it for effect :)

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>

Upvotes: 1

Related Questions