Add Collapsible/ Expandable Menu CSS to this CODE

tajmohd15 · October 22, 2013, 7:33am

This is my code

<div id="directory" class="directory twoCol">
	<div class="catcol  first">
		<ul class="maincat-list">
			<li class="maincat cat-item-32"><a href="http://example.com/automobiles/" title="">Automobiles</a>
            	<ul class="subcat-list"><li class="cat-item cat-item-33"><a href="http://example.com/cat/automobiles/cars/" title="">Cars</a></li></ul>
            </li>
            <li class="maincat cat-item-37"><a href="http://example.com/cat/home-lifestyle/" title="">Home &amp; Lifestyle</a>
            	<ul class="subcat-list"><li class="cat-item cat-item-38"><a href="http://example.com/cat/home-lifestyle/clothing/" title="">Clothing</a></li></ul>
            </li>
            <li class="maincat cat-item-2"><a href="http://example.com/cat/misc/" title="">Misc</a>  </li></ul>
    </div><!-- /catcol -->

    <div class="catcol ">
    	<ul class="maincat-list">
        	<li class="maincat cat-item-8"><a href="http://example.com/cat/mobiles-phones/" title="">Mobiles Phones</a>
            	<ul class="subcat-list"><li class="cat-item cat-item-9"><a href="http://example.com/cat/mobiles-phones/phones/" title="">Phones</a></li></ul>
            </li>
            <li class="maincat cat-item-13"><a href="http://example.com/cat/office-shops-space/" title="">Office / Shops / Space</a></li></ul>

    </div><!-- /catcol -->
	<div class="clr"></div>
</div>

As shown in code, there are two columns(catcol first & catcol classes) of Categories. I want Collapsible/ Expandable Menu for this code like Main Category(maincat cat-item-X) bullet image or any pointer should be used to create Collapsible/ Expandable menu for Sub Category(subcat-list). It’s columns, class names & its hyperlinks must not be changed.

Plzz…guys…help me.!!

PaulOB · October 22, 2013, 1:35pm

Hi, Welcome to Sitepoint:)

You didn’t add your existing CSS which will be needed in order to apply the correct styling without breaking what you already have.

However, I should mention that if you want a menu that works when clicked (rather than hover) then you will need JS for that and the post should be moved to the JS forum most likely (you can do a click menu in CSS using :target or check inputs but only modern browsers will work with it so is not viable at present).

If you just want a menu that opens on hover then we can help with that here but will need a little more detail from you.

tajmohd15 · October 22, 2013, 3:21pm

This is my existing CSS


<style type='text/css'>

#directory .catcol ul{list-style-type:none; padding:10px 8px}
#directory .catcol{float:left; width:33%}
#directory .catcol ul.maincat-list{}
#directory .catcol ul li.maincat { border-bottom:1px solid #DDDDDD; font-weight:bold; padding:0 0 2px; text-transform:uppercase; margin-bottom:15px; }
#directory .catcol ul li.maincat a{text-decoration:none;}
#directory .catcol li.maincat > ul.subcat-list { border-top:1px solid #DDDDDD; border-bottom:1px solid #FFFFFF; margin-bottom:-3px; padding-bottom:8px; }
#directory .catcol ul.subcat-list{padding:5px;}
#directory .catcol ul li.cat-item{font-weight:normal; text-transform:none; background:transparent url(images/bullet-grey.png) no-repeat scroll 4px 6px; line-height:20px; padding:0 0 0 12px}
#directory .catcol ul li.cat-item a{text-decoration:none; color:#545454;}
#directory .catcol ul li.maincat a:hover, #directory .catcol ul li.cat-item a:hover{text-decoration:underline}
#directory .catcol ul li{line-height:20px; padding:5px 0 2px 10px; text-shadow:0 1px 0 #FFFFFF;}
#directory .catcol ul li.cat-item:hover{}
#directory .catcol ul.children {list-style-type:none; padding:5px 0; margin:0 0 -10px -12px;}
#directory .catcol ul.children li {background:transparent url(images/bullet-grey.png) no-repeat scroll 12px 11px; border-bottom:none; border-top:1px solid #EFEFEF;}
#directory .catcol ul.children li a {margin-left:8px;}
#directory.twoCol .catcol { width: 50%; }

</style>

Hope you may fix this problem!!

PaulOB · October 22, 2013, 4:16pm

One last question:

Is the menu activated by clicking it?

Or is it activated on hover only?

The answer to the above is needed before coding as a click menu will require javascript.

tajmohd15 · October 22, 2013, 5:06pm

on clicking the main category menu it must expand & collapse its sub categories…

PaulOB · October 22, 2013, 7:16pm

Hi,

If you are using jquery then you could do it like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type='text/css'>
#directory .catcol ul {
	list-style-type:none;
	padding:10px 8px
}
#directory .catcol {
	float:left;
	width:33%
}
#directory .catcol ul.maincat-list { }
#directory .catcol ul li.maincat {
	border-bottom:1px solid #DDDDDD;
	font-weight:bold;
	padding:0 0 2px;
	text-transform:uppercase;
	margin-bottom:15px;
}
#directory .catcol ul li.maincat a { text-decoration:none; }
#directory .catcol li.maincat > ul.subcat-list {
	border-top:1px solid #DDDDDD;
	border-bottom:1px solid #FFFFFF;
	margin-bottom:-3px;
	padding-bottom:8px;
}
#directory .catcol ul.subcat-list { padding:5px; }
#directory .catcol ul li.cat-item {
	font-weight:normal;
	text-transform:none;
	background:transparent url(images/bullet-grey.png) no-repeat scroll 4px 6px;
	line-height:20px;
	padding:0 0 0 12px
}
#directory .catcol ul li.cat-item a {
	text-decoration:none;
	color:#545454;
}
#directory .catcol ul li.maincat a:hover, #directory .catcol ul li.cat-item a:hover { text-decoration:underline }
#directory .catcol ul li {
	line-height:20px;
	padding:5px 0 2px 10px;
	text-shadow:0 1px 0 #FFFFFF;
}
#directory .catcol ul li.cat-item:hover { }
#directory .catcol ul.children {
	list-style-type:none;
	padding:5px 0;
	margin:0 0 -10px -12px;
}
#directory .catcol ul.children li {
	background:transparent url(images/bullet-grey.png) no-repeat scroll 12px 11px;
	border-bottom:none;
	border-top:1px solid #EFEFEF;
}
#directory .catcol ul.children li a { margin-left:8px; }
#directory.twoCol .catcol { width: 50%; }
/* dropdown code */
.hasJS li ul { display:none }
.hasJS li.openMenu ul { display:block }
.closeMenu > a:before {
	content:" [+] ";
	cursor:pointer
}
.openMenu > a:before { content:" [-] "; }
</style>
</head>

<body>
<div id="directory" class="directory twoCol">
		<div class="catcol  first">
				<ul class="maincat-list">
						<li class="maincat cat-item-32 closeMenu"><a href="http://example.com/automobiles/" title="">Automobiles</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-33"><a href="http://example.com/cat/automobiles/cars/" title="">Cars</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-37 closeMenu"><a href="http://example.com/cat/home-lifestyle/" title="">Home &amp; Lifestyle</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-38"><a href="http://example.com/cat/home-lifestyle/clothing/" title="">Clothing</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-2"><a href="http://example.com/cat/misc/" title="">Misc</a> </li>
				</ul>
		</div>
		<!-- /catcol -->
		
		<div class="catcol ">
				<ul class="maincat-list">
						<li class="maincat cat-item-8 closeMenu"><a href="http://example.com/cat/mobiles-phones/" title="">Mobiles Phones</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-9"><a href="http://example.com/cat/mobiles-phones/phones/" title="">Phones</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-13"><a href="http://example.com/cat/office-shops-space/" title="">Office / Shops / Space</a></li>
				</ul>
		</div>
		<!-- /catcol -->
		<div class="clr"></div>
</div>
<script src="http://code.jquery.com/jquery.js"  type="text/javascript"></script> 
<script>
$('.catcol').addClass('hasJS');
$( '.catcol ul ul').parent('li').click(function() {
	$(this).toggleClass('openMenu');
	return false;
});
</script>
</body>
</html>

I didn’t touch your css but added this:


/* dropdown code */
.hasJS li ul { display:none }
.hasJS li.openMenu ul { display:block }
.closeMenu > a:before {content:" [+] ";}
.openMenu > a:before { content:" [-] "; }

I didn’t touch the html except to add the closeMenu class to the submenu’s parent list.

However, if you aren’t using jquery then you would be better off with vanila JS so I will move this thread to the JS forum for more expert help.

tajmohd15 · October 23, 2013, 10:47am

Thanks a lot…
It worked like a charm

tajmohd15 · October 23, 2013, 11:45am

I’m really sorry…but I found a bug. I came across this later.
Hyperlinks are not opening…expand & collapse is working fine. But Hyperlinks of those Categories got disabled.
I need to those hyperlinks as well. Its very important

On a Category expansion, when user clicks on the Category or Sub Category it must open the page of that clicked Category.

Plzz…this last bug can u plz fix it…

PaulOB · October 23, 2013, 1:10pm

HI,

I assumed the top level was just a heading which is the usual way these menus work (the top also level acts as a link if JS is not present).

To keep the top level as a link you will need to makes these changes to the css and JS.

The extra css is now just this:


/* dropdown code */
.hasJS li ul{display:none}
.hasJS li.openMenu ul{display:block}
.menuTrigger {
	cursor:pointer;
	display:inline-block;
	margin-right:10px;
	text-align:center;
	width:30px;
}

The js is this:


<script src="http://code.jquery.com/jquery.js"  type="text/javascript"></script>
<script>
$('.catcol').addClass('hasJS');
$( "<b class='menuTrigger'>[+]</b>" ).prependTo( ".closeMenu" );
$( '.catcol').on( "click", ".menuTrigger", function() {
	var target = $(this).parent();
	target.toggleClass('openMenu');
	if (target.find('ul').is(":visible")){
		target.find('.menuTrigger').text('[-]');
		}
		else{
		target.find('.menuTrigger').text('[+]');	
			}
});
</script>

Whole working code:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type='text/css'>
#directory .catcol ul {
	list-style-type:none;
	padding:10px 8px
}
#directory .catcol {
	float:left;
	width:33%
}
#directory .catcol ul.maincat-list { }
#directory .catcol ul li.maincat {
	border-bottom:1px solid #DDDDDD;
	font-weight:bold;
	padding:0 0 2px;
	text-transform:uppercase;
	margin-bottom:15px;
}
#directory .catcol ul li.maincat a { text-decoration:none; }
#directory .catcol li.maincat > ul.subcat-list {
	border-top:1px solid #DDDDDD;
	border-bottom:1px solid #FFFFFF;
	margin-bottom:-3px;
	padding-bottom:8px;
}
#directory .catcol ul.subcat-list { padding:5px; }
#directory .catcol ul li.cat-item {
	font-weight:normal;
	text-transform:none;
	background:transparent url(images/bullet-grey.png) no-repeat scroll 4px 6px;
	line-height:20px;
	padding:0 0 0 12px
}
#directory .catcol ul li.cat-item a {
	text-decoration:none;
	color:#545454;
}
#directory .catcol ul li.maincat a:hover, #directory .catcol ul li.cat-item a:hover { text-decoration:underline }
#directory .catcol ul li {
	line-height:20px;
	padding:5px 0 2px 10px;
	text-shadow:0 1px 0 #FFFFFF;
}
#directory .catcol ul li.cat-item:hover { }
#directory .catcol ul.children {
	list-style-type:none;
	padding:5px 0;
	margin:0 0 -10px -12px;
}
#directory .catcol ul.children li {
	background:transparent url(images/bullet-grey.png) no-repeat scroll 12px 11px;
	border-bottom:none;
	border-top:1px solid #EFEFEF;
}
#directory .catcol ul.children li a { margin-left:8px; }
#directory.twoCol .catcol { width: 50%; }


/* dropdown code */
.hasJS li ul{display:none}
.hasJS li.openMenu ul{display:block}
.menuTrigger {
	cursor:pointer;
	display:inline-block;
	margin-right:10px;
	text-align:center;
	width:30px;
}
</style>



</head>

<body>
<div id="directory" class="directory twoCol">
		<div class="catcol  first">
				<ul class="maincat-list">
						<li class="maincat cat-item-32 closeMenu"><a href="http://example.com/automobiles/" title="">Automobiles</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-33"><a href="http://example.com/cat/automobiles/cars/" title="">Cars</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-37 closeMenu"><a href="http://example.com/cat/home-lifestyle/" title="">Home &amp; Lifestyle</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-38"><a href="http://example.com/cat/home-lifestyle/clothing/" title="">Clothing</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-2"><a href="http://example.com/cat/misc/" title="">Misc</a> </li>
				</ul>
		</div>
		<!-- /catcol -->
		
		<div class="catcol ">
				<ul class="maincat-list">
						<li class="maincat cat-item-8 closeMenu"><a href="http://example.com/cat/mobiles-phones/" title="">Mobiles Phones</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-9"><a href="http://example.com/cat/mobiles-phones/phones/" title="">Phones</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-13"><a href="http://example.com/cat/office-shops-space/" title="">Office / Shops / Space</a></li>
				</ul>
		</div> 
		<!-- /catcol -->
		<div class="clr"></div>
</div>
<script src="http://code.jquery.com/jquery.js"  type="text/javascript"></script>
<script>
$('.catcol').addClass('hasJS');
$( "<b class='menuTrigger'>[+]</b>" ).prependTo( ".closeMenu" );
$( '.catcol').on( "click", ".menuTrigger", function() {
	var target = $(this).parent();
	target.toggleClass('openMenu');
	if (target.find('ul').is(":visible")){
		target.find('.menuTrigger').text('[-]');
		}
		else{
		target.find('.menuTrigger').text('[+]');	
			}
});
</script>
</body>
</html>

Hopefully one of the JS wizards will pass by and offer a vanilla js version (assuming you weren’t already using jquery).

tajmohd15 · October 23, 2013, 2:00pm

This code really worked…
one last request

I need bullet images/icon instead of text .
One right arrow image/icon instead of “[+]” symbol & another down arrow image/icon instead of “[-]”

PaulOB · October 23, 2013, 3:09pm

Try this:


/* dropdown code */
.hasJS li ul{display:none}
.hasJS li.openMenu ul{display:block}
.menuTrigger {
	cursor:pointer;
	display:inline-block;
	text-align:center;
	border-top:8px dashed transparent;
	border-bottom:8px dashed transparent;
	border-left:8px solid #000;
	height:0;
	width:0;
	margin:-5px 10px 0 3px;
	vertical-align:middle;
	overflow:hidden;
}
.openMenu .menuTrigger{
	border-right:8px solid transparent;
	border-left:8px solid transparent;
	border-top:8px solid #000;
	margin:-1px 5px 0 0;
}


<script src="http://code.jquery.com/jquery.js"  type="text/javascript"></script>
<script>
$('.catcol').addClass('hasJS');
$( "<b class='menuTrigger'></b>" ).prependTo( ".closeMenu" );
$( '.catcol').on( "click", ".menuTrigger", function() {
	var target = $(this).parent();
	target.toggleClass('openMenu');
});
</script>

Whole code;


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type='text/css'>
#directory .catcol ul {
	list-style-type:none;
	padding:10px 8px
}
#directory .catcol {
	float:left;
	width:33%
}
#directory .catcol ul.maincat-list { }
#directory .catcol ul li.maincat {
	border-bottom:1px solid #DDDDDD;
	font-weight:bold;
	padding:0 0 2px;
	text-transform:uppercase;
	margin-bottom:15px;
}
#directory .catcol ul li.maincat a { text-decoration:none; }
#directory .catcol li.maincat > ul.subcat-list {
	border-top:1px solid #DDDDDD;
	border-bottom:1px solid #FFFFFF;
	margin-bottom:-3px;
	padding-bottom:8px;
}
#directory .catcol ul.subcat-list { padding:5px; }
#directory .catcol ul li.cat-item {
	font-weight:normal;
	text-transform:none;
	background:transparent url(images/bullet-grey.png) no-repeat scroll 4px 6px;
	line-height:20px;
	padding:0 0 0 12px
}
#directory .catcol ul li.cat-item a {
	text-decoration:none;
	color:#545454;
}
#directory .catcol ul li.maincat a:hover, #directory .catcol ul li.cat-item a:hover { text-decoration:underline }
#directory .catcol ul li {
	line-height:20px;
	padding:5px 0 2px 10px;
	text-shadow:0 1px 0 #FFFFFF;
}
#directory .catcol ul li.cat-item:hover { }
#directory .catcol ul.children {
	list-style-type:none;
	padding:5px 0;
	margin:0 0 -10px -12px;
}
#directory .catcol ul.children li {
	background:transparent url(images/bullet-grey.png) no-repeat scroll 12px 11px;
	border-bottom:none;
	border-top:1px solid #EFEFEF;
}
#directory .catcol ul.children li a { margin-left:8px; }
#directory.twoCol .catcol { width: 50%; }


/* dropdown code */
.hasJS li ul{display:none}
.hasJS li.openMenu ul{display:block}
.menuTrigger {
	cursor:pointer;
	display:inline-block;
	text-align:center;
	border-top:8px dashed transparent;
	border-bottom:8px dashed transparent;
	border-left:8px solid #000;
	height:0;
	width:0;
	margin:-5px 10px 0 3px;
	vertical-align:middle;
	overflow:hidden;
}
.openMenu .menuTrigger{
	border-right:8px solid transparent;
	border-left:8px solid transparent;
	border-top:8px solid #000;
	margin:-1px 5px 0 0;
}
</style>



</head>

<body>
<div id="directory" class="directory twoCol">
		<div class="catcol  first">
				<ul class="maincat-list">
						<li class="maincat cat-item-32 closeMenu"><a href="http://example.com/automobiles/" title="">Automobiles</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-33"><a href="http://example.com/cat/automobiles/cars/" title="">Cars</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-37 closeMenu"><a href="http://example.com/cat/home-lifestyle/" title="">Home &amp; Lifestyle</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-38"><a href="http://example.com/cat/home-lifestyle/clothing/" title="">Clothing</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-2"><a href="http://example.com/cat/misc/" title="">Misc</a> </li>
				</ul>
		</div>
		<!-- /catcol -->
		
		<div class="catcol ">
				<ul class="maincat-list">
						<li class="maincat cat-item-8 closeMenu"><a href="http://example.com/cat/mobiles-phones/" title="">Mobiles Phones</a>
								<ul class="subcat-list">
										<li class="cat-item cat-item-9"><a href="http://example.com/cat/mobiles-phones/phones/" title="">Phones</a></li>
								</ul>
						</li>
						<li class="maincat cat-item-13"><a href="http://example.com/cat/office-shops-space/" title="">Office / Shops / Space</a></li>
				</ul>
		</div> 
		<!-- /catcol -->
		<div class="clr"></div>
</div>
<script src="http://code.jquery.com/jquery.js"  type="text/javascript"></script>
<script>
$('.catcol').addClass('hasJS');
$( "<b class='menuTrigger'></b>" ).prependTo( ".closeMenu" );
$( '.catcol').on( "click", ".menuTrigger", function() {
	var target = $(this).parent();
	target.toggleClass('openMenu');
});
</script>
</body>
</html>

tajmohd15 · October 23, 2013, 4:13pm

Thanks a lot…
You really helped me a lot

Thank you…keep up the good work bro…