A Pen by Matthew Daniel Brown on CodePen.
Created
June 23, 2019 21:15
-
-
Save matt-daniel-brown/75d1402f1d1040aecc6494bba5faad62 to your computer and use it in GitHub Desktop.
Responsive Navigation Bar Using Material Design Icons
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
| <nav role="navigation"> | |
| <button role="button"> | |
| <i class="icon material-icons">menu</i> | |
| <i class="icon material-icons hidden">close</i> | |
| </button> | |
| <ul> | |
| <li><a href="#" class="active">Active</a></li> | |
| <li><a href="#">Link</a></li> | |
| <li><a href="#">Link</a></li> | |
| </ul> | |
| </nav> | |
| <main role="main"> | |
| <header role="banner"> | |
| <h1>Responsive Navigation Bar</h1> | |
| <h3>Using Material Design Icons</h3> | |
| </header> | |
| <section> | |
| <h4>Section Title</h4> | |
| <p>Lorem ipsum dolor sit amet consectetur | |
| adipisicing elit. Nostrum earum magnam | |
| inventore quae nulla, modi mollitia ad non | |
| perspiciatis! Ex soluta error, | |
| aspernatur voluptatem id libero. | |
| Inventore obcaecati beatae accusantium?</p> | |
| </section> | |
| </main> |
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
| $(document).ready(function() { | |
| const navTriggerIcons = $("nav .icon"); | |
| const navTrigger = $("nav>button"); | |
| const linkList = $("nav>ul"); | |
| const navLinks = $("nav a"); | |
| const mainEl = $("main"); | |
| function simulateClickToHideCollapsedList() { | |
| if(mainEl.hasClass('collapsed-nav-visible')) { | |
| mainEl.removeClass('collapsed-nav-visible'); | |
| navTriggerIcons.toggleClass('hidden'); | |
| linkList.hide(); | |
| // navLinks.slideUp(); | |
| } | |
| } | |
| function navTriggerToggleSecond() { | |
| console.log("done"); | |
| } | |
| function navTriggerToggleFirst() { | |
| // console.log("disabled"); | |
| navTriggerIcons.toggleClass("hidden").then( | |
| mainEl.toggleClass("collapsed-nav-visible"), | |
| linkList.fadeToggle('fast').then(navLinks.slideDown('slow')) | |
| ); | |
| // navLinks.toggleClass('.hide-for-collapse'); | |
| // return callback(); | |
| } | |
| navTrigger.click(function() { navTriggerToggleFirst(); }); | |
| $(window).resize(function() { | |
| if ($(window).width() > 540) { | |
| simulateClickToHideCollapsedList(); | |
| } else { | |
| } | |
| }); | |
| }); |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
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
| @import "bourbon@5.*"; | |
| @import "breakpoint"; | |
| $bp-nav: 540px; | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, | |
| *:before, | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, | |
| Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| text-rendering: optimizeLegibility !important; | |
| -webkit-font-smoothing: antialiased !important; | |
| -moz-osx-font-smoothing: grayscale !important; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| min-height: 100vh; | |
| width: 100%; | |
| min-width: 100vw; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| position: relative; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 768px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| /* padding: 2em 0; */ | |
| } | |
| body { | |
| line-height: 1.5; | |
| } | |
| p { | |
| line-height: 1.5; | |
| font-weight: 500; | |
| } | |
| main { | |
| // position: relative;‡ | |
| @extend .container; | |
| transition: transform 150ms; | |
| // transition: padding 450ms; | |
| transform: translate3d(0, 0, 0); | |
| &.collapsed-nav-visible { | |
| // padding-top: 8em !important; | |
| // padding-top: 7em !important; | |
| transform: translate3d(0, 8em, 0); | |
| } | |
| } | |
| nav { | |
| position: relative; | |
| margin: 0; | |
| // padding: 0 1em; | |
| width: 100%; | |
| background: #ccc; | |
| height: 3em; | |
| width: 100%; | |
| text-align: right; | |
| ul { | |
| z-index: 1000; | |
| list-style: none !important; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: flex-end; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| @include breakpoint(0px $bp-nav) { | |
| display: none; | |
| background: whitesmoke; | |
| } | |
| @include breakpoint(541px) { | |
| display: block !important; | |
| background: transparent; | |
| } | |
| li { | |
| display: block; | |
| height: 100% !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| list-style: none !important; | |
| // background: white; | |
| vertical-align: middle; | |
| @include breakpoint(541px) { | |
| display: inline-block; | |
| } | |
| a { | |
| visibility: visible; | |
| font-weight: 600; | |
| color: mediumslateblue; | |
| text-decoration: none !important; | |
| text-transform: capitalize; | |
| padding: 0 1em !important; | |
| margin: 0 auto !important; | |
| vertical-align: middle; | |
| text-align: center; | |
| font-size: 16px; | |
| line-height: 2.75; | |
| // line-height: 2.8; | |
| vertical-align: middle; | |
| padding-top: 2px !important; | |
| display: block; | |
| background: white; | |
| height: 100% !important; | |
| transition: all 150ms; | |
| @include breakpoint(541px) { | |
| background: transparent; | |
| } | |
| &.active { | |
| background: mediumslateblue; | |
| color: white; | |
| } | |
| &:not(.active) { | |
| &:hover { | |
| background: tint(mediumslateblue, 75%) !important; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .material-icons { | |
| font-size: 32px; | |
| } | |
| button { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| height: 48px !important; | |
| width: 48px !important; | |
| appearance: none !important; | |
| border: none !important; | |
| background: transparent !important; | |
| background: #555; | |
| text-align: center; | |
| cursor: pointer; | |
| transform: scale3d(1, 1, 1); | |
| transition: 150ms all; | |
| // transition: 450ms all; | |
| &:active { | |
| opacity: 0.25; | |
| transform: scale3d(0.75, 0.75, 1); | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .icon { | |
| padding: 0 !important; | |
| margin: auto !important; | |
| text-align: center; | |
| vertical-align: middle; | |
| * { | |
| padding: 0 !important; | |
| margin: 0 auto !important; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| } | |
| @include breakpoint($bp-nav) { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| a { | |
| transition: all 150ms !important; | |
| // transition: all 450ms !important; | |
| } | |
| a.hide-for-collapse { | |
| visibility: hidden; | |
| } | |
| nav { | |
| button { | |
| &:hover { | |
| opacity: 0.5 !important; | |
| .icon { | |
| opacity: 0.5 !important; | |
| } | |
| } | |
| } | |
| } | |
| .autoCollapseNavbar { | |
| } |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.5.0/modern-normalize.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment