Slide out navigation

Developer
Size
2,674 Kb
Views
12,144

How do I make an slide out navigation?

What is a slide out navigation? How do you make a slide out navigation? This script and codes were developed by Mihkel on 08 December 2022, Thursday.

Slide out navigation Previews

Slide out navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide out navigation</title> <meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <span class="hamburger">&#x2261;</span> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Stuff</a></li> </ul>
</nav>
<div class="container"> <div class="col-1-1"> <h2>Some title..</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae accusamus incidunt illum adipisci obcaecati dolores quae vel tenetur voluptatum sit non veniam est, reiciendis, consectetur commodi in, pariatur neque soluta eligendi ut dignissimos nihil quas. Totam tempore corporis quas recusandae aut fugiat, atque minus, at est distinctio mollitia consequatur molestiae voluptatum rem reprehenderit expedita quasi qui nihil quae odio facere quidem adipisci. Temporibus adipisci commodi, quisquam illo assumenda sequi nulla. Soluta tempora quam asperiores tempore cum rem, ad aspernatur consequuntur temporibus voluptatem voluptates, error eaque porro, provident nihil facere numquam. Rerum quod corrupti, dolorum nostrum nesciunt fugiat delectus cum deleniti!</p> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Slide out navigation - Script Codes CSS Codes

body {	background-color: #fafafa;	font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;	height: 1400px;
}
nav {	position: fixed;	top: 0;	left: 0;	bottom: 0;	width: 160px;	transform: translateX(-160px);	transition: transform 0.5s;	z-index: 1;	background-color: #333;
}
nav.toggled {	transform: translateX(0);
}
nav.toggled .hamburger {	transform: rotate(-90deg);
}
nav.toggled + .container {	transform: translateX(145px);
}
ul {	padding: 0;	margin: 0;	list-style: none;
}
a {	display: block;	padding: 8px 20px;	font-size: 18px;	text-decoration: none;	text-align: center;	color: rgba(255,255,255,0.7);
}
a:hover {	color: rgba(255,255,255,1);
}
.hamburger {	position: fixed;	left: 165px;	margin-top: 8px;	transition: transform 0.5s;	font-size: 26px;	cursor: pointer;	color: rgba(0,0,0,0.7);
}
.hamburger:hover {	color: rgba(0,0,0,1);
}
/* ===== BONUS ===== */
*:after,
*:before,
* {	box-sizing: border-box;
}
.container {	width: 960px;	margin: 10% auto 0 auto;	padding-right: 15px;	padding-left: 15px;	transition: transform 0.5s;	z-index: 0;
}
.col-1-1 {	width: 100%;
}
@media all and (max-width: 960px) {	.container {	width: auto;	}
}

Slide out navigation - Script Codes JS Codes

var nav = document.querySelector("nav");
var hamburger = document.querySelector(".hamburger");
function toggle() { nav.classList.toggle("toggled");
}
hamburger.addEventListener("click", toggle);
Slide out navigation - Script Codes
Slide out navigation - Script Codes
Home Page Home
Developer Mihkel
Username Krokodill
Uploaded December 08, 2022
Rating 3
Size 2,674 Kb
Views 12,144
Do you need developer help for Slide out navigation?

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!

Mihkel (Krokodill) Script Codes
Create amazing art & images 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!