Created
August 16, 2024 22:19
-
-
Save UltraInstinct0x/683725e103c94c6f8b6ed38b645bcb33 to your computer and use it in GitHub Desktop.
Simple and Cool mobile navigation animation
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
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;&display=swap" rel="stylesheet"> | |
| <link href='https://unpkg.com/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'> | |
| <title>100 Days of Frontend Dev: Day 1</title> | |
| </head> | |
| <body> | |
| <div class="mobile-screen"> | |
| <div class="menu"> | |
| <div class="menu__wrapper"> | |
| <header class="menu__header"> | |
| <div class="user"> | |
| <div class="user__img"><img class="responsive-img" src="https://instagram.fmaa1-1.fna.fbcdn.net/v/t51.2885-19/s150x150/120900825_549091912561744_1169166627943311860_n.jpg?_nc_ht=instagram.fmaa1-1.fna.fbcdn.net&_nc_ohc=aqaJPaq4E7cAX9_KEUX&oh=c884e8f79dc757548e7f1c0d006592bc&oe=5FAC9621" alt=""></div> | |
| <p class="user__name">Febron Rodriguez</p> | |
| </div> | |
| <button class="btn close-btn btn--dark"><i class='bx bx-x'></i></button> | |
| </header> | |
| <div class="options"> | |
| <ul class="options__wrapper"> | |
| <li class="options--item"><a href="#">Jobs</a></li> | |
| <li class="options--item"><a href="#">Application</a></li> | |
| <li class="options--item"><a href="#">Portfolio</a></li> | |
| <li class="options--item"><a href="#">Profile</a></li> | |
| <li class="options--item"><a href="#">Logout</a></li> | |
| </ul> | |
| </div> | |
| <div class="socials"> | |
| <ul class="socials__wrapper"> | |
| <li><a class="btn btn--dark" href=""><i class='bx bxl-facebook' ></i></a></li> | |
| <li><a class="btn btn--dark" href=""><i class='bx bxl-instagram' ></i></a></li> | |
| <li><a class="btn btn--dark" href=""><i class='bx bxl-twitter' ></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="main"> | |
| <div class="main__wrapper"> | |
| <header class="main__header"> | |
| <button class="btn menu-btn "><i class='bx bx-menu-alt-left'></i></button> | |
| <button class="btn notification-btn"><i class='bx bxs-bell'></i></button> | |
| </header> | |
| <!-- Content --> | |
| <header class="main__headings"> | |
| <h1 class="light-wt">Hello Febron 👋</h1> | |
| <h1 class="bold-wt">Find your Dream Job</h1> | |
| </header> | |
| <section class="popular-jobs"> | |
| <section class="popular-jobs__wrapper"> | |
| <p>Popular Jobs</p> | |
| <section class="list-view"> | |
| <div class="tile tile--active"> | |
| <div class="tile__wrapper"> | |
| <header class="tile__header"> | |
| <div class="tile__icon"><img src="https://img-authors.flaticon.com/google.jpg" alt="" class="responsive-img"></div> | |
| <button class="tile__btn"><i class='bx bx-heart' ></i></button> | |
| </header> | |
| </div> | |
| </div> | |
| <div class="tile"> | |
| <div class="tile__wrapper"> | |
| <header class="tile__header"> | |
| <div class="tile__icon"><img src="" alt="" class="responsive-img"></div> | |
| <button class="tile__btn"><i class='bx bx-heart' ></i></button> | |
| </header> | |
| </div> | |
| </div> | |
| <div class="tile"> | |
| <div class="tile__wrapper"> | |
| <header class="tile__header"> | |
| <div class="tile__icon"><img src="" alt="" class="responsive-img"></div> | |
| <button class="tile__btn"><i class='bx bx-heart' ></i></button> | |
| </header> | |
| </div> | |
| </div> | |
| <div class="tile"> | |
| <div class="tile__wrapper"> | |
| <header class="tile__header"> | |
| <div class="tile__icon"><img src="" alt="" class="responsive-img"></div> | |
| <button class="tile__btn"><i class='bx bx-heart' ></i></button> | |
| </header> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| </section> | |
| <section id="category"> | |
| <section class="wrapper"> | |
| <p class="list-view__title">Recent Jobs</p> | |
| <section class="scroll-view"> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| <div class="list-view__item"> | |
| <div class="list-view__item--img"> | |
| <img class="responsive-img" src="https://www.gizmodo.com.au/content/uploads/sites/2/2016/02/03/i8l41hy4uj1g4okpii2v.jpg" alt=""> | |
| </div> | |
| <div class="list-view__item--content"> | |
| <p class="main-title">Senior UX Designer</p> | |
| <p class="main-discription">Uber ● Fulltime</p> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| </section> | |
| </div> | |
| <section class="search"> | |
| <section class="search__wrapper"> | |
| <div class="search-box"> | |
| <div class="btn btn--dark btn--small search-icon"><i class='bx bx-search'></i></div> | |
| <input type="text" id="search" name="search" placeholder="Search"> | |
| </div> | |
| <button class="btn btn--dark btn--small"><i class='bx bx-slider-alt' ></i></button> | |
| </section> | |
| </section> | |
| </div> | |
| </div> | |
| </body> |
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
| const body = document.querySelector('.mobile-screen'); | |
| const menu = body.querySelector('.menu'); | |
| const menuBtn = body.querySelector('.menu-btn'); | |
| const closeBtn = body.querySelector('.close-btn'); | |
| const main = body.querySelector('.main') | |
| menuBtn.addEventListener('click',function(){ | |
| main.classList.add('menu-open__main'); | |
| main.classList.add('overflow-hidden'); | |
| body.classList.add('overflow-hidden') | |
| }); | |
| closeBtn.addEventListener('click',function(){ | |
| main.classList.remove('menu-open__main'); | |
| main.classList.remove('overflow-hidden'); | |
| body.classList.remove('overflow-hidden') | |
| }) |
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-color: #1f1f29; | |
| --primary-lighter:#2b2b3d; | |
| --green:#2fb145; | |
| --gray:#323232; | |
| --transGray:#dbdbdb; | |
| } | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Poppins',sans-serif; | |
| scrollbar-width: none; | |
| outline: none; | |
| } | |
| h1{ | |
| font-size: 24px; | |
| } | |
| ::-webkit-scrollbar { | |
| display: none; | |
| } | |
| body{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100vw; | |
| height: 100vh; | |
| background-color: var(--primary-lighter); | |
| } | |
| a{ | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| ul{ | |
| list-style-type: none; | |
| } | |
| /* Helpers */ | |
| .bold-wt{ | |
| font-weight: 500; | |
| } | |
| .light-wt{ | |
| font-weight: 400; | |
| } | |
| .responsive-img{ | |
| width: 100%; | |
| height: auto; | |
| object-fit: cover; | |
| } | |
| .mobile-screen{ | |
| position: relative; | |
| background-color: wheat; | |
| width: 340px; | |
| height: 700px; | |
| } | |
| .mobile-screen{ | |
| overflow: hidden; | |
| } | |
| .overflow-hidden{ | |
| overflow: hidden; | |
| } | |
| .menu{ | |
| background-color: var(--primary-color); | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .menu__wrapper{ | |
| padding: 48px 24px; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .menu__header{ | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .btn{ | |
| width: 45px; | |
| height: 45px; | |
| border: none; | |
| cursor: pointer; | |
| border-radius: 14px; | |
| font-size: 26px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: white; | |
| } | |
| .btn--small{ | |
| font-size: 18px; | |
| } | |
| .btn--dark{ | |
| color: white; | |
| background-color: var(--primary-lighter) ; | |
| } | |
| .btn:hover{ | |
| background-color: white; | |
| color: var(--primary-color); | |
| } | |
| /* User */ | |
| .user{ | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: white; | |
| } | |
| .user__img{ | |
| width: 45px; | |
| height: 45px; | |
| overflow: hidden; | |
| border-radius: 14px; | |
| } | |
| .user__name{ | |
| font-weight: 300; | |
| } | |
| /* Options */ | |
| .options{ | |
| color: white; | |
| margin-top: -100px; | |
| } | |
| .options__wrapper{ | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .options--item{ | |
| font-size: 20px; | |
| font-weight: 400; | |
| } | |
| /* Socials */ | |
| .socials__wrapper{ | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| } | |
| /* Main */ | |
| .main{ | |
| position: absolute; | |
| top: 0; | |
| z-index: 10; | |
| width: 100%; | |
| height: 100%; | |
| background-color: white; | |
| transition: border-radius cubic-bezier(0.77, 0, 0.175, 1) 0.6s, scale cubic-bezier(0.77, 0, 0.175, 1) 0.6s, transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s; | |
| transition-delay: 0s, 0s, 0s; | |
| overflow-y: scroll; | |
| box-shadow: 0px 7px 17px 10px #121217; | |
| } | |
| /* .main::before{ | |
| position: relative; | |
| content: ''; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #323232; | |
| z-index: -2; | |
| } */ | |
| .menu-open__main{ | |
| z-index: 2; | |
| border-radius: 36px; | |
| transform: scale(.65) translateX(170px); | |
| overflow: hidden; | |
| pointer-events: none | |
| } | |
| .main__wrapper{ | |
| padding: 48px 24px; | |
| position: relative; | |
| height: 100%; | |
| overflow: scroll; | |
| } | |
| .menu-btn{ | |
| width: 26px; | |
| } | |
| .notification-btn{ | |
| font-size: 18px; | |
| } | |
| .main__header{ | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| /* Search Bar */ | |
| .search{ | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| border-radius: 24px 24px 0 0; | |
| overflow: hidden; | |
| background-color: var(--primary-color); | |
| } | |
| .search__wrapper{ | |
| padding: 18px 24px; | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .search-box{ | |
| width: 80%; | |
| position: relative; | |
| } | |
| .search-icon{ | |
| position: absolute; | |
| cursor: initial; | |
| } | |
| .search-icon:hover{ | |
| background-color: var(--primary-lighter); | |
| color: white; | |
| } | |
| .search-box input{ | |
| background-color: var(--primary-lighter); | |
| border: none; | |
| border-radius: 14px; | |
| width: 100%; | |
| height: 45px; | |
| display: block; | |
| color: white; | |
| padding: 16px; | |
| padding-left: 45px; | |
| } | |
| /* Jobs Track */ | |
| .popular-jobs,#category{ | |
| padding-top: 24px; | |
| } | |
| .popular-jobs,#category p{ | |
| font-size: 12px; | |
| } | |
| .list-view{ | |
| width: 100%; | |
| display: flex; | |
| gap: 12px; | |
| overflow: auto; | |
| padding-top: 12px; | |
| } | |
| /* Tile */ | |
| .tile{ | |
| min-width: 125px; | |
| height: 120px; | |
| background-color: var(--transGray); | |
| border-radius: 14px; | |
| } | |
| .tile--active{ | |
| background-color: var(--green); | |
| } | |
| .tile--active .tile__btn{ | |
| color: white; | |
| } | |
| .tile__wrapper{ | |
| width: 100%; | |
| height: 100%; | |
| padding: 12px; | |
| } | |
| .tile__icon{ | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| background-color: white; | |
| } | |
| .tile__header{ | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .tile__btn{ | |
| width: 20px; | |
| height: 20px; | |
| font-size: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: transparent; | |
| border: none; | |
| color: var(--gray); | |
| cursor: pointer; | |
| } | |
| /* List View */ | |
| .list-view__item{ | |
| padding: 10px; | |
| display: flex; | |
| gap: 10px; | |
| border-radius: 8px; | |
| } | |
| .list-view__item--img{ | |
| width: 40px; | |
| height: 40px; | |
| background-color: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .scroll-view{ | |
| padding-top: 22px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment