Mobile first - hide on scroll menu
How do I make an mobile first - hide on scroll menu?
Mobile first responsive navigation. On scroll the navigation slides up, on up scroll the menu is slides down.. What is a mobile first - hide on scroll menu? How do you make a mobile first - hide on scroll menu? This script and codes were developed by Andi Dysart on 13 July 2022, Wednesday.
Mobile first - hide on scroll menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile first - hide on scroll menu</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Code on github: https://github.com/vnmc/Zee-Menu Credits: Click the burger: http://codepen.io/hynden Toggle Navigation: http://codepen.io/bradfrost
Browsers tested:
Chrome: 29.0 -Full
Firefox: 23.0.1 - Full (Remove border on menu link)
Safari: 6.0.5 -Full
Opera: 12.15 - Full (Remove border on menu link)
ie8 - Nav is fixed, burger menu no animations
IOS - Nav is fixed
-->
<!-- /Menu--> <div id="header-nav"> <div class="container"> <!-- H1 for SEO --> <div class="brand"> <a href="/"><h1>Ghostlab</h1></a> </div> <!-- Small screen menu button --> <a href="#menu" class="menu-link"> <span class="bar1"></span> <span class="bar2"></span> <span class="bar3"></span> </a> <!-- /Small screen menu button --> <!-- Menu Items --> <nav id="menu" role="navigation"> <ul> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <!-- /Menu Items --> </div> </div>
<!-- /Menu -->
<!-- /Nav element -->
<div class="container"> <section> <div class="info"> <h1>Scroll down ma bro</h1> <h3>and then back up...</h3> <span> --- </span> <h4>mobile first navigation</h4>
</div> </section>
<section>
<p> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p> <p> A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
<p> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p> <p> A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
<p> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p> <p> A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
<p> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p> <p> A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
</section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Mobile first - hide on scroll menu - Script Codes CSS Codes
a { text-decoration: none; color: #fff;
}
a:hover { color: #fff;
}
#header-nav { position: fixed; top: 0; display: block; width: 100%; background: black; -webkit-transition: -webkit-transform 0.7s 0.3s ease; -moz-transition: -moz-transform 0.7s 0.3s ease; -ms-transition: -ms-transform 0.7s 0.3s ease; transition: transform 0.7s .3s ease; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0px, 0px, 0px);
}
#header-nav.hide-nav-bar { -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); -webkit-backface-visibility: hidden;
}
a.menu-link { float: right; display: block; padding: 1em;
}
nav[role=navigation] { clear: right; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.js nav[role=navigation] { overflow: hidden; max-height: 0;
}
nav[role=navigation].active { max-height: 15em;
}
nav[role=navigation] ul { margin: 0; padding: 0; float: left; padding: 0.7em 0;
}
nav[role=navigation] li a { display: block; padding: 0.8em; font-size: 0.9em;
}
.menu-link { height: 30px; width: 33px; cursor: pointer;
}
.bar1,
.bar2,
.bar3 { margin-top: 3px; background: #999; width: 33px; height: 4px; position: absolute; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg);
}
.bar2 { margin-top: 13px;
}
.bar3 { margin-top: 23px; -webkit-transform: rotate(180deg); transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg);
}
.brand { float: left; margin-left: 1em; padding: 1em;
}
.brand h1 { margin: 0; font-size: 1.5em;
}
@media screen and (min-width: 48.25em) { a.menu-link { display: none; } .js nav[role=navigation] { max-height: none; } nav[role=navigation] ul { margin: 0 0 0 -0.25em; border: 0; float: right; } nav[role=navigation] li { display: inline-block; margin: 0 0.25em; } nav[role=navigation] li a { border: 0; }
}
.container { max-width: 72em; margin: 0 auto;
}
section { margin-top: 4em; padding: 1em; color: #5c5c5c;
}
section hr { border-bottom: none; color: #f2f2f2;
}
.info { text-align: center;
}
Mobile first - hide on scroll menu - Script Codes JS Codes
$(document).ready(function() {
$('html').on('DOMMouseScroll mousewheel', function (e) { if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY //scroll down console.log('Down'); $( "#header-nav" ).addClass( "hide-nav-bar" ); } else { //scroll up console.log('Up'); $( "#header-nav" ).removeClass( "hide-nav-bar" ); } //prevent page fom scrolling //return false;
});
// On click show menu on small screen $('body').addClass('js'); var $menu = $('#menu'), $menulink = $('.menu-link');
$menulink.click(function() { $menulink.toggleClass('active'); $menu.toggleClass('active'); return false;
});
var toggled = 0;
$('.menu-link').click(function(){ if(toggled == 0){ $('.bar3').stop().transition({rotate: "45", "margin-top": "13px"}); $('.bar2').stop().transition({opacity: "0"}, "fast"); $('.bar1').stop().transition({rotate: "-45", "margin-top": "13px"}); toggled++; console.log("toggled down") } else{ $('.bar3').stop().transition({rotate: "+=135", "margin-top": "3px"}); $('.bar2').transition({opacity: "1"}, "fast"); $('.bar1').stop().transition({rotate: "-=135", "margin-top": "23px"}); toggled--; console.log("Togged Up") }
}); });
Developer | Andi Dysart |
Username | andiio |
Uploaded | July 13, 2022 |
Rating | 4.5 |
Size | 5,301 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Mockup animation for Ghostlab | 5,396 Kb |
Ghostlab Color Palette | 2,968 Kb |
Shopping cart | 6,581 Kb |
Inline keyboard button illustration | 2,229 Kb |
Basic hotel booking form | 5,736 Kb |
Custom fluid tabs with SVG | 3,142 Kb |
Mailchip email signup form | 3,113 Kb |
Hover captions | 4,844 Kb |
Hotel room thumb | 5,295 Kb |
Basic form | 3,006 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Test | Dviate | 2,668 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Adding Items | Valhead | 4,008 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
Incremental game | Eprouver | 5,868 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!