Display in columns not rows

Hello,

I have edited the mega-menu grid with pictures to work how I need it to but I'm stuck.

Its displaying the categories in rows of 10 with 4 categories across but I need to display them in 3/4 columns across with 12 categories per column.

Is this possible?

Thank you

Hello, JHOPPER!

As far as I understood, you want to have less rows and more categories on a row. For example - 12 categories per row and three or four rows. Consider that if you want to do this, you will have too little space for a category - let`s say your menu is 960px wide and if you have 12 categories each category will be 80px wide.
Anyway, if you want to achieve this, you have to open /Plugins/SevenSpikes.Nop.Plugins.MegaMenu/Views/MegaMenu/CategoryMenuTemplate.WithPictures.cshtml file and find this row: @(Html.DataTable<SevenSpikes.Nop.Plugins.MegaMenu.Models.MegaMenuCategoryModel>(Model.CategoriesModels, 4, "row", "box" . The number "4" sets the number of categories per row. So you can change it freely to 12. The other change is in ~/Plugins/SevenSpikes.Nop.Plugins.MegaMenu/Themes/YOUR-THEME/Content/MegaMenu.css
file and change the width in this rule:

.mega-menu .box {
       width: 80px;
}

I hope this helped!

Hello,

Thank you for the reply but that hasn't quite sorted my problem!

I would like the drop menu to have 3 columns with the sub-categories going down in alphabetical order.

This is my example http://jsfiddle.net/Dnamixup/s9WDX/6/ hover over the first menu item.

The plugin it displays the sub-categories in a row of 4 across alphabetically but I need to display them in columns of 12 alphabetically, so I would have 3 or 4 columns in the drop down.

Thank you

Hi, Steve!

If you want to get this done, you have to write your custom logic in CategoryMenuTemplate.WithPictures.cshtml file. Also you have to change the CSS and the mark-up for the drop down. For example you have to find this piece of code:

<ul class="subcategories">
                    @foreach (var subCategory in item.SubCategories.Take(megaMenuSettings.NumberOfCategories))
                    {
                        <li>
                            <a href="@Url.RouteUrl("Category", new { SeName = subCategory.CategoryModel.SeName })" title="@subCategory.CategoryModel.Name">
                            @subCategory.CategoryModel.Name</a>
                        </li>
                    }

                    @if (item.SubCategories.Count == megaMenuSettings.NumberOfCategories)
                    {
                        <li>
                            <a class="view-all" href="@Url.RouteUrl("Category", new { SeName = item.CategoryModel.SeName })">@T("SevenSpikes.MegaMenu.ViewAllCategories")</a> 
                        </li>
                    }
                </ul>

First you have to sort item.SubCategories and then add your logic in the foreach, i.e. for every three categories create a new column. After that just style them.

Hope that helped you!

Thank you very much for the reply, was very helpful.

Will get to work on it now, hopefully have it sorted by the end of the day.

Thanks again!