How to generate neat multi level category menu

I'm looking to generate neat multi level UL LI category menu.

Actually I'm working on a custom theme, and theme has all categories listed as main menu bar on top.

Look here, http://users.tpg.com.au/j_birch/plugins/superfish/#sample4 . The menu I've built is similar to Navbar Style Menu on referred link. To get this work I want to have following markup:

<ul>
   <li><a href="#">Parent Category</a>
         <ul>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
         </ul>
   </li>
   <li><a href="#">Parent Category</a>
         <ul>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
         </ul>

   </li>
   <li><a href="#">Parent Category</a></li>
   <li><a href="#">Parent Category</a>
         <ul>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
                <li><a href="#">Child Category</a></li>
         </ul>

   </li>
</ul>

And then there will be some jquery as on superfish menu that will be necessary to apply styling and classes dynamically. I have done with implementing this with static menu. And tried to look into making it dynamic. But didn't have a clue.

Currently NC generates menu with only parent category and not with child category. I just want to have markup like above generated with all parent category and child category. Once I have this, I can apply styles & implement superfish kind of menu.

Please let me know if you want any more information. Any help is appreciated. Thank you in advance.

Awaiting your response.

jariwalakrunal wrote:

See my first response to
https://www.nopcommerce.com/boards/t/11858/sub-cat-is-display-when-page-is-load.aspx

jariwalakrunal wrote:

See my first response to
https://www.nopcommerce.com/boards/t/11858/sub-cat-is-display-when-page-is-load.aspx

@New York,

Hi, thank you for help. I'll look into this and update.

@Newyork

Thank you for your update. I have tried this. This lists all categories irrespective of parent/child relationship in single list. But I need to generate a list with clear parent/child relationship in way that list child categories under parent categories li item in ul - li.

If you look at the original post, you'll get an idea what I'm talking about. If this is achieved this will enable designers to apply clean and neat styles and js. There are others also looking for similar thing.

I'm expecting your guide on how to do it, where to apply my custom loop and how. Thank you in advance.

I've not used either SuperFish or SuckerFish, but my changes provide the entire tree/list structure, so all you need to do is apply appropriate css styles, and use SuperFish as they describe.
Yuo may want to try this first:
http://css.maxdesign.com.au/listamatic/horizontal01.htm

New York wrote:

@New York,

Thank you for your response. I've tried that, but it keeps all category irrespective of child / parent in the same UL. If you guide me how can I apply another UL inside parent LI to list all child of that parent, then it would be great to apply styles for all of nopcommerce designers.

Moreover, Superfish or SuckerFish would work only on property nested UL, LI. Current list generated is only under single UL, hence we can not apply styles to the second level or third level. Providing this in nopcommerce would be a great enhancement design wize.

I'm awaiting your response on the same. Thank you once again to help me.

Yes, I see that CategoryNavigation view emits the indenting of the category level by adjusting the margin-left

   <text>style="margin-left: @(category.NumberOfParentCategories * 15)px"</text>

You'll need to re-write the view to emit <ul> and </ul> at the appropriate times instead.  The basic algorithm is emit when the NumberOfParentCategories transitions (increases or decreases from previous).


But, that brings up an interesting point I'd like to direct to the nop team...
There seems to be a dependency between the Controller and the View because the controller currently returns only the selected item expanded - the view can only display what it gets.   Why not let the Controller return the entire tree (CategoryNavigationModel would also include ParentCategoryId), and let the view decide how to render it?  I think this flexibility would allow the developer to choose different layouts without also having to make controller changes.

@Newyork,

Hmmm, I think yes that would be the best option. I have modified views as well as controllers to render required UL - LI structure with child items wrapped in another UL inside parent LI, but that is not working as required. As I think, the current menu  being generated is using a different loop then required, and I tried to customize it but it also didn't worked as expected.

If you can guide us where do I need to make changes, I will try again today.

And doing changes suggested by you will definitely help lot of nopcommerce designers to get more flexible menu.

Awaiting your response.

I had the exact same problem.

Trying to change the view itself was difficult with what was being passed to it by the controller. I took a stab at changing it as it's been suggested so that the controller returns the entire tree. From there recursive is used in a partial view to render the proper formatting in the view, but you could do whatever you wanted in the view with the full object too.

I'd love to have some feedback on the way I did it, being new to the platforms (.net/nop) myself. There are a few files to change, but the changes are very simple, though they do envolve the .cs files so you will need to be able to recompile.

My post is at:

https://www.nopcommerce.com/boards/t/2558/change-category-navigation-to-correct-xhtml.aspx