Left Menu Accordion using jQuery in AspDotNetStoreFront

There are many AspDotNetStorefront web developer wondering how to implement accordion of categories, manufacture in left menu of AspDotNetStorefront.
In this article, I show you have to create category accordion in left menu of AspDotNetStorefront.
Left Menu Accordion using jQuery in AspDotNetStoreFront

Step 1: Edit rev.categories.xml.config file to display all sub-categories and appropriate accordion format.
Here is code:

In above code, line 30 < xsl:if test="count(child::Entity)&gt;0" > is display all sub category..

Step 2: Apply some style to your Menu using CSS

#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}

Note that in above CSS code, we have applied Round Corner CSS to our menu to improve the look. Although this technique works with all the modern web browser, may be not work in some.

Step 3: Give life to your category menu using jQuery
now, we need jQuery code to make Accordion category menu. Put jQuery code below your XMLPackage Defination.

(!XmlPackage Name="rev.categories"!)
<script type="text/javascript" >
$("#accordion > li > div").click(function () {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();
</script>

If you notice the above code, code Line 10 made the first menu item in accordion menu visible.

If you using AspDotNetStorefront v9 then put below code

<asp:Literal ID="leftNavCat" runat="server" Text="<%$ Tokens:XMLPACKAGE, rev.categories.xml.config%>" />
<script type="text/javascript" >
$("#accordion > li > div").click(function () {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();
</script>

Note: Please don’t put jQuery code in . If you want to put there use event .live() instead of .click().
if its not working 4 you let me know by comment..
Thanks.

12 responses to “Left Menu Accordion using jQuery in AspDotNetStoreFront”

  1. The menu works great! Thank you!
    I’d like to make the menu start out closed and then you can open it by clicking on it. Do you know how to do this? Also I’d like to have the same menu style on the customer service tree menu topic in the left nav, but I’m not sure how to go about that. Any suggestions?

  2. Which file does the code in step 3 go into? I was thinking template.master in the “leftwrap” div.

    Thanks

  3. I can’t seem to make this work. I’ve got to be doing something wrong.

    I replaced in rev.categories.xml.config:

    <xsl:apply-templates select="/root/EntityHelpers

    with your code from step one.

    I added your styling to the style sheet.

    I then replaced the menu code (ctrlEntityCategory) in template.master with your code, including the script (unless the script belongs in the header).

    something’s not right and I think its me. any help would be appreciated.

  4. Hi Ashish,
    Thanks for the nice post. It worked like champ in my case. However as per requirement I need to do two change – can you help me in that – the changes I require are as follows:
    1. I want the site to remeber which menu was open in the left panel on page post. For example I clicked on a submenu under “technology” – which will open a page in the right panel and at the same time left menu will have Technology category open
    2. I also want to go to a page on clicking on the main category like technology or sports
    Can you help me in this?

  5. Great tutorial!! I just have three questions. Is there a way to have the parent category clickable and when you rollover the sub cats flyout to the right? Thanks for you help.

Leave a Reply to Kayla