Show DevBest Google Bottom Bar Navigation Pattern

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
It's been a while as I've been mad busy at work, but I saw a Dribbble design I liked and wanted to replicate it.

Tried doing it without JavaScript as well.

The design was this:
tab-ui-final.gif


My result was this: (less smooth but it works)


HTML:
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>Document</title>
   
    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="bottom-bar">
      <div class="bottom-bar--items">
        <div class="bottom-bar--item">
          <input type="radio" name="bottom-bar--selected" id="bottom-bar--alpha" checked />
          <label for="bottom-bar--alpha"></label>
          <div class="icon"><i class="fa fa-home"></i></div>
          <div class="name">Home</div>
        </div>
       
        <div class="bottom-bar--item">
          <input type="radio" name="bottom-bar--selected" id="bottom-bar--bravo" />
          <label for="bottom-bar--bravo"></label>
          <div class="icon"><i class="fa fa-heart"></i></div>
          <div class="name">Likes</div>
        </div>
       
        <div class="bottom-bar--item">
          <input type="radio" name="bottom-bar--selected" id="bottom-bar--charlie" />
          <label for="bottom-bar--charlie"></label>
          <div class="icon"><i class="fa fa-search"></i></div>
          <div class="name">Search</div>
        </div>
       
        <div class="bottom-bar--item">
          <input type="radio" name="bottom-bar--selected" id="bottom-bar--delta" />
          <label for="bottom-bar--delta"></label>
          <div class="icon"><i class="fa fa-user"></i></div>
          <div class="name">Profile</div>
        </div>
      </div>
    </div>
  </body>
</html>

SCSS:
SCSS:
$purple: #5b37b7;
$pink: #c33c96;
$yellow: #e6a919;
$blue: #1194aa;

* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
}

body {
  background-color: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

.bottom-bar {
  background-color: #fff;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 30px 50px;
  box-shadow: 0px 20px 90px rgba(50, 50, 50, .3);

  &--items {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &--item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 15px 25px;
   
    &:not(:last-child) {
      margin-right: 15px;
    }
   
    &:nth-child(1) {
      .name {color: $purple;}
     
      [type="radio"]:checked {
        & ~ .icon i {color: $purple;}
        & ~ label { background-color: rgba($purple, .25);}
      }
    }
   
    &:nth-child(2) {
      .name {color: $pink;}
     
      [type="radio"]:checked {
        & ~ .icon i {color: $pink;}
        & ~ label { background-color: rgba($pink, .25);}
      }
    }
   
    &:nth-child(3) {
      .name {color: $yellow;}
     
      [type="radio"]:checked {
        & ~ .icon i {color: $yellow;}
        & ~ label { background-color: rgba($yellow, .25);}
      }
    }
   
    &:nth-child(4) {
      .name {color: $blue;}
     
      [type="radio"]:checked {
        & ~ .icon i {color: $blue;}
        & ~ label { background-color: rgba($blue, .25);}
      }
    }
   
    label {
      position: absolute;
      top: 0; left: 0;
      height: 100%;
      width: 100%;
      cursor: pointer;
      border-radius: 30px;
      flex: none;
      background-color: rgba(255, 255, 255, 0);
      transition: background-color .15s ease-in-out;
    }
   
    [type="radio"] {
      display: none;
      position: absolute;
      top: 0; left: 0;
      height: 0;
      width: 0;
      -webkit-appearance: none;
      flex: none;
     
      &:checked {
        & ~ .name {
          margin-left: 15px;
          display: block;
          width: 100%;
        }
      }
    }
   
    .icon {
     
      i {
        color: #000;
        font-size: 24px;
      }
    }
   
    .name {
      font: {
        weight: 600;
        size: 16px;
      }
      width: 0%;
      margin-left: -15px;
      overflow: hidden;
      transition: all .5s ease-in-out;
    }
  }
}

Hope you like
 

TesoMayn

Boredom, it vexes me.
Oct 30, 2011
1,482
1,482
With Font Awesome you should use fas (solid - free), fal (light - pro), fab (brands - free), or far (regular - pro). fa has been depreciated as of 5

I'm not sure if they have plans to remove fa in the future, but I think it's best to get used to writing fas now

But this is nice.

I like that you're using Sass ;P
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
With Font Awesome you should use fas (solid - free), fal (light - pro), fab (brands - free), or far (regular - pro). fa has been depreciated as of 5

I'm not sure if they have plans to remove fa in the future, but I think it's best to get used to writing fas now

But this is nice.

I like that you're using Sass ;P
I’ve updated the pen anyway because I’ve added outlined icons.

The designer of the original design sent me a link to a JavaScript library of icons so I’ve used them.

I’ve got a Pro subscription but never used it. Subscribed to the kickstarter when it was launched. Should probably make use of it soon lmao
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
Glad to see you've started using SCSS. :D
I've only started using it since starting this new job as the websites I'm working on are huge so they need it. Kinda wish I'd have started using it sooner though, it's great.
 

Users who are viewing this thread

Top