├── .gitignore ├── .prettierrc.yaml ├── README.md ├── css └── styles.css ├── index.html └── js └── mobile-menu.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /.prettierrc.yaml: -------------------------------------------------------------------------------- 1 | printWidth: 80 2 | tabWidth: 2 3 | useTabs: false 4 | semi: true 5 | singleQuote: true 6 | trailingComma: all 7 | bracketSpacing: true 8 | jsxBracketSameLine: false 9 | arrowParens: avoid 10 | proseWrap: always 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mobile menu workshop 2 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 3 | Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 4 | line-height: 1.5; 5 | color: #212121; 6 | background-color: #fff; 7 | } 8 | 9 | .container { 10 | min-width: 320px; 11 | max-width: 1170px; 12 | padding-left: 15px; 13 | padding-right: 15px; 14 | margin-left: auto; 15 | margin-right: auto; 16 | } 17 | 18 | .page-header { 19 | box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 20 | 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%); 21 | } 22 | 23 | .page-header .container { 24 | min-height: 80px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: flex-end; 28 | } 29 | 30 | .menu { 31 | display: flex; 32 | padding: 0; 33 | margin: 0; 34 | list-style: none; 35 | } 36 | 37 | @media (max-width: 767px) { 38 | .menu { 39 | display: none; 40 | } 41 | } 42 | 43 | .menu .link { 44 | padding: 10px; 45 | color: inherit; 46 | text-decoration: none; 47 | } 48 | 49 | .menu .link:hover, 50 | .menu .link:focus { 51 | text-decoration: underline; 52 | } 53 | 54 | .menu-toggle { 55 | min-height: 40px; 56 | min-width: 40px; 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | 61 | margin: 0; 62 | padding: 0; 63 | background-color: transparent; 64 | cursor: pointer; 65 | border: none; 66 | border-radius: 50%; 67 | outline: none; 68 | } 69 | 70 | @media (min-width: 768px) { 71 | .menu-toggle { 72 | display: none; 73 | } 74 | } 75 | 76 | .menu-toggle:hover, 77 | .menu-toggle:focus { 78 | background-color: rgba(0, 0, 0, 0.1); 79 | } 80 | 81 | .menu-container { 82 | position: fixed; 83 | top: 0; 84 | left: 0; 85 | width: 100vw; 86 | height: 100vh; 87 | padding: 32px; 88 | background-color: #3f51b5; 89 | z-index: 999; 90 | 91 | transform: translateX(100%); 92 | transition: transform 250ms ease-in-out; 93 | } 94 | 95 | .menu-container.is-open { 96 | transform: translateX(0); 97 | } 98 | 99 | .menu-container .menu-toggle { 100 | position: absolute; 101 | top: 16px; 102 | right: 16px; 103 | color: #fff; 104 | } 105 | 106 | .mobile-menu { 107 | padding: 0; 108 | margin: 0; 109 | list-style: none; 110 | } 111 | 112 | .mobile-menu .link { 113 | display: block; 114 | padding: 10px; 115 | color: #fff; 116 | text-decoration: none; 117 | } 118 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mobile menu workshop 7 | 13 | 14 | 15 | 16 |
17 |
18 | 37 | 38 | 44 |
45 |
46 | 47 |
48 |
49 |

50 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta 51 | possimus doloribus modi numquam quaerat reprehenderit, necessitatibus 52 | consectetur corrupti recusandae consequatur ut dolor odio itaque iusto 53 | beatae? Quaerat minima sint laborum ex, est eos quidem, quisquam, 54 | magnam sed quos voluptatum. Pariatur veritatis quam neque aliquid quis 55 | quod est deserunt tempora assumenda veniam modi, voluptatem temporibus 56 | ab repellendus excepturi. Dolore architecto, sit molestias animi et 57 | pariatur dolorem voluptatum nam laudantium veniam consectetur ratione 58 | quod suscipit inventore dicta illum cum non. Fugit nobis recusandae 59 | rerum! Recusandae ab maiores eveniet at laborum delectus iure. Nisi 60 | commodi quam iusto, omnis quasi corporis incidunt perferendis, vel 61 | voluptatem, rem eligendi! Ea pariatur voluptas odio consectetur non 62 | blanditiis nam iure voluptate veniam cupiditate modi molestias quas 63 | temporibus quo facilis, consequatur natus officiis sit accusamus 64 | exercitationem placeat itaque. Placeat, non sed consequuntur quia modi 65 | inventore a nemo recusandae officia, maxime accusamus eligendi id 66 | mollitia quibusdam cumque? Cupiditate nam iusto praesentium 67 | exercitationem doloremque provident, quidem, dolor vero totam dolores 68 | veritatis fugiat. Ipsam omnis sapiente, voluptates consectetur earum 69 | dolorum est enim natus aliquid aliquam reprehenderit mollitia tempore, 70 | eius sunt, velit laudantium fugiat! Eaque tenetur voluptatum ipsa 71 | voluptas harum tempora corporis. Corrupti cumque delectus aperiam 72 | beatae et sequi at, assumenda odit minima! 73 |

74 |

75 | Asperiores nesciunt aliquid dicta? Eaque similique iste et velit 76 | tenetur pariatur veniam praesentium optio ducimus? Dicta doloribus, 77 | quas magnam consectetur distinctio placeat numquam eius maiores ab 78 | consequuntur facere dignissimos laboriosam itaque qui animi. 79 | Exercitationem possimus est iusto id ab quod dolorem harum, commodi 80 | distinctio voluptas eaque beatae consequuntur enim voluptatem alias 81 | repellat architecto aperiam eius ullam fugit dolorum magnam fuga 82 | vitae. Vel obcaecati rem, similique id necessitatibus sed, eius animi 83 | hic iure provident fuga tempore odit ullam accusantium ad nobis 84 | explicabo illum officia debitis natus facere! Facere sed placeat nihil 85 | delectus ipsa quaerat dicta repellendus distinctio rem! Tenetur, 86 | aperiam ea. Nulla corrupti laborum doloremque numquam dignissimos non 87 | quam, quas, repellendus dolores maiores molestias dicta magnam! 88 | Repudiandae quibusdam ducimus possimus ipsa consequuntur expedita, 89 | excepturi sint, fuga temporibus pariatur eveniet sed nihil facere 90 | dolor velit porro. Quidem voluptatem accusamus itaque numquam atque, 91 | assumenda iusto hic inventore, quo, maxime illo explicabo ullam 92 | doloremque neque voluptates necessitatibus nisi? Illo, praesentium 93 | hic! Necessitatibus perferendis alias sunt quia vero at distinctio 94 | harum deserunt, modi dolores numquam omnis doloremque nostrum, illo 95 | reiciendis nemo officiis perspiciatis explicabo nobis possimus, 96 | nesciunt molestiae rem? Magnam deserunt suscipit, dicta, veritatis sed 97 | nisi iusto eveniet saepe corporis adipisci voluptates autem quasi 98 | praesentium. 99 |

100 |

101 | Id veritatis, suscipit sit sunt at tempora delectus? Itaque rerum ea, 102 | vitae ullam reprehenderit modi. Deserunt blanditiis fugit accusamus, 103 | dolore architecto assumenda sint aspernatur aut, error corrupti 104 | deleniti voluptatibus sapiente alias autem repudiandae molestias 105 | repellendus? Provident ratione laborum ab pariatur itaque odio facere 106 | eius. Porro facilis commodi quaerat quis velit, esse sequi cum modi? 107 | Sapiente laborum assumenda dolorem voluptates deserunt magnam sit, vel 108 | non doloribus perferendis, ipsum quis eveniet. Consequuntur sapiente 109 | obcaecati incidunt suscipit veritatis, eum officiis cum enim vel 110 | quaerat laudantium corrupti, modi dignissimos facere quo praesentium, 111 | exercitationem quae est delectus? Rem ipsam deleniti atque modi cum, 112 | velit, autem maxime ullam expedita non adipisci. Quisquam, excepturi 113 | culpa, quo praesentium minima ipsa inventore molestias possimus 114 | commodi fugit voluptatibus repellendus in vitae nihil provident 115 | temporibus. Sed pariatur perspiciatis assumenda. Excepturi vitae 116 | temporibus ab, voluptates sapiente dicta! Quod, cumque sed dolor quae 117 | obcaecati fugit doloribus placeat dolorum nulla tenetur odit eum 118 | minima impedit ullam nemo vitae sunt? Porro pariatur facere deserunt 119 | aperiam obcaecati libero, doloremque velit corporis ex commodi nemo 120 | ratione, iusto minima animi perspiciatis beatae nulla natus, eveniet 121 | tenetur corrupti architecto tempore? Aperiam vel nulla officiis 122 | dignissimos repellendus perspiciatis provident, pariatur eligendi 123 | itaque, beatae modi delectus iure deleniti? Iste, iusto? Quae. 124 |

125 |

126 | Sint exercitationem expedita ut sed labore! Possimus molestiae 127 | blanditiis quasi recusandae, quaerat temporibus sit numquam ut, 128 | quisquam repudiandae asperiores repellendus dolor veritatis aperiam, 129 | debitis dolorem consequuntur error deserunt id. Atque praesentium, 130 | totam sequi debitis voluptates fugit eum deleniti hic provident nisi 131 | eos perferendis qui libero soluta vero nostrum unde, magni fuga. 132 | Inventore qui dolorem temporibus vel quas. Quam mollitia obcaecati 133 | temporibus nulla non ad eos distinctio, minus quod voluptate? 134 | Laudantium, alias amet quia nesciunt doloribus reprehenderit, ex 135 | facilis iure, blanditiis nemo assumenda. Autem voluptatum ut facere. 136 | Non harum a aliquam cumque maiores dicta aspernatur, eos, quia esse 137 | quam facilis, eaque praesentium omnis quaerat molestiae tenetur optio. 138 | Modi aperiam tenetur eligendi repellat expedita, pariatur repudiandae, 139 | neque quasi molestiae enim dolor earum omnis eius delectus eveniet 140 | ipsam rem beatae porro consectetur? Soluta maxime debitis quaerat 141 | nulla laudantium, harum eaque earum dolores, quia aut similique 142 | dolorum. Ex debitis veniam nostrum fuga odio sequi aliquam 143 | exercitationem praesentium beatae nisi explicabo voluptatibus quis, 144 | hic iusto corporis quas dolor dolorem adipisci? Iste porro sit 145 | exercitationem assumenda obcaecati fuga tempore voluptatem, tenetur 146 | mollitia harum non eaque. Sint, sapiente voluptatibus ipsum, eum, 147 | possimus aliquam omnis provident iste excepturi eaque accusamus minima 148 | ullam est minus amet ducimus veniam ea! 149 |

150 |

151 | Numquam vitae incidunt ab fugit esse dolor quidem quibusdam iusto 152 | suscipit aliquid dolore nihil, rem labore quisquam molestias cumque 153 | temporibus dolorem inventore veritatis optio error tempora similique 154 | officiis. Quos officia numquam ab, impedit veritatis ut obcaecati 155 | fugit natus ipsam vel repellendus ratione! Vel iusto a doloribus 156 | tempora sapiente! Ducimus vero, maxime animi modi nostrum, obcaecati 157 | quo error cupiditate eos veritatis odio, nulla dolores est molestiae 158 | atque dicta ex dolore ab dolor iste nam beatae. Eos harum tenetur 159 | doloribus impedit ea ad quia cum laudantium. Animi harum quia neque 160 | deleniti. Excepturi, quia eligendi temporibus laudantium dicta eos 161 | quas necessitatibus nihil velit consequuntur libero cupiditate 162 | nesciunt, explicabo quae minus tempora eum! Repellendus accusantium 163 | aut assumenda odio porro voluptatibus rerum vero nam. Maiores 164 | voluptatem mollitia accusantium placeat, quod quisquam animi nobis 165 | vero et ullam omnis similique corporis quasi quam unde repudiandae 166 | quaerat eligendi suscipit adipisci cum pariatur nemo. Provident ea 167 | iusto et adipisci voluptatibus ratione laboriosam saepe harum ut 168 | molestias nemo aliquid maiores necessitatibus culpa numquam asperiores 169 | dignissimos eos qui perspiciatis beatae possimus, excepturi ipsum 170 | placeat. Facilis, harum. Ullam veritatis rem explicabo nesciunt ea 171 | odit, dicta porro quam consequatur commodi, vel voluptas illo 172 | perferendis autem maiores dolorum quo. Reprehenderit veritatis 173 | recusandae nobis sunt. 174 |

175 |
176 |
177 | 178 | 202 | 203 | 209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /js/mobile-menu.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | const mobileMenu = document.querySelector('.js-menu-container'); 3 | const openMenuBtn = document.querySelector('.js-open-menu'); 4 | const closeMenuBtn = document.querySelector('.js-close-menu'); 5 | 6 | const toggleMenu = () => { 7 | const isMenuOpen = 8 | openMenuBtn.getAttribute('aria-expanded') === 'true' || false; 9 | openMenuBtn.setAttribute('aria-expanded', !isMenuOpen); 10 | mobileMenu.classList.toggle('is-open'); 11 | 12 | const scrollLockMethod = !isMenuOpen 13 | ? 'disableBodyScroll' 14 | : 'enableBodyScroll'; 15 | bodyScrollLock[scrollLockMethod](document.body); 16 | }; 17 | 18 | openMenuBtn.addEventListener('click', toggleMenu); 19 | closeMenuBtn.addEventListener('click', toggleMenu); 20 | 21 | // Close the mobile menu on wider screens if the device orientation changes 22 | window.matchMedia('(min-width: 768px)').addEventListener('change', e => { 23 | if (!e.matches) return; 24 | mobileMenu.classList.remove('is-open'); 25 | openMenuBtn.setAttribute('aria-expanded', false); 26 | bodyScrollLock.enableBodyScroll(document.body); 27 | }); 28 | })(); 29 | --------------------------------------------------------------------------------