Click here to Skip to main content
15,036,737 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
I have categories and its subcategories list...I need to display subcategories when mouse move over the category or click the category...Just check the site http://www.olx.in/posting.php?src=8[^] .... I need to show categories and subcategories like the link.. categories in one column, subcategories in another colunm...
Posted

1 solution

I trimmed the same code for you hope, it'll help you to write your own Code...
please don't copy and paste.
write your own code.


Amir



HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<link rel="stylesheet" type="text/css" href="http://static03.olx-st.com/frontEnd/in/assets/css/v4/newposting-69aaaae2.css" media="screen" /> <!-- Layout Css you can define yours -->
<link rel="stylesheet" type="text/css" href="http://static02.olx-st.com/frontEnd/in/assets/css/src/olx/v5/olx-icon-font-69aaaae2.css" media="screen" /> <!-- This is brining Image of the category-->
<link rel="stylesheet" type="text/css" href="http://static01.olx-st.com/frontEnd/in/assets/css/src/olx/v5/olx-footer-69aaaae2.css" media="screen" />
<script type="text/javascript" src="http://static04.olx-st.com/js/system/cookies-69aaaae2.js"></script>
</head>
<body class="IN posting-categories">
<!-- the-content LAST GENERATED=Tue, 01 Apr 2014 06:54:10 GMT-->

<div class="posting-page">
<div id="supercontainer">
  <div id="category-posting" class="corner-radius">
<h2>&nbsp;</h2>
<div id="home" class="ab-cs">
<h3><span>1</span> Select a category:</h3>
<ul>
<li id="c-830">
<b class="icon-830"></b>Mobiles & Tablets
                            <b class="icon-arrow_right"></b>
<h3><span>2</span> Select a subcategory:</h3>
<ul>
<li id="c-831">
<a href="http://www.olx.in/posting.php?categ_id=831">Mobile Phones</a>
</li>
<li id="c-857">
<a href="http://www.olx.in/posting.php?categ_id=857">Tablets</a>
</li>
<li id="c-832">
<a href="http://www.olx.in/posting.php?categ_id=832">Mobile Accessories</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>



<script type="text/javascript" charset="iso-8859-1" src="http://static02.olx-st.com/js/common-69aaaae2.js"></script>
<!-- Begin JsEnqueuer -->


<script type='text/javascript' >//<![CDATA[

    jQuery('#home.ab-cs > ul > li').mouseenter(function(e) {

        if(jQuery('.cat-activa').length == 0) {
            if(jQuery(this).parent().find('li.cat-hover-new').length == 0) {
                jQuery(this).addClass('cat-hover-new').find('ul').show();
                lastDisplayedL2 = this;
                fixOffset(jQuery(this));
            }
            else {
                var _this = this;
                if(setTimer) {
                    clearTimeout(setTimer);
                }
                setTimer = setTimeout(function(){
                    jQuery(_this).parent().find('.cat-hover-new').removeClass('cat-hover-new').find('ul').hide();
                    jQuery(_this).addClass('cat-hover-new').find('ul').show();
                    lastDisplayedL2 = _this;
                    fixOffset(jQuery(_this));
                },300);
            }
        }
    });


   

_gaqEvent.push(function() {
    jQuery(document).click(function(e) { return _olxga.catchLinkDomain(e); });
});
loadSessionInfo(1, {"seoArea":"India","currentHost":"www.olx.in","searchPages":"http:\/\/www.olx.in\/list.php","dynamicSearchCategory":"http:\/\/www.olx.in\/nf\/cat-CATEGORY\/KEYWORDS","dynamicSearch":"http:\/\/www.olx.in\/nf\/search\/KEYWORDS"});
//]]></script><!-- End JsEnqueuer -->
</body>
</html>
   
v4

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900