Thread

I’m trying to make a “mega menu” within EE Categories. I already have the HTML and CSS working and now trying to get it working within EE is proving difficult (for me anyway).

This menu will be for a specific category group. It then basically needs to display need to display the top level categories and any first level child categories (sub-categories). I know I could use the the standard channel:categories tag to create a list, but this really doesn’t give me anywhere near the amount of control I need.

The format I’m trying to achieve is:

<ul id="menuleft" class="group">
    <li class="drop"><a href="http://category">Top Level Product Category</a>
        <!-- Begin container -->
        <div class="dropdown">
            <h2>Top Level Product Category</h2>
<p>            <ul><br />
                <li><br />
                    <a href="#">A Sub Category</a><br />
                    A brief paragraph about this particular category. It could be long if required but best to keep it short.<br />
                </li><br />
                <li><br />
                    <a href="#">A Sub Category</a><br />
                    A brief paragraph about this particular category. It could be long if required but best to keep it short.<br />
                </li><br />
                <li><br />
                    <a href="#">A Sub Category</a><br />
                    A brief paragraph about this particular category. It could be long if required but best to keep it short.<br />
                </li><br />
            </ul><br />
        </div><br />
        <!-- End container --><br />
    </li><br />
    <li class="drop"><a href="http://category">Top Level Product Category</a><br />
        <!-- Begin container --><br />
        <div class="dropdown"><br />
            </p><h2>Top Level Product Category</h2>
<p>            <ul><br />
                <li><br />
                    <a href="#">A Sub Category</a><br />
                    A brief paragraph about this particular category. It could be long if required but best to keep it short.<br />
                </li><br />
                <li><br />
                    <a href="#">A Sub Category</a><br />
                    A brief paragraph about this particular category. It could be long if required but best to keep it short.<br />
                </li><br />
                <li><br />
                    <a href="#">A Sub Category</a><br />
                    A brief paragraph about this particular category. It could be long if required but best to keep it short.<br />
                </li><br />
            </ul><br />
        </div><br />
        <!-- End container --><br />
    </li><br />
</ul>

I’m also looking to lose the category url indicator as I’m using Low Seg2Cat to create cleaner URLs.

Please help - really need to get this working ASAP (like a week ago)  :S

Thanks, Richard.

[Mod Edit: Moved to the Community Help forum]

Richard,

I have had good success with both GWcode Categories or GWcode CatMenu recently.
They would give you more control than the standard categories tag although your example above looks like the native categories tag would suit it fine

Hi again John,

This is becoming a habit 😉
Apologies, I absolutely love EE but still a relative newb and I find when I need to do anything complicated, especially around Categories, then I get a little confused. There always seems to be about a million different ways to do things and I often feel like I’m hacking it a little.

Anyway… onwards; thanks for your reply. I have just started looking at GWcode Categories and GWcode CatMenu. I’m not sure I can achieve exactly the format how I want, but I’ll investigate further.

I’d love to just use the native Categories tag, but can’t see how I can modify it’s structure to achieve what I need in this instance. Also as mentioned, I’m using Low Seg2Cat and stripping out the category url indicator, so I would need to also need to customise the urls. Please correct me if I’m wrong, as mentioned, my knowledge is very limited.

Thanks, Richard

Hi again John,

Just thought I’d let you know that I got it working. I used a combination of this article by 3 Roads Media. Their method was for a 1.6 version so I had to make some changes as they were using the Subcategories plugin.

As mine is for an EE2 site, I almost used the Child Categories plugin, but after your suggestion I managed to use GWcode Categories.

Without having to adjust my CSS or HTML structure it now works perfectly. I basically ended up with the following:

In my left menu template:

<ul id="menuleft" class="group">
{exp:channel:categories channel="products" parent_only="yes" style="linear"}
    <li class="drop">
        {exp:query sql="SELECT cat_id FROM exp_categories WHERE parent_id = '{category_id}' LIMIT 1"}
        <a href="http://{path=products/{category_url_title}}"> 0} class="fly"{/if}>{category_name}</a>
        {if '{total_results}' > 0}{embed="_includes/subcategories" subcat_id="{category_id}" catname="{category_name}"}{/if}
        {/exp:query}
    </li>
{/exp:channel:categories}
</ul>

Then I have an embedded template called ‘subcategories’ containing the following:

<div class="dropdown">
    <h2>{embed:catname}</h2>
<p>    <ul><br />
        {exp:gwcode_categories cat_id="{embed:subcat_id}" depth="2" style="linear"}<br />
            <li><br />
                <a href="http://{path=products/{cat_url_title}}">{cat_name}</a><br />
            </li><br />
        {/exp:gwcode_categories}<br />
    </ul><br />
</div>

Not sure if I could have made this cleaner? i.e. not used the sql query and just relied on GWcode Categories, but couldn’t figure out how to add the formatting for the top level and separate for the child categories. I did try asking on their support forum, but they’re not excepting comments at the moment.

Thanks again, Richard.

Me again,

Just found another solution which seems cleaner. Using the Categories plugin by Addon Bakery. This appears to work and I’m not using a plugin and a SQL query - just one plugin instead.

New code if anyone cares:

<ul id="menuleft" class="group">
{exp:categories category_group_id="1"}
    <li class="drop">
        <a href="http://{path=products/{category_url_title}}">{category_name}</a>
        {if has_children}
        <div class="dropdown">
            <h2>{category_name}</h2>
<p>            <ul><br />
                {children}<br />
                    <li><br />
                        <a href="http://{path=products/{child_category_url_title}}">{child_category_name}</a><br />
                    </li><br />
                {/children}<br />
            </ul><br />
        </div><br />
        {/if}<br />
    </li><br />
{/exp:categories}<br />
</ul>

Hi Richard,

Great to hear you solved the problem! As the creator of GWcode Categories / GWcode CatMenu (thanks for mentioning both John!), I try to visit these forums as much as possible to see if people are having category related problems that I can help with. By doing so, if I find anything that can’t be done (using standard EE tags or not), I try to come up with a new feature for my plugins so it will be possible.

You found a perfect solution with Addon Bakery’s / bjornbjorn’s plugin so this isn’t going to help you much, but I’ll dig into my code to see if a problem like yours can also be solved (easily - without embed/query) with my plugins. If not, I’ll try to come up with a new version that should be able to tackle your problem.

I’m sorry to hear you tried posting your question on my support pages and received a message that we’re not accepting comments, because we are actually 😊 I’ve just tested by adding a test comment and it worked just fine, so I’m not sure what the problem was. But if you need any help regarding categories in the future, don’t hesitate to let me know. I’m on twitter as well.

Again, great to hear you found a great solution and thanks for posting the code for others to see!

Cheers,
Leon

Hi Leon,

Thanks, your plugins do look great. I’m pretty sure I couldn’t quite achieve the same solution with your plugin, without using a SQL query as well, but might be wrong.

Out of curiosity, can you use custom category fields with your plugin? I still have to create a different ‘mega menu’ for this site which will require splitting out category into 2 rows, and I’m thinking I might need to add a custom category field to do it.

Here’s my static code - I’m using the div class=“group” to make the split:

<div class="dropdown">
    <h2>Industries</h2>
<p>    <div class="group"><br />
        <div class="col"><br />
            </p><h3><a href="#">Aerospace</a></h3>
<p>            <ul>  <br />
                <li><a href="#">Aerodynamics</a></li><br />
                <li><a href="#">Component Tests</a></li><br />
                <li><a href="#">Fuel, Hydraulic and oil monitoring</a></li><br />
                <li><a href="#">Navigation</a></li><br />
                <li><a href="#">Position</a></li><br />
                <li><a href="#">Structural test</a></li><br />
                <li><a href="#">Torque measurement</a></li><br />
            </ul><br />
        </div><br />
        <div class="col"><br />
            </p><h3><a href="#">Automotive</a></h3>
<p>            <ul>  <br />
                <li><a href="#">Aerodynamic</a></li><br />
                <li><a href="#">Car set up</a></li><br />
                <li><a href="#">Crash</a></li><br />
                <li><a href="#">Exhaust</a></li><br />
                <li><a href="#">Fuel, hydraulic and oil monitoring</a></li><br />
                <li><a href="#">Steering / suspension</a></li><br />
                <li><a href="#">Torque measurement</a></li><br />
            </ul><br />
        </div><br />
        <div class="col"><br />
            </p><h3><a href="#">Power</a></h3>
<p>            <ul>  <br />
                <li><a href="#">Cooling system pressure</a></li><br />
                <li><a href="#">Component testing</a></li><br />
                <li><a href="#">Oil & hydraulic</a></li><br />
                <li><a href="#">Structural test</a></li><br />
                <li><a href="#">Torque measurement</a></li><br />
            </ul><br />
        </div><br />
    </div><br />
    <div class="group"><br />
        <div class="col"><br />
            </p><h3><a href="#">Sub-Sea</a></h3>
<p>            <ul>  <br />
                <li><a href="#">Oil & hydraulic</a></li><br />
                <li><a href="#">Depth</a></li><br />
                <li><a href="#">Force measurement</a></li><br />
                <li><a href="#">Navigation</a></li><br />
                <li><a href="#">Structural test</a></li><br />
                <li><a href="#">Position</a></li><br />
            </ul><br />
        </div><br />
        <div class="col"><br />
            </p><h3><a href="#">Rail</a></h3>
<p>            <ul>  <br />
                <li><a href="#">Bolt torque</a></li><br />
                <li><a href="#">Pneumatic, Oil and hydraulic</a></li><br />
                <li><a href="#">Structure test</a></li><br />
                <li><a href="#">Track loading</a></li><br />
                <li><a href="#">Navigation</a></li><br />
            </ul><br />
        </div><br />
        <div class="col"><br />
            </p><h3><a href="#">General</a></h3>
<p>            <ul>  <br />
                <li><a href="#">Torque measurement </a></li><br />
                <li><a href="#">Reference/ Calibration standard sensors</a></li><br />
                <li><a href="#">Robotic sensors</a></li><br />
                <li><a href="#">Structure test</a></li><br />
                <li><a href="#">Web tension measurement</a></li><br />
                <li><a href="#">Fuel, hydraulic and oil monitoring</a></li><br />
            </ul><br />
        </div><br />
    </div><br />
</div>

You can see how that works here, by hovering over ‘Industries’ in the top nav: Demo

I could potentially change this to use nth-child(3n+3) but that isn’t going to work in most IEs unfortunately.

Cheers,

Richard.

Hi Richard,

Ah yes, quite the menu there, looks great!

To answer your question, yes, both plugins support custom category fields.

But, both this new “problem” and the previous one have revealed a weak spot in my plugins that I haven’t been aware of, they don’t have the option to loop through child categories the way that’s needed to create menus such as these. Or not easily anyway.

Don’t get me wrong, getting a list of categories and their child categories is easy, but the markup will be different than what you need (nested li tags, which won’t work in your case).

I’ll try to see if I can tweak the code a bit to produce output like this. I’ll keep you posted!

Hi Leon,

Thanks, nothing compared to your EE ninja skills! 😊

Good to know about the custom category fields.

Yep, unfortunately I couldn’t seem to find a solution that let me add extra styling to the parent and child categories, apart from that Addon Bakery one, which works with the my previous problem (left menu), but don’t think I’m going to be able to use it to solve the top level menu we’re now discussing.

If you can do anything that allows for additional control/styling then that would be super cool!

Tbh, I was hoping to use the Structure plugin for all the sections on the site, except really the Products area, which does need to rely on Categories. This would then enable be to create that ‘Industries’ using Structure pages instead of Categories. Unfortunately can’t use Structure on this project as it apparently doesn’t play nice with DataGrab, and the client needs to be able to import Product data on a fairly regular basis… nightmare!

Anyway, if you can do something, cool. If not, no worries, it’s an awesome plugin anyway 😊

Thanks and regards,

Richard

Thanks Richard!

It’s definitely going to be a challenge. The plugin (I’m referring to GWcode Categories here as that’s probably the one I’ll try to tweak) does have a lot of parameters and variables to choose from to try to solve a lot of common category problems, but it definitely can’t do everything as everyone need different results.

On a side note, I was trying something on my local installation and was able to create the code you posted with standard EE tags. The only downside is that it isn’t very flexible. If you decide to add a category somewhere, you’d have to change things.

But, if you are 100% sure the categories aren’t going to be changed, you could use this:

<div class="dropdown">
    <h2>Industries</h2>
<p>{exp:channel:categories channel="richard" style="linear"}<br />
    {if count == 1 OR count == 23}<br />
        <div class="group"><br />
    {/if}<br />
    {if count == 1 OR count == 9 OR count == 17 OR count == 23 OR count == 30 OR count == 36}<br />
            <div class="col"><br />
                </p><h3><a href="#">{category_name}</a></h3>
<p>                <ul><br />
    {if:elseif count == 8 OR count == 16 OR count == 29 OR count == 35}<br />
                    <li><a href="#">{category_name}</a></li><br />
                </ul><br />
            </div><br />
    {if:elseif count == 22 OR count == 42}<br />
                    <li><a href="#">{category_name}</a></li><br />
                </ul><br />
            </div><br />
        </div><br />
    {if:else}<br />
                    <li><a href="#">{category_name}</a></li><br />
    {/if}<br />
{/exp:channel:categories}<br />
</div>

You may want to use that while I work on the plugin 😊

Leon, you are too kind!

I appreciate that mine might be quite specific requirements and you can’t cater for everyone so no worries. You’re certainly doing a sterling job.

Thanks for that code, just leaving the office now so will give it a try tomorrow. It might work in the interim, but the client will need to be able to add/subtract categories, so not going to be a long term solution, but really appreciated.

Thanks again Leon.

Regards,

Richard.

Hi Richard,

Yeah, I was just having some fun trying to get as close as possible without using a plugin or query tags 😊 I was surprised I could even get this far. You’re still able to rename categories and change the order, so long as the number of categories in each section remains the same. But in most cases that’s hardly a solution.

Anyway, I wanted to let you know that I have this working on a new version for GWcode Categories, just need to do some further testing to get the fastest execution time and then convert it to EE1 as well before I upload it. It will then probably be ready on Monday. If you need it before that time, let me know!

Leon,

Do you ever sleep? 😉

Sounds cool and I’m good. Actually away until until late Tuesday so won’t be back on the project until Wednesday.

Thanks man.

Regards,

Richard

Hi guys,

I’ll now move this thread into the Community Help forum since you’re discussing how to tackle this with Leon’s addon.

Cheers

Greg

Thanks Greg!

Richard,

Like I said in my previous post, I have created everything so that you can generate the output you need.
I’ve done some further testing the last couple of hours and will continue to do so for the next couple of days probably (I have a fulltime job so I need to do this whenever i have some free time).

It’s a pretty big change code wise, so I need to be 100% sure everything is fully tested before I release it. If you want, I can already send you a pre-release so you can get on with things.

With the new version, I’m able to generate the code for both problem 1 and 2. Since you already have a solution for problem 1, I’ll skip that one and only show the code you’d use for your 2nd problem:

<div class="dropdown">
<h2>Industries</h2>
<p>{exp:gwcode_categories channel="richard" style="linear"}<br />
    {if depth1_start AND depth1_start_count == 1} {!-- opening code for the first main/root category --}<br />
            <div class="group"><br />
    {/if}<br />
    {if depth1_start} {!-- opening code for main/root category --}<br />
                <div class="col"><br />
                    </p><h3><a href="#">{cat_name}</a></h3>
<p>    {/if}<br />
    {if depth2_start}<br />
                    <ul> {!-- open ul for child categories --}<br />
    {/if}<br />
    {if depth == 2} {!-- show child categories --}<br />
                        <li><a href="#">{cat_name}</a></li><br />
    {/if}<br />
    {if depth2_end} {!-- close ul for child categories --}<br />
                    </ul><br />
    {/if}<br />
    {if depth1_end}<br />
                </div> {!-- closing code for main/root category --}<br />
    {/if}<br />
    {if depth1_end AND depth1_end_count == 3} {!-- if the 3rd main/root category has been displayed --}<br />
            </div><br />
            <div class="group"><br />
    {/if}<br />
    {if depth1_end AND depth1_end_count == 6} {!-- if the 6th main/root category has been displayed --}<br />
            </div><br />
    {/if}<br />
{/exp:gwcode_categories}<br />
</div>

I’ve added some comments so you can see what I’m doing. Don’t worry, without the comments, the code will look much cleaner 😊

I hope I’ve set up everything as flexible as possible so these new features are able to tackle most common problems.

Let me know when you need it! Until then, I’ll continue my testing 😊