Published on: 22 March, 2016

How to create category menu list using css and JQuery

Posted by andy | 1008 views 1 likes 0 favourites 0 comments
Tumblr Digg Google Plus

In this tutorial, you will learn how to create a category menu list using css and JQuery framework. You will also learn on how to automatically place an arrow into the LI element if it founds there is a sub menu list. The placement of the arrow is done via JQuery, this includes binding the event onclick on the LI element as well to expand and collapse the sub menu list. Let's begin with the html code for the category menu html code.

<div id='category-menu'>
	<ul class='ul-category'>
		<li><a>Computers</a>
			<ul class='ul-subcategory'>
				<li><a>Keyboards</a></li>
				<li><a>Laptops</a></li>
				<li><a>Motherboard</a></li>
				<li><a>Mouse</a></li>
				<li><a>Router</a></li>
			</ul>
		</li>
		<li><a>Phones</a>
			<ul class='ul-subcategory'>
				<li><a>Apple</a></li>
				<li><a>Blackberry</a></li>
				<li id="li3333"><a>HTC</a>
					<ul>
						<li><a>HTC One</a></li>
						<li><a>HTC M9</a></li>
					</ul>
				</li>
				<li><a>Sony</a></li>
			</ul>
		</li>
		<li><a>Books</a></li>
		<li><a>Home and Garden</a></li>
	</ul>
</div>

The next part would the styling in CSS. I have included the quick comment on each style to help you understand what the styles do.

<style type="text/css">
	/* Set the maximum width of the menu wrapper */
	#category-menu{
		max-width:250px;
	}
	
	/* we remove the margin, padding and list styles of the ul li list */
	#category-menu ul, #category-menu ul li{
		margin:0;
		padding:0;
		list-style:none;
	}
	
	/* Adding the border to the parent ul and remove the border bottom */
	#category-menu > ul{
		border:solid 1px #000;
		border-bottom:none;
		background:#f5fec2;
	}
	
	/* Apply border bottom to the first level of li list only */
	#category-menu > ul > li{
		border-bottom:solid 1px #000;
	}
	
	/* Styling for all links inside the category menu */
	#category-menu ul li a{
		font-size:12px;
		color:#000;
		text-decoration:none;
		font-family:arial;
		display:inline-block;
		width:100%;
		cursor:pointer;
	}
	
	/* set the padding space and position for all li list */
	#category-menu ul li{
		padding:5px 10px;
		position:relative;
	}
	
	/* hiding the ul 2nd and 3rd levels */
	#category-menu ul li ul, #category-menu ul li ul li ul{
		display:none;
	}
	
	/* styling the color for the 2nd level ul */
	#category-menu > ul > li > ul{
		background:#fff;
		margin:10px 0;
	}
	
	/* styling the color for the 3rd level ul */
	#category-menu > ul > li > ul > li > ul{
		background:#ade5f5;
		margin:10px 0;
	}
	
	/* styling the arrows style */
	span.arrow, span.arrow-down{
		background:url(up-icn.png) no-repeat;
		width:12px;
		height:8px;
		display:inline-block;
		position:absolute;
		right:10px;
		top:10px;
	}
	
	span.arrow-down{
		background:url(down-icn.png) no-repeat;
	}
</style>

The last part is the Javascript code. Remember to add the JQuery framework on your html code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
	$(function(){
		//using jquery to loop each li element and automatically add an arrow span if the element contains a child of ul list
		$('#category-menu ul li').each(function(){
			if ($(this).find('ul').length > 0)
			{
				$(this).addClass("has-child");
				$(this).prepend("<span class='arrow'></span>");
			}
		});
		
		//bind an event to the li link that contains a child of ul list.
		$('#category-menu ul > li.has-child a').on("click", function(event){
			var currentArrow = $(this).parent().find(" > span");
			if($(currentArrow).length > 0){
				if($(currentArrow).attr("class").indexOf("arrow-up") > 0){
					$(currentArrow).removeClass("arrow-up");
					$(currentArrow).parent().find(" > ul").slideUp();
				}else{
					$(currentArrow).addClass("arrow-up");
					$(currentArrow).parent().find(" > ul").slideDown();
				}
			}
		});
	});
</script>

Demo

Download Files

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 08 March, 2016
Completely new to JQuery script? Don't worry, you are not alone. We have summarize a list of tips for newbie to learn JQuery faster. The best way to strength your JQuery skills is by testing our tips directly in your html files and run it.
Published on: 02 May, 2014
Are you lazy to google the quick jquery code snippet for your website? Look no further, we have included a quick summary list of JQuery code to help you faster coding to save your time. Starting from how to check if an object is visible or how to tick a check box programmatically using JQuery.
Related Tutorials
Published on: 25 January, 2016
So what actually an event? An event can be considered as a result of an action triggered by a process which can be a process clicking of a user or when a page is loading.
Published on: 20 December, 2015
Learn how easily to manipulate DOM element selection using JQuery. One of the cool feature from JQuery is the DOM selector. In javascript, when you want to reference an object, you can refer the object either based on ID or class name of the object by using the built in function such as getElementById or getElementByTagName or getElementsByClassName.
Published on: 15 December, 2015
Getting started by writing your first JQuery code. Learn how to create it from scratch and apply it on your site. The best way to start your first JQuery function is after the browser has completedly loaded the page content. There are two short methods to do so.
Published on: 13 December, 2015
Learn what is the JQuery framework is and why many web developers and designers love to this framework.