Slide out Menu

Developer
Size
4,936 Kb
Views
30,360

How do I make an slide out menu?

This is an example of ChocolateChip-UI's slide out menu for iOS 7. As such you need to view this in Desktop Safari 6-7 or on iOS 6-7. Click on the slide indicator at the top left to open and close the menu. When the menu slides out select and item to see it load.. What is a slide out menu? How do you make a slide out menu? This script and codes were developed by Robert Biggs on 24 August 2022, Wednesday.

Slide out Menu Previews

Slide out Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide out Menu</title> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no"> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui.ios-3.0.4.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav>	<h1>Music</h1>	</nav>	<article id='music'>	<section>	<h2>Music</h2>	<ul class='list'>	<li class='comp'>	<aside>	<img title='Imagine Dragons' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Imagine_Dragons.png" height="80px">	</aside>	<div>	<h3>Imagine Dragons</h3>	<h4>Radioactive</h4>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>	</div>	</li>	<li class='comp'>	<aside>	<img title='Hurry and Harm' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Hurry_and_Harm.png" height="80px">	</aside>	<div>	<h3>The Hurry and the Harm</h3>	<h4>Hurt</h4>	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p>	</div>	</li>	<li class='comp'>	<aside>	<img title='Permanent' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Permanent.png" height="80px">	</aside>	<div>	<h3>David Cook</h3>	<h4>Permanent</h4>	<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.</p>	</div>	</li>	<li class='comp'>	<aside>	<img title='Kiss' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Kiss.png" height="80px">	</aside>	<div>	<h3>Kiss</h3>	<h4>This Kiss</h4>	<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.</p>	</div>	</li>	<li class='comp'>	<aside>	<img title='Willy Moon' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/Willy_Moon.png" height="80px">	</aside>	<div>	<h3>Willy Moon</h3>	<h4>Yeah Yeah</h4>	<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non.</p>	</div>	</li>	</ul>	</section>	</article>	<nav>	<h1>Pictures</h1>	</nav>	<article id='pictures'>	<section>	<ul class='image-grid'> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/american-football-63109_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/couple-168191_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/daisy-75190_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/dependent-100343_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/dreamy-20100_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/girl-102831_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/lacrosse-165576_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/hot-air-balloon-4761_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/piercing-123240_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047s/portrait-53899_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/quarterback-67701_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/rugby-78193_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/africa-139343_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/baby-19295_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/baby-20339_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/utah-95032_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/germany-70567_640.jpg'> </li> <li> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/mountain-91385_640.jpg'> </li> </ul>	</section>	</article>	<nav>	<h1>Recipes</h1>	</nav>	<article id='recipes'>	<section>	<ul class='list'>	<li>	<h3>	Italian Style Meatloaf	</h3>	<h4>Ingredients</h4>	<ul>	<li>	1 1/2 pounds ground beef	</li>	<li>	2 eggs, beaten	</li>	<li>	3/4 cup dry bread crumbs	</li>	<li>	1/4 cup ketchup	</li>	<li>	1 teaspoon Italian-style seasoning	</li>	<li>	1 teaspoon garlic salt	</li>	<li>	1 (14.5 ounce) can diced tomatoes, drained	</li>	</ul>	<p>Directions</p>	<ol>	<li>	Preheat oven to 350 degrees F (175 degrees C).	</li>	<li>	In a large bowl, mix together ground beef, eggs, bread crumbs and ketchup. Season with Italian-style seasoning, oregano, basil, garlic salt, diced tomatoes and cheese. Press into a 9x5 inch loaf pan, and cover loosely with foil.	</li>	<li>	Bake in the preheated oven approximately 1 hour, or until internal temperature reaches 160 degrees F (70 degrees C).	</li>	</ol>	</li>	<li>	<h3>	Chicken Marsala	</h3>	<h4>Ingredients</h4>	<ul>	<li>	1/4 cup all-purpose flour for coating	</li>	<li>	1/2 teaspoon salt	</li>	<li>	1/4 teaspoon ground black pepper	</li>	<li>	1/2 teaspoon dried oregano	</li>	<li>	4 skinless, boneless chicken breast halves - pounded 1/4 inch thick	</li>	<li>	4 tablespoons butter	</li>	<li>	4 tablespoons olive oil	</li>	<li>	1 cup sliced mushrooms	</li>	<li>	1/2 cup Marsala wine	</li>	<li>	1/4 cup cooking sherry	</li>	</ul>	<p>Directions</p>	<ol>	<li>	In a shallow dish or bowl, mix together the flour, salt, pepper and oregano. Coat chicken pieces in flour mixture.	</li>	<li>	In a large skillet, melt butter in oil over medium heat. Place chicken in the pan, and lightly brown. Turn over chicken pieces, and add mushrooms. Pour in wine and sherry. Cover skillet; simmer chicken 10 minutes, turning once, until no longer pink and juices run clear.	</li>	</ol>	</li>	<li>	<h3>Chicken Breasts with Lime Sauce</h3>	<h4>Ingredients</h4>	<ul>	<li>	4 skinless, boneless chicken breast halves - pounded to 1/4 inch thickness	</li>	<li>	1 egg, beaten	</li>	<li>	2/3 cup dry bread crumbs	</li>	<li>	2 tablespoons olive oil	</li>	<li>	1 lime, juiced	</li>	<li>	6 tablespoons butter	</li>	<li>	1 teaspoon minced fresh chives	</li>	<li>	1/2 teaspoon dried dill weed	</li>	</ul>	<p>Directions</p>	<ol>	<li>	Coat chicken breasts with egg, and dip in bread crumbs. Place on a wire rack, and allow to dry for about 10 minutes.	</li>	<li>	Heat olive oil in a large skillet over medium heat. Place chicken into the skillet, and fry for 3 to 5 minutes on each side. Remove to a platter, and keep warm.	</li>	<li>	Drain grease from the skillet, and squeeze in lime juice. Cook over low heat until it boils. Add butter, and stir until melted. Season with chives and dill. Spoon sauce over chicken, and serve immediately.	</li>	</ol>	</li>	<li>	<h3>Lemon Rosemary Salmon</h3>	<h4>Ingredients</h4>	<ul>	<li>	1 lemon, thinly sliced	</li>	<li>	4 sprigs fresh rosemary	</li>	<li>	2 salmon fillets, bones and skin removed coarse salt to taste	</li>	<li>	1 tablespoon olive oil, or as needed	</li>	</ul>	<p>Directions</p>	<ol>	<li>	Preheat oven to 400 degrees F (200 degrees C).	</li>	<li>	Arrange half the lemon slices in a single layer in a baking dish. Layer with 2 sprigs rosemary, and top with salmon fillets. Sprinkle salmon with salt, layer with remaining rosemary sprigs, and top with remaining lemon slices. Drizzle with olive oil.	</li>	<li>	Bake 20 minutes in the preheated oven, or until fish is easily flaked with a fork.	</li>	</ol>	</li>	<li>	<h3>Strawberry Angel Food Dessert</h3>	<h4>Ingredients</h4>	<ul>	<li>	1 (10 inch) angel food cake	</li>	<li>	2 (8 ounce) packages cream cheese, softened	</li>	<li>	1 cup white sugar	</li>	<li>	1 (8 ounce) container frozen whipped topping, thawed	</li>	<li>	1 quart fresh strawberries, sliced	</li>	<li>	1 (18 ounce) jar strawberry glaze	</li>	</ul>	<p>Directions</p>	<ol>	<li>	Crumble the cake into a 9x13 inch dish.	</li>	<li>	Beat the cream cheese and sugar in a medium bowl until light and fluffy. Fold in whipped topping. Mash the cake down with your hands and spread the cream cheese mixture over the cake.	</li>	<li>	In a bowl, combine strawberries and glaze until strawberries are evenly coated. Spread over cream cheese layer. Chill until serving.	</li>	</ol>	</li>	</ul>	</section>	</article>	<nav>	<h1>Contacts</h1>	</nav>	<article id='contacts'>	<section>	<ul class='list'>	<li>	<h3>John Doe</h3>	</h4>Bagley's Bagels</h4>	<p>111-111-1111</p>	</li>	<li>	<h3>Suzy Cue</h3>	</h4>Jeff's Jiffies</h4>	<p>222-222-2222</p>	</li>	<li>	<h3>Paul Parker</h3>	</h4>Bonzo's</h4>	<p>333-333-3333</p>	</li>	<li>	<h3>Mary Joe</h3>	</h4>Borx International</h4>	<p>444-444-4444</p>	</li>	<li>	<h3>Joe Bodoni</h3>	</h4>Sasquatch Suits</h4>	<p>555-555-5555</p>	</li>	<li>	<h3>Edna Edmond</h3>	</h4>MacDoogle's</h4>	<p>666-666-6666</p>	</li>	</ul>	</section>	</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui-3.0.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slide out Menu - Script Codes CSS Codes

.image-grid {	list-style: none:	margin: 0;	padding: 0;	position: relative;	left: 15px;
}
.image-grid > li {	list-style: none:	margin: 0;	padding: 0;
}
.image-grid::after {	content: '';	display: block;	clear: both;
}
.image-grid > li {	float: left;	height: 100px;	width: 30%;	border: solid 1px #666;	box-sizing: border-box;	overflow: hidden;	position: relative;	display: block;
}
.image-grid > li > img {	display: block;	width: 150%;
}

Slide out Menu - Script Codes JS Codes

$(function() {
$.UISlideout();
$('.slide-out > section').append(	'<h2>Your Stuff</h2>\	<ul class="list">\	<li data-show-article="music"><h3>Music</h3></li>\	<li data-show-article="pictures"><h3>Pictures</h3></li>\	<li data-show-article="recipes"><h3>Recipes</h3></li>\	<li data-show-article="contacts"><h3>Contacts</h3></li>\	</ul>'	);
});
Slide out Menu - Script Codes
Slide out Menu - Script Codes
Home Page Home
Developer Robert Biggs
Username rbiggs
Uploaded August 24, 2022
Rating 3.5
Size 4,936 Kb
Views 30,360
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!

Robert Biggs (rbiggs) Script Codes
Create amazing web content 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!