SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add Collapsible/ Expandable Menu CSS to this CODE

    This is my code

    HTML 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.!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is my existing CSS
    Code:
    <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!!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    on clicking the main category menu it must expand & collapse its sub categories..

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

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

    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 }
    .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:

    Code:
    /* 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.

  7. #7
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks a lot...
    It worked like a charm

  8. #8
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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:

    Code:
    /* 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:

    Code:
    <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:
    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).

  10. #10
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 "[-]"

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Try this:

    Code:
    /* 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;
    }
    Code:
    <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;

    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>

  12. #12
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot....
    You really helped me a lot

    Thank you...keep up the good work bro..


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •