How to create mobile-like navigation using jquery

In this tutorial We’ll learn How to create mobile-like navigation using jquery, which you have seen mobile responsive website with n number of sliding menu, which help you to manage n number of links in beautiful manner, For creating sliding menu I’ going to use wonderful light weight jquery plugin called slinky.js which allow you to create A light-weight, responsive, mobile-like navigation menu.
jQuery-sliding-menu



Let’s start the integration of the plugin.

First add required libraries on page to add sliding menu effect, You only need to add jquery.slinky.css, jquery.slinky.js on page with jquery core library.

<link rel="stylesheet" href="jquery.slinky.css?v3">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="jquery.slinky.js"></script>

After that create your html menu with nu number for links.

<div id="menu" class="slinky-menu">
				<ul>
 
					<li>
						<a href="#">Artists</a>
						<ul>
							<li>
								<a href="#">Aerosmith</a>
								<ul>
									<li>
										<a href="#">Get Your Wings</a>
										<ul>
											<li>
												<a href="#">Train Kept A-Rollin'</a>
											</li>
											<li>
												<a href="#">Same Old Song and Dance</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Eagles</a>
								<ul>
									<li>
										<a href="#">Hotel California</a>
										<ul>
											<li>
												<a href="#">Hotel California</a>
											</li>
											<li>
												<a href="#">Pretty Maids All in a Row</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Led Zeppelin</a>
								<ul>
									<li>
										<a href="#">Physical Graffiti</a>
										<ul>
											<li>
												<a href="#">In My Time of Dying</a>
											</li>
											<li>
												<a href="#">Houses of the Holy</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Albums</a>
						<ul>
							<li>
								<a href="#">Get Your Wings</a>
								<ul>
									<li>
										<a href="#">Train Kept A-Rollin'</a>
									</li>
									<li>
										<a href="#">Same Old Song and Dance</a>
									</li>
								</ul>
							</li>
 
						</ul>
					</li>
 
					<li>
						<a href="#">Genres</a>
						<ul>
							<li>
								<a href="#">Rock</a>
								<ul>
									<li>
										<a href="#">Hotel California</a>
									</li>
									<li>
 
								</ul>
							</li>
							<li>
								<a href="#">Hard rock</a>
								<ul>
									<li>
										<a href="#">In My Time of Dying</a>
									</li>
									<li>
										<a href="#">Houses of the Holy</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Settings</a>
						<ul>
							<li>
								<a href="#">Profile</a>
							</li>
							<li>
								<a href="#">Player</a>
								<ul>
									<li>
										<a href="#">Volume</a>
									</li>
									<li>
										<a href="#">Equalizer</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>



Finally call slinky() function on page to make your menu actionable with sliding effect.

<script>
	$(function() {
		$('#menu').slinky({
			title: true,
		});
	});
</script>

See live demo and download sample source code.

DEMO

DOWNLOAD

You can also customize this menu as per your requirement just follow the official document of slinky on github



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.