Mobile Nav Menu
How do I make an mobile nav menu?
Mobile nav in which body content stays in place while menu is open. This code gets rid of the toolbar bug on iOS and allows flawless scrolling on iOS and Android.. What is a mobile nav menu? How do you make a mobile nav menu? This script and codes were developed by Ali Klein on 11 July 2022, Monday.
Mobile Nav Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Nav Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class ="menu"> <nav class="nav"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> <div>Eight</div> <div>Nine</div> <div>Ten</div> <div>Eleven</div> <div>Twelve</div> <div>Thirteen</div> <div>Fourteen</div> <div>Fifteen</div> <div>Sixteen</div> <div>Seventeen</div> </nav>
</div>
<div class ="main"> <div class="main-header"> <div class="header-bar"> <a class="open-menu"> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </a> </div> </div> <p> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. </p> <p> Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. </p> <p> Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jacama salsify. </p> <p> Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p> <p> Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jÃcama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p> <p> Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula. Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage. Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut. Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic. Jacama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts. Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato. </p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Mobile Nav Menu - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body { font-family: 'Noto Sans', sans-serif; background-color: #5badd7; color: white; position: static; top: 0; right: 0; left: 0; margin: 0; min-height: 100%; overflow-y: scroll;
}
body.open { position: fixed;
}
body .menu { background-color: #185f7c; -webkit-overflow-scrolling: touch; overflow-y: scroll; position: fixed; top: 0; right: 0; left: 0; transition: height 300ms ease-in-out; z-index: 19999; height: 0; width: 100%;
}
body .menu.open { height: 100%;
}
body .menu nav { margin-top: 128px; margin-bottom: 65px; color: #fff; text-align: center; z-index: 9999;
}
body .menu nav div { padding: 25px 0; font-size: 20px; text-transform: uppercase;
}
body .main { position: relative; padding: 65px 0 40px; backface-visibility: hidden; overflow: hidden; transition: all 0.15s ease-out; width: 100%;
}
body .main .main-header { position: fixed; width: 100%; left: 0; top: 0; z-index: 100000; transition: all 0.15s ease-out;
}
body .main .main-header .header-bar { background-color: #143D52; min-width: 300px; overflow: hidden; position: relative; height: 65px; width: 100%; z-index: 20000;
}
body .main .main-header .header-bar a.open-menu { text-align: center; position: absolute; top: 0; left: 0; height: 100%; width: 58px;
}
body .main .main-header .header-bar a.open-menu .hamburger { cursor: pointer; display: block; margin: -8px auto 0; position: relative; top: 50%; height: 16px; width: 24px;
}
body .main .main-header .header-bar a.open-menu .hamburger span { display: block; position: absolute; height: 2px; width: 100%; background-color: #fff; opacity: 1; left: 0;
}
body .main .main-header .header-bar a.open-menu .hamburger span:first-child { top: 0;
}
body .main .main-header .header-bar a.open-menu .hamburger span:nth-child(2) { top: 7px;
}
body .main .main-header .header-bar a.open-menu .hamburger span:nth-child(3) { top: 14px;
}
body .main p { font-size: 22px; padding: 0 20px;
}
Mobile Nav Menu - Script Codes JS Codes
//Live example: http://www.siren-design.com/mobileNav/
$('a.open-menu').click(function(e) { var body = $('body'), menu = $('.menu'), isOpen = body.hasClass('open'), scrollValue = isOpen ? -parseInt(body[0].style.top) : body.scrollTop(); menu.toggleClass('open', !isOpen); // adds 'height: 100%' body.toggleClass('open', !isOpen); // adds 'position: fixed' if(!isOpen) { body.css('top', -scrollValue); menu.scrollTop(0); } else { body.scrollTop(scrollValue); }
});
Developer | Ali Klein |
Username | AliKlein |
Uploaded | July 11, 2022 |
Rating | 3 |
Size | 4,745 Kb |
Views | 40,480 |
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 |
Vertical Scrolling Pagination | 2,980 Kb |
Parallax Background Scroll | 3,150 Kb |
Animated Hillary Clinton Donald Trump Logos SVG | 4,004 Kb |
Paper.js Play | 5,239 Kb |
VW Logo | 2,212 Kb |
Buzzy Pen | 5,034 Kb |
Three.js cube | 1,997 Kb |
Horizontal Scroll Progress Bar | 2,705 Kb |
Momentum Scrolling | 2,614 Kb |
Youtube API Multiple Videos | 2,326 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 |
A Pen by panstable | Panstable | 2,940 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Toolbar | Onsen | 5,414 Kb |
Geildanke typography | Fischaela | 3,249 Kb |
Objects | Bonzaipenguin | 2,616 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Parallax.js | Zmeeey5 | 2,330 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!