Created
May 8, 2024 20:41
-
-
Save fernastereo/263c0524e93f8a6084125195fc5311de to your computer and use it in GitHub Desktop.
Burger Menu and Sticky Footer
This file contains 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 name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Burger Menu and Sticky Footer</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| *{ | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| header{ | |
| background-color: #f10c0c; | |
| } | |
| li{ | |
| list-style: none; | |
| } | |
| a{ | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .navbar{ | |
| min-height: 70px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 24px; | |
| } | |
| .nav-menu{ | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 60px; | |
| } | |
| .nav-branding{ | |
| font-size: 2rem; | |
| } | |
| .nav-link{ | |
| transition: all 0.7s ease; | |
| } | |
| .nav-link:hover{ | |
| color: #f57f10; | |
| } | |
| .hamburger{ | |
| display: none; | |
| cursor: pointer; | |
| } | |
| .bar{ | |
| display: block; | |
| width: 25px; | |
| height: 3px; | |
| margin: 5px auto; | |
| -webkit-transition: all 0.3s ease-in-out; | |
| transition: all 0.3s ease-in-out; | |
| background-color: white; | |
| } | |
| footer{ | |
| width: 100%; | |
| } | |
| .footer-content{ | |
| display: flex; | |
| justify-content: space-evenly; | |
| align-items: center; | |
| background-color: #262626; | |
| color: white; | |
| padding: 12px 0; | |
| } | |
| .footer-icon{ | |
| width: 24px; | |
| height: 24px; | |
| fill: white; | |
| } | |
| article{ | |
| padding: 15px; | |
| } | |
| article > p { | |
| margin: 26px 0; | |
| text-align: justify; | |
| } | |
| @media(max-width: 768px){ | |
| .hamburger{ | |
| display: block; | |
| } | |
| .hamburger.active .bar:nth-child(2){ | |
| opacity: 0; | |
| } | |
| .hamburger.active .bar:nth-child(1){ | |
| transform: translateY(8px) rotate(45deg); | |
| } | |
| .hamburger.active .bar:nth-child(3){ | |
| transform: translateY(-8px) rotate(-45deg); | |
| } | |
| .nav-menu{ | |
| position: fixed; | |
| left: -100%; | |
| top: 70px; | |
| gap: 0; | |
| flex-direction: column; | |
| background-color: #262626; | |
| width: 100%; | |
| text-align: center; | |
| transition: 0.3s; | |
| } | |
| .nav-item{ | |
| margin: 16px 0; | |
| } | |
| .nav-menu.active{ | |
| left: 0; | |
| } | |
| header{ | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| } | |
| footer{ | |
| position: fixed; | |
| bottom: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <nav class="navbar"><a href="/" class="nav-branding">Dev</a> | |
| <ul class="nav-menu"> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link">About</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link">Contact</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#" class="nav-link">Blog</a> | |
| </li> | |
| </ul> | |
| <div class="hamburger"> | |
| <span class="bar"></span> | |
| <span class="bar"></span> | |
| <span class="bar"></span> | |
| </div> | |
| </nav> | |
| </header> | |
| <article> | |
| <p>Main content.</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium id, quia repellendus quod, impedit et distinctio dolor pariatur animi magnam non, dicta error. Nostrum laborum possimus ipsum alias amet veniam?</p> | |
| </article> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-item"> | |
| <svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg> | |
| </div> | |
| <div class="footer-item"> | |
| <svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg> | |
| </div> | |
| <div class="footer-item"> | |
| <svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M384 96V320H64L64 96H384zM64 32C28.7 32 0 60.7 0 96V320c0 35.3 28.7 64 64 64H181.3l-10.7 32H96c-17.7 0-32 14.3-32 32s14.3 32 32 32H352c17.7 0 32-14.3 32-32s-14.3-32-32-32H277.3l-10.7-32H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm464 0c-26.5 0-48 21.5-48 48V432c0 26.5 21.5 48 48 48h64c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H528zm16 64h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H544c-8.8 0-16-7.2-16-16s7.2-16 16-16zm-16 80c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H544c-8.8 0-16-7.2-16-16zm32 160a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg> | |
| </div> | |
| <div class="footer-item"> | |
| <svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| const hamburger = document.querySelector('.hamburger'); | |
| const navMenu = document.querySelector('.nav-menu'); | |
| hamburger.addEventListener('click', () => { | |
| hamburger.classList.toggle('active'); | |
| navMenu.classList.toggle('active'); | |
| }); | |
| document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => { | |
| hamburger.classList.remove('active'); | |
| navMenu.classList.remove('active'); | |
| })); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment