Published on: 22 March, 2016

How to create category menu list using css and JQuery?

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

Download

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.