Menu ( ツ )

HTML
<header> <div id="menu"> <span></span> <span></span> <span></span> </div> </header> <div class="window"> <ul class="submenu"> <li class="sub">Menu</li> <li class="sub">Menu</li> <li class="sub">Menu</li> </ul> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum beatae maxime laudantium accusamus omnis quod nesciunt porro dignissimos molestiae repellat, illum incidunt illo nisi explicabo quis suscipit velit unde quo recusandae enim, perspiciatis eveniet labore! Tenetur sint beatae, voluptas eum eaque animi magni! Est doloremque, laboriosam quasi explicabo enim esse facilis, iste voluptatibus sit voluptatum, reiciendis odit dolores! Ex quas eos natus cum aspernatur harum cupiditate aperiam totam saepe, voluptas suscipit praesentium, ipsam nulla et amet similique maiores nisi odit facere tempore tenetur accusamus! Placeat pariatur dolores eveniet, saepe consequatur, unde, laborum culpa adipisci tenetur nam in fugiat commodi modi ipsam a. Tempora blanditiis pariatur tenetur illum! Veniam odio temporibus qui maxime incidunt! Perferendis hic numquam repellendus doloribus magnam ea debitis iure est, cum optio ullam architecto culpa, assumenda earum a repudiandae molestiae ipsam consectetur magni neque eius blanditiis. Obcaecati soluta at, repudiandae sit. Expedita beatae nam quam aliquam, alias facilis iste atque asperiores, autem ullam veniam quidem adipisci vitae. Accusamus, aperiam officia eaque inventore quas perferendis, id quidem sunt distinctio nemo delectus, magni esse quis asperiores, maxime tempora ullam deleniti itaque unde. Quis facilis, consequatur vel temporibus, officia, tempora optio nesciunt officiis consectetur, ut recusandae ea. Quaerat, reiciendis qui facilis a commodi sint voluptatum expedita dolores doloribus debitis, veritatis mollitia facere deleniti sed officia quam vel quas! Minima deserunt nisi facere cupiditate, illo odit hic aut omnis vitae sapiente. Excepturi cupiditate sapiente accusamus dolorem ipsam sed quisquam iste, et fugit ab. Voluptas non, quam. Iusto iste earum reprehenderit dicta voluptatibus rem magnam, sint maiores adipisci dolor ipsum accusamus possimus at illum libero nemo sit? Non iusto magnam itaque possimus officia dolorem totam illum fugiat quis doloremque id a at in autem architecto earum porro velit sed, facere quaerat est! Fuga inventore delectus natus, quas, aut repellat, cumque labore odio error dolores tempore accusantium rem saepe praesentium. Obcaecati rerum eveniet iure sequi consequatur cumque quas, nam temporibus aliquid maiores non accusantium error excepturi pariatur quos. Rem eos ratione quibusdam suscipit, exercitationem. Cum, error, neque. Sequi perspiciatis consequuntur debitis eos impedit doloremque aperiam architecto perferendis esse, voluptate facere accusamus quis reiciendis error quae ex. Alias dolores, nostrum ipsa provident pariatur hic! Odio cupiditate, ducimus assumenda, culpa ipsa iure. Voluptatibus atque iure, libero natus asperiores suscipit tempore mollitia quo possimus deserunt aliquam autem ullam accusamus pariatur. Et praesentium officiis quia perferendis, mollitia modi at consequuntur similique quas tenetur repudiandae, doloremque quis rem iste distinctio sunt ullam voluptatibus excepturi ut facere quo sed! Ipsam dolor optio eveniet voluptas, iusto hic totam, aut eos eius est, praesentium quidem incidunt blanditiis? Fugiat possimus reprehenderit accusamus, laudantium optio dolorum corporis sint aspernatur dicta, ratione quidem minus iusto placeat nihil repellendus laboriosam similique, tempore! Quisquam doloribus aspernatur molestiae temporibus consequatur eos. Pariatur nobis, labore itaque aperiam incidunt vel dolor quae voluptatibus odit, minus tenetur eveniet adipisci aspernatur saepe earum, consequuntur molestias cum, voluptatum quo dignissimos similique nesciunt! Sequi pariatur harum aliquam odio, dignissimos a. Velit, eveniet voluptatum enim expedita maxime nam repellendus. Perspiciatis, aliquam saepe accusantium omnis! Facere aperiam possimus veritatis necessitatibus dicta autem beatae ratione pariatur ipsam blanditiis ab, corporis perspiciatis aliquam sit quas molestiae quae, et soluta cumque fuga rerum incidunt dignissimos eaque. Nulla amet iure debitis illum quo. Eveniet quos, ullam, voluptas adipisci ipsa odit iste explicabo voluptatibus quaerat obcaecati, inventore! Voluptatum esse officiis illo tempora eligendi, consectetur alias veniam et totam recusandae ipsam qui eaque, voluptatem, aspernatur in? Iure debitis illum ipsam odio delectus, eveniet. Placeat nam perferendis eius fugit doloremque, eligendi nesciunt optio provident iste laborum tenetur hic, consequatur accusantium sapiente quos neque, eaque repudiandae. Harum quos vero quia dolor fugiat ipsa accusamus iure nemo quae, iste quasi suscipit sed ullam exercitationem facilis, perferendis assumenda iusto, fuga eum? Laborum nemo dignissimos libero laudantium iusto consequatur voluptatem est iste maiores sunt voluptates asperiores non quibusdam, quis deleniti neque exercitationem quasi ad quisquam distinctio deserunt ipsam magnam explicabo omnis! Possimus atque sapiente deserunt unde pariatur molestias. Cupiditate error quidem totam magni nulla cumque, placeat aut corporis, asperiores eius, similique! Velit molestiae iusto quod officiis magni, eveniet, culpa illum ratione dicta modi rem perspiciatis, laborum beatae architecto, consectetur unde. Quasi ab rem quaerat maxime ullam eos ut error. Vero a veniam pariatur. Officiis enim odit deleniti aperiam libero repudiandae tenetur soluta sunt ipsum, sit hic atque inventore laudantium repellendus rem debitis? Autem quas, illo consequuntur tempore reprehenderit. Illum perferendis, quam pariatur harum impedit eligendi veritatis perspiciatis officiis mollitia nesciunt eos, consequuntur ducimus a debitis voluptatum sunt, tempore reprehenderit hic nulla autem minima esse eaque! Expedita sunt dicta, dolorum pariatur quo optio iusto reiciendis voluptate porro dolorem praesentium cumque quisquam explicabo necessitatibus debitis sapiente fugit provident. Dolores rem neque error eum enim deserunt voluptate id corrupti voluptatum corporis sint totam cupiditate, explicabo, a magni dignissimos. Maxime quaerat suscipit nulla ipsum dicta aliquid et tempora mollitia aspernatur quis culpa voluptates deserunt eum possimus ad voluptate id dolorem ratione ex vero reiciendis tempore quam quos, itaque facere? Inventore nam praesentium doloremque reiciendis eligendi beatae neque illo, eos nihil nemo officiis quis fugit molestiae quia distinctio consectetur debitis tenetur excepturi voluptatibus animi ad maxime perspiciatis impedit. Quasi neque aspernatur fugit dolorem ad aliquid quis iure deleniti, omnis repellendus facere ipsum totam maiores, eligendi, deserunt illo vel fugiat assumenda reiciendis iusto vero necessitatibus. Sapiente ab, quo rem cupiditate iste sit, ducimus obcaecati nihil expedita voluptates maiores, dicta quidem voluptatem sequi accusamus. Deleniti illo, et pariatur, similique odit cum! Et voluptatum amet architecto cupiditate pariatur est vel maxime, error laudantium non perferendis natus saepe, consequatur quos similique molestias commodi modi distinctio, quaerat. Eos odio ipsa quia velit nulla, suscipit, similique deserunt quisquam soluta eum quibusdam culpa saepe et! Quia repellendus fugit facere, fuga eveniet suscipit nisi at aut, repudiandae nemo culpa aperiam odit natus perferendis voluptatem? Quae pariatur mollitia repellat sapiente iusto, eos sed, accusantium laborum veritatis. Tempore commodi dolorum numquam amet, ipsa fuga laboriosam officia, aspernatur quos alias similique cumque adipisci assumenda? Quibusdam nobis excepturi laboriosam, modi praesentium earum, sed iste blanditiis molestiae velit non eaque ipsam recusandae nam voluptates!</p>
CSS
* { margin: 0; padding: 0; } body { background: #2196F3; } header { position: fixed; background: #fff; top: 0; width: 100%; min-height: 60px; z-index: 2; } #menu { position: absolute; top: 50%; margin-top: -14px; margin-left: 15px; cursor: pointer; } span { display: block; width: 30px; height: 4px; background: #2196F3; border-radius: 2px; margin: 4px; transition: 1s; } .rotate:nth-child(1) {transform: rotate(45deg);transform-origin: 4px;} .rotate:nth-child(2) {transform: translateX(-50px);opacity: 0;} .rotate:nth-child(3) {transform: rotate(-45deg);transform-origin: 4px;} .window { position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.7); transition: 1s; overflow: hidden; transform: translateY(-100%); z-index: 1; } .submenu { position: relative; text-align: center; font-family: Arial; font-size: 40px; top: 30%; transition: 1s; cursor: pointer; } .sub { display: block; color: #fff; width: auto; height: auto; padding: 20px; cursor: pointer; transition: .5s; } .sub:hover { background: #2196F3; color: #fff; } .active { transform: translateY(0); } p { position: absolute; font-family: Arial; font-size: 20px; color: #fff; width: 70%; margin: 80px 15%; }
JAVASCRIPT
$(document).ready(function() { $("#menu").on('click', function() { $(".window").toggleClass('active'); $("span").toggleClass('rotate'); }); })
Expand for more options Login