Skip to content

Instantly share code, notes, and snippets.

@gubleo
Created July 8, 2021 17:42
Show Gist options
  • Save gubleo/bc5dc98530fcec82435a8abe0d5285ac to your computer and use it in GitHub Desktop.
Save gubleo/bc5dc98530fcec82435a8abe0d5285ac to your computer and use it in GitHub Desktop.
Barra de navegação no menu inferior
<style>
body {
margin: 0 0 55px 0;
}
.nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">home</i>
<span class="nav__text">Home</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Unidade</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">pets</i>
<span class="nav__text">Pets</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">directions_car</i>
<span class="nav__text">Veiculo</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Ajustes</span>
</a>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment