Created
September 25, 2020 08:52
-
-
Save HoangLong22/b9fb2e8b0f49ab2ea496826352a9ce64 to your computer and use it in GitHub Desktop.
Flashy Slidy Mobile Nav
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> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:300|PT+Sans:700" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="mobile-nav-button"> | |
| <div class="mobile-nav-button__line"></div> | |
| <div class="mobile-nav-button__line"></div> | |
| <div class="mobile-nav-button__line"></div> | |
| </div> | |
| <nav class="mobile-menu"> | |
| <ul> | |
| <li><a>Home</a></li> | |
| <li><a>About</a></li> | |
| <li><a>Blog</a></li> | |
| <li><a>Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="text"> | |
| <h1>Flashy Slidy Mobile Menu</h1> | |
| <p>Nothing but a simple navigation menu with a sweet little slide in effect, and some cheeky little hover effects done with some tactically placed pseudo elements.</p> | |
| </section> | |
| </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
| $(document).ready(function () { | |
| //Menu button on click event | |
| $('.mobile-nav-button').on('click', function() { | |
| // Toggles a class on the menu button to transform the burger menu into a cross | |
| $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)" ).toggleClass( "mobile-nav-button__line--1"); | |
| $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(2)" ).toggleClass( "mobile-nav-button__line--2"); | |
| $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(3)" ).toggleClass( "mobile-nav-button__line--3"); | |
| // Toggles a class that slides the menu into view on the screen | |
| $('.mobile-menu').toggleClass('mobile-menu--open'); | |
| return false; | |
| }); | |
| }); |
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.1.0/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
| //Colours | |
| $black: #0e0e0e; | |
| $orange: #fcb852; | |
| $grey: #dedede; | |
| $white: #fff; | |
| //Fonts | |
| $heading: 'PT Sans', sans-serif; | |
| $maintext: 'Open Sans', sans-serif; | |
| // General Pen Styles | |
| body { | |
| width:100%; | |
| overflow:hidden; | |
| background: $grey; | |
| } | |
| a { | |
| font-family:$heading; | |
| } | |
| h1 { | |
| font-family:$heading; | |
| font-size:3rem; | |
| } | |
| p { | |
| font-family:$maintext; | |
| font-size:1.5rem; | |
| } | |
| .text { | |
| max-width:800px; | |
| margin:0 auto; | |
| display:block; | |
| text-align:center; | |
| } | |
| // FLASHY SLIPPY NAV STYLES | |
| .mobile-nav-button { | |
| width:35px; | |
| position:absolute; | |
| margin:2rem; | |
| right:0; | |
| top:0; | |
| z-index:9999; | |
| cursor:pointer; | |
| width:35px; | |
| height:30px; | |
| .mobile-nav-button__line { | |
| width:100%; | |
| height:4px; | |
| background:$black; | |
| position:relative; | |
| transition:1s ease; | |
| &:nth-of-type(2) { | |
| margin:0.5rem 0; | |
| } | |
| } | |
| .mobile-nav-button__line--1 { | |
| transform: rotate(45deg); | |
| top: 13px; | |
| position: absolute; | |
| } | |
| .mobile-nav-button__line--2 { | |
| display: none; | |
| } | |
| .mobile-nav-button__line--3 { | |
| transform: rotate(135deg); | |
| top: 13px; | |
| position: absolute; | |
| } | |
| } | |
| //Mobile Menu | |
| .mobile-menu { | |
| display:block; | |
| max-width:500px; | |
| width:100%; | |
| right:-100%; | |
| height: 100vh; | |
| background: $orange; | |
| position:absolute; | |
| z-index:9998; | |
| transition: 0.6s ease; | |
| top:0; | |
| opacity:0; | |
| ul { | |
| position: relative; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| padding:0; | |
| li { | |
| list-style: none; | |
| a { | |
| width:100%; | |
| max-width:1200px; | |
| margin:0 auto; | |
| display:block; | |
| text-align: center; | |
| text-decoration:none; | |
| color:$black; | |
| font-size: 3rem; | |
| font-weight: bold; | |
| overflow:hidden; | |
| position:relative; | |
| &:after { | |
| content:''; | |
| background:$black; | |
| width:100%; | |
| height:100%; | |
| position:absolute; | |
| right:-100%; | |
| top:0; | |
| z-index:-1; | |
| transition:0.4s ease; | |
| } | |
| &:hover { | |
| &:after { | |
| right:0; | |
| } | |
| color:$white; | |
| } | |
| } | |
| } | |
| } | |
| img { | |
| position: absolute; | |
| width: 150px; | |
| display: block; | |
| left: 50%; | |
| top: 3rem; | |
| transform: translatex(-50%); | |
| padding: 0; | |
| text-align: center; | |
| } | |
| } | |
| .mobile-menu--open { | |
| right:0; | |
| opacity:1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment