Left Side Slide Out Push Nav

Developer
Tom
Size
3,009 Kb
Views
14,168
  1. Left Side Slide Out Push Nav Previews
  2. Left Side Slide Out Push Nav HTML Codes
  3. Left Side Slide Out Push Nav CSS Codes
  4. Left Side Slide Out Push Nav JS Codes

How do I make an left side slide out push nav?

Left Side slide out nav, that pushes the content area - which scales to size. What is a left side slide out push nav? How do you make a left side slide out push nav? This script and codes were developed by Tom on 19 November 2022, Saturday.

Left Side Slide Out Push Nav Previews
IQ Test

Left Side Slide Out Push Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Left Side Slide Out Push Nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <menu id="menu"> <a class="nav-show" rel="nav-show"><i class="fa fa-navicon"></i></a>
</menu>
<nav id="nav">
</nav>
<section id="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus</p> <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus</p> <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus</p> <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Left Side Slide Out Push Nav - Script Codes CSS Codes

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
* { margin:0; padding:0; position:relevant; font-size:13px; box-sizing:border-box;
}
p { margin-bottom:1em; font-size:1.213em; word-wrap: break-word; white-space:pre-wrap;
}
#menu { background:#607D8B; padding:20px; font-size:2em; line-height:100%; z-index:1; width:100%;
}
.nav-show { font-size:1em; color:#fff; cursor:pointer; z-index:3000; position:relative;
}
#nav { display:block; width:20%; background:#263238; height:100%; position:fixed; top:0px; left:-20%; z-index:9;'
}
#nav ul { margin-top:13vh; width:100%; list-style:none;
}
#nav ul li { display:block; border-top:1px solid #e0e0e0;
}
#nav ul li a { display:block; width:100%; padding:20px 20px 20px 20px; font-size:1.6em; color:#fff; font-weight:700; line-height:100%;
}
#content { width:100%; background:#CFD8DC; height:100%; z-index:8; padding:20px;
}

Left Side Slide Out Push Nav - Script Codes JS Codes

var navOpen = false;
var nav = $('#nav');
var content = $('#content');
$('a.nav-show').on('click', function(e) { e.preventDefault(); if(navOpen === false) { $(this).find('i.fa').removeClass('fa-navicon').addClass('fa-times'); nav.animate({'left':'0'},500); content.animate({'width':'80%','marginLeft':'20%'},500); navOpen = true; } else { $(this).find('i.fa').removeClass('fa-times').addClass('fa-navicon'); navOpen = false; nav.animate({'left':'-20%'},500); content.animate({'width':'100%','marginLeft':'0%'},500); }
}) (jQuery);
Left Side Slide Out Push Nav - Script Codes
Left Side Slide Out Push Nav - Script Codes
Home Page Home
Developer Tom
Username TomJ1588
Uploaded November 19, 2022
Rating 3
Size 3,009 Kb
Views 14,168
Do you need developer help for Left Side Slide Out Push Nav?

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!

Tom (TomJ1588) Script Codes
Name
CSS Only Line Animated Modal
Pure CSS Only Snackbar
ESPN Style Navigation
UI Test 2
Luke ROTJ Lightsaber
Editor Test
A Pen by Tom
Pure CSS Animated Modals
Swing In Social Links
Create amazing blog posts 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!