Slide Out Menu

Developer
Michael Chernin
Size
2,584 Kb
Views
6,072
  1. Slide Out Menu Previews
  2. Slide Out Menu HTML Codes
  3. Slide Out Menu CSS Codes
  4. Slide Out Menu JS Codes

How do I make an slide out menu?

What is a slide out menu? How do you make a slide out menu? This script and codes were developed by Michael Chernin on 19 January 2023, Thursday.

Slide Out Menu Previews
IQ Test

Slide Out Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide Out Menu</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <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> <header> <h1 class="site-title">Site Name</h1> <i class="fa fa-bars nav-toggle"></i> <nav class="main-navigation"> <span class="nav-toggle">Close</span> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>
</header>
<main> <h2>Hello</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, nobis quaerat. In temporibus, obcaecati fugiat vitae. Sapiente reiciendis in cupiditate minima, reprehenderit iste adipisci! Voluptatum, ab sed. Hic molestias, ullam sint, eius sed obcaecati perferendis voluptates provident dicta aut fugit est, minus. Aspernatur et nisi quo, tempora hic quisquam, cumque?</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae ad voluptatem quisquam id accusantium iste fugit tempora quam ut repellat, voluptate distinctio labore sint est provident dignissimos cum nesciunt perspiciatis nostrum alias dolorem illum harum quo. Quibusdam, nesciunt. Commodi reiciendis veritatis est consectetur distinctio iusto suscipit, voluptate amet unde porro? </p>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slide Out Menu - Script Codes CSS Codes

header { background: #333; color: #fff; padding: 20px; position: relative;
}
.site-title { margin-left: 100px; font-size: 1rem;
}
.nav-toggle { position: absolute; top: 30px; cursor: pointer;
}
a { color: #fff; text-decoration: none;
}
nav li { list-style: none;
}
.main-navigation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #222; text-align: center; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.6s ease; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
.main-navigation.open { -webkit-transform: translateX(0); transform: translateX(0);
}
.main-navigation .nav-toggle { right: 5%; top: 5%;
}
.main-navigation ul { margin: 0; padding: 0;
}
.main-navigation ul a { padding: 10px 20px; display: block;
}
.main-navigation ul a:hover { background: #333;
}

Slide Out Menu - Script Codes JS Codes

$(function() {	$('.nav-toggle').on('click', function() { $('.main-navigation').toggleClass('open'); });
});
Slide Out Menu - Script Codes
Slide Out Menu - Script Codes
Home Page Home
Developer Michael Chernin
Username mchernin34
Uploaded January 19, 2023
Rating 3
Size 2,584 Kb
Views 6,072
Do you need developer help for Slide Out Menu?

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!

Michael Chernin (mchernin34) Script Codes
Name
Icon Grid
Starter Portfolio
Popover Navigation
Change background color based on mouse location
Mostly Fluid
Column Drop
Image grid with captions
A Pen by Michael Chernin
Icon List
Animated card
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!