Mobile Navigation Concept

Developer
Blake Tarter
Size
2,892 Kb
Views
24,288
  1. Mobile Navigation Concept Previews
  2. Mobile Navigation Concept HTML Codes
  3. Mobile Navigation Concept CSS Codes
  4. Mobile Navigation Concept JS Codes

How do I make an mobile navigation concept?

What is a mobile navigation concept? How do you make a mobile navigation concept? This script and codes were developed by Blake Tarter on 26 September 2022, Monday.

Mobile Navigation Concept Previews
IQ Test

Mobile Navigation Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Navigation Concept</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="drawer hidden">	<ul class="list">	<li class="current">Dashboard</li>	<li><input type="search" placeholder="Search"></input></li>	<li>Calendar</li>	<li>Find</li>	<li>More</li>	</ul>
</div>
<div class="click-off hidden">
</div>
<div class="container">	<div class="search-drop hidden">	<input type="search" placeholder="Search"></input>	<button class="submit">Search</button>	</div>	<div class="navbar fixed">	<div class="toggle">	<span class="icon">| | |</span>	</div>	<h1 class="logotype">Blake Tarter</h1>	<div class="search">	<span class="icon">o</span>	</div>	</div>	<div class="content-area" style="padding-top: 50px;">	<div style=" background-color: #b22222; height: 50px; width: 50px; margin: 20px;"></div>	</div>
</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 Navigation Concept - Script Codes CSS Codes

*{	box-sizing: border-box;	margin: 0;	padding: 0;	}	html {	overflow: hidden;	}	body {	font-family: Helvetica, Arial, Sans-serif;	overflow-x: hidden;	}	.hidden {	display: none;	}	.container {	height: 100vh;	width: 100vw;	}	.fixed {	position: absolute;	top: 0;	}	.navbar {	width: 100%;	height: 50px;	background-color: #b22222;	color: #ffffff;	line-height: 50px;	-webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.50);	-moz-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.50);	box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.50);	}	.toggle {	float: left;	height: 50px;	width: 50px;	text-align: center;	-webkit-transform: rotate(90deg);	transform: rotate(90deg);	border-top: 1px solid #961C1C;	}	.toggle > .icon {	font-weight: 800;	color: #ffffff	}	.search {	margin-top: -50px;	float: right;	height: 50px;	width: 50px;	text-align: center;	border-left: 1px solid #961C1C;	}	.search > .icon {	font-weight: 800;	color: #ffffff	}	.logotype {	width: 100%;	margin-left: -50px;	text-align: center;	font-weight: 300;	font-size: 1.5em;	}	.click-off {	margin-top: 50px;	height: 100vh;	width: 250px;	float: right;	position: absolute;	top: 0;	margin-left: 250px;	}	.drawer {	float: left;	width: 250px;	height: 100vh;	background-color: #333;	color: #aaaaaa;	margin-left: -250px;	padding-top: 50px;	-webkit-box-shadow: 2px 0px 5px 0px rgba(50, 50, 50, 0.75);	-moz-box-shadow: 2px 0px 5px 0px rgba(50, 50, 50, 0.75);	box-shadow: 2px 0px 5px 0px rgba(50, 50, 50, 0.75);	border-right: 5px solid #222;	}	.list {	list-style: none;	}	.list > li {	padding: 15px;	padding-left: 40px;	border-bottom: 1px solid #3d3d3d;	}	.list > li:nth-child(2) {	padding-top: 0;	padding-bottom: 0;	}	.list > li > input {	border: none;	background-color: transparent;	color: #aaa;	font-size: 1em;	height: 50px;	}	.current {	background-color: #2e2e2e;	}	.search-drop {	position: absolute;	top: -500px;	width: 100vw;	height: 500px;	background-color: #333333;	color: #aaaaaa;	border-bottom: 5px solid #222;	-webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	-moz-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	}	.search-drop > input {	border: none;	background-color: transparent;	color: #aaa;	font-size: 1em;	height: 50px;	width: 60%;	margin: 100px 20%;	border-bottom: 1px solid #aaa;	}	.search-drop > button {	border: 1px solid darkgreen;	background-color: green;	color: white;	width: 60%;	margin: 0 20%;	position: absolute;	bottom: 25px;	height: 50px;	font-size: 1.2em;	}

Mobile Navigation Concept - Script Codes JS Codes

$(document).ready(function(){	$('.toggle').click(function(){	if ($('.drawer').hasClass('active')) {	$('.drawer').animate({	marginLeft: '-250'},	500, function() {	$('.drawer').toggleClass('hidden');	}	);	} else {	$('.drawer').animate({	marginLeft: '0'},	500	);	$('.drawer').toggleClass('hidden');	}	if ($('.search-drop').hasClass('active')) {	$('.search-drop').animate({	top: '-500'},	500, function() {	$('.search-drop').toggleClass('hidden');	}	);	$('.search-drop').toggleClass('active');	}	$('.drawer').toggleClass('active');	$('.click-off').toggleClass('hidden');	});	$('.search').click(function(){	if ($('.drawer').hasClass('active')) {	$('.drawer').animate({	marginLeft: '-250'},	500, function() {	$('.drawer').toggleClass('hidden');	}	);	$('.drawer').toggleClass('active');	$('.click-off').toggleClass('hidden');	}	if ($('.search-drop').hasClass('active')) {	$('.search-drop').animate({	top: '-500'},	500, function() {	$('.search-drop').toggleClass('hidden');	}	);	} else {	$('.search-drop').animate({	top: '0'},	500	);	$('.search-drop').toggleClass('hidden');	}	$('.search-drop').toggleClass('active');	});	$('.submit').click(function(){	if ($('.search-drop').hasClass('active')) {	$('.search-drop').animate({	top: '-500'},	500, function() {	$('.search-drop').toggleClass('hidden');	}	);	$('.search-drop').toggleClass('active');	}	});	$('.click-off').click(function(){	$('.drawer').animate({	marginLeft: '-250'},	500	);	$('.drawer').toggleClass('active');	$('.click-off').toggleClass('hidden');	});	});
Mobile Navigation Concept - Script Codes
Mobile Navigation Concept - Script Codes
Home Page Home
Developer Blake Tarter
Username blaketarter
Uploaded September 26, 2022
Rating 3
Size 2,892 Kb
Views 24,288
Do you need developer help for Mobile Navigation Concept?

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!

Blake Tarter (blaketarter) Script Codes
Name
Animated Input Labels
Some Button Styles
Material Design Inspired Button
Transforming Navbar
Falling Gems WebGL Demo
Ubuntu Login Screen
Credit Card Validation
Morse Code Generator
Fun With ScrollMagic
Material Design Hiding Navbar
Create amazing captions with AI!

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!