Created
June 7, 2021 02:00
-
-
Save pedrohenriquebr/b075570bccda16951e4e2c74393b90d1 to your computer and use it in GitHub Desktop.
Nav Footer bar with effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --primary: rgb(1, 1, 133); | |
| } | |
| *,*::after, *::before{ | |
| margin:0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| font-size: 13px; | |
| overflow: hidden; | |
| } | |
| .footer { | |
| width: 100%; | |
| height: 12vh; | |
| background-color: var(--primary); | |
| color: white; | |
| font-size: 0.6rem; | |
| font-family: 'Segoe UI'; | |
| display: flex; | |
| padding: 0 8px; | |
| } | |
| .footer__btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 10px 0 0 0; | |
| width: calc( ( 100% / 5 ) - 20px); | |
| border: none; | |
| cursor: pointer; | |
| margin: 0 10px; | |
| z-index: 999; | |
| font-size: 1rem; | |
| } | |
| .footer__btn.active { | |
| color: var(--primary ); | |
| } | |
| .footer__btn__icon { | |
| font-size: 2rem; | |
| } | |
| .container { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: 88vh; | |
| } | |
| .main-container { | |
| max-width: 768px; | |
| margin: 0 auto; | |
| } | |
| #backeffect { | |
| --size: 9.8rem; | |
| --bottom: 1.2rem; | |
| --border-radius: 25%; | |
| --bottom: 1.9rem; | |
| position: absolute; | |
| display: none; | |
| bottom: var(--bottom); | |
| width: calc(var(--size) - 0px); | |
| height: var(--size); | |
| border-radius: var(--border-radius); | |
| /* border: 1px solid black; */ | |
| transform: rotate(45deg); | |
| background: white; | |
| content: " "; | |
| transition: left 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <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, height=device-height"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <title>MyApp</title> | |
| <link rel="stylesheet" href="index.css"> | |
| <script src="index.js"></script> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <div class="container"> | |
| opoa | |
| </div> | |
| <div id="backeffect"></div> | |
| <nav class="footer"> | |
| <div class="footer__btn btn" > | |
| <i class="footer__btn__icon material-icons">home</i> | |
| <span class="footer__btn_label">Home</span> | |
| </div> | |
| <div class="footer__btn btn" > | |
| <i class="footer__btn__icon material-icons">people</i> | |
| <span class="footer__btn_label">Network</span> | |
| </div> | |
| <div class="footer__btn btn" > | |
| <i class="footer__btn__icon material-icons">add_box</i> | |
| <span class="footer__btn_label">Post</span> | |
| </div> | |
| <div class="footer__btn btn" > | |
| <i class="footer__btn__icon material-icons">person</i> | |
| <span class="footer__btn_label">Profile</span> | |
| </div> | |
| <div class="footer__btn btn" > | |
| <i class="footer__btn__icon material-icons">settings</i> | |
| <span class="footer__btn_label">Settings</span> | |
| </div> | |
| </nav> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.addEventListener("DOMContentLoaded", () => { | |
| const backeffect = document.getElementById("backeffect"); | |
| [...document.getElementsByClassName("btn")].forEach(d => { | |
| d.onclick = (evt) => { | |
| [...document.querySelectorAll('.btn.active')].forEach(d => d.classList.toggle('active')); | |
| d.classList.toggle('active');; | |
| backeffect.style.display = 'block'; | |
| backeffect.style.left = `${parseInt(getComputedStyle(d).width.slice(0,-2))/2 - backeffect.offsetWidth/2 + d.offsetLeft}px`; | |
| } | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment