mega menu: detect last child of menu with if (statement) in view.php

Permalink
I am writing a tab/mega menu and need help detecting the last child in view.php. I have detected the parent page in view.php with:

if ($thisLevel == $lastLevel) {
echo("< parent <div> >"); }

this works fine, but I don't know what command or if() logic to detect the last child of the <ul>, where I want to close the div:

echo("< parent </div> >");

the final html output should be in this format:

<li class="mega">Parent
<div class="link-content">
<ul>
<li>Child
<ul>
</div>
</li>

I have tested the javascript: view.js and stylesheet view.css works fine,

just need help to put </ul and </div after last child.

p.s. if you look at view.php you can see I subtituted where the original echo '<ul>' tags where with numbers to understand the logic. If you try it in C5 as custom block you will see it partially working.

thanks for your help

1 Attachment

 
adavis replied on at Permalink Reply
adavis
Did you have any luck finishing this up?
justinjools replied on at Permalink Reply
Yes I finished it about October last year. I have a demo up here:
http://www.healthylifeessex.org.uk/c54/...

It dynamically reads the parent and child menu items, I tested it down to 3 child levels. The menu is all formatted with CSS. If you look at view source you can see the commenting. I would be happy to share the code with you.
justinjools replied on at Permalink Reply 1 Attachment
Hi, everything is in blocks/autonav/templates/mega_menu:
view.css, view.js. view.php

I have also included the pages template in themes/keepitsimple
I doubt if you need this but may help to see how it fits together.

Let me know how you get on with it. I did plan to release it to the community but never got around to it, so pleased to get your response. I tested it quite rigorously and devoted over 4 weeks getting it right.

Regards,
Justin Jools
justinjools replied on at Permalink Reply
p.s. are you re-designing the I-Evolve site? It has a distinctly cold techie feel unless that is intentional, UX is definately low on their list of priorities.
Pritam replied on at Permalink Reply
I tried it and it looks and works great, just what I was looking for, I had already asked one of the members of the forums to get one done, but unfortunately, he still hasn't had much success and its been quite some time .
justinjools replied on at Permalink Reply
Hi Pritam,

Glad you like it. Just wanted to mention: please check the commenting to see the HTML lists are correct (W3C compliant). I did test it quite vigorously and it looks fine but would be good to get your evaluation too.
The only thing I noticed by looking at my site Healthy Life Essex is that it misses a </li> right at the the last menu list.

<li class="mega parent p12"><span><a href="/c54/index.php/group2/">Our Essex</a></span> ! first <li>
<ul>
<div class="dv6 list">
<li class="sub s1"><a href="/c54/index.php/group2/arts/">The Arts</a></li>
<li class="sub s2"><a href="/c54/index.php/group2/essex/">Our Essex</a></li>
</div><!-- /dv -->
</ul>
!misses </li> here
</ul><!-- /menu -->

I think it was just an oversight and can be remedied by adding </li> at the end of view.php code:

$thisLevel = 0;
/* for ($i = $thisLevel; $i <= $lastLevel; $i++) {
echo("</li>\n</ul>\n");
} */
echo("</li>\n");
if ($thisLevel == 0) {
echo("</div><!-- /dv -->\n");
}
echo("</ul>\n !add </li>\n here!");
echo "\n</ul> <!-- /menu -->\n</div><!-- /mega-menu -->";

Please let me know what you do with this, I would love to see it on a site you are working on.
justinjools replied on at Permalink Reply
Intheframestudio is one very retro 90's looking site: atleast get rid of the scrolling banner and the globe animation. Have a look at web 2.0 design:

http://www.webdesignfromscratch.com/web-design/web-2-0-design-style...

This got me along the right path a couple of years ago, but maybe you are developer and not a designer. Still not really great at design but not too bad either.
Pritam replied on at Permalink Reply
Hey Justin,

You're very much right, that our site is a retro looking one as it was made back in 2002 by my partner, I was looking into business development back then, but now have swapped roles and I began to learn web-design & concrete 5.

Thanks for the link, It would be helpful resource.
Pritam replied on at Permalink Reply
I tried adding the </li> closing tag as per your instructions above, but I am still not getting the last elements to show properly you can checkthe nav herehttp://intheframestudio.com/hardnav/... , Also the drop down div shows proper in Firefox and Chrome, it goes haywire in IE8, herehttp://imageshack.us/photo/my-images/197/hardnavss.jpg/... you can check the screen shot for IE8.

Also, here you could find the menu design that I am trying to achievehttp://imageshack.us/photo/my-images/193/finalmegamenu.jpg/... So if you wish to check the modification that I was doing, please check your pm for the access to the dashboard and you can switch the template for the nav that i was trying to modify. Like if you check the above image link, basically I am trying to pull up thumb images attribute instead of links on the second list item level, I created a thumbnail attribute and added them the pages, the thumb images show up but 6th and 7th list items do not display properly.

Hope you can point me in the right direction.
Pritam replied on at Permalink Reply
I tried adding the </li> closing tag as per your instructions above, but I am still not getting the last elements to show properly you can checkthe nav herehttp://intheframestudio.com/hardnav/... , Also the drop down div shows proper in Firefox and Chrome, it goes haywire in IE8, I am attaching the screen shot.

Also, here you could find the menu design that I am trying to achievehttp://imageshack.us/photo/my-images/193/finalmegamenu.jpg/... So if you wish to check the modification that I was doing, please check your pm for the access to the dashboard and you can switch the template for the nav that i was trying to modify. Like if you check the above image link, basically I am trying to pull up thumb images attribute instead of links on the second list item level, I created a thumbnail attribute and added them the pages, the thumb images show up but 6th and 7th list items do not display properly.

Hope you can point me in the right direction.
Pritam replied on at Permalink Reply
Hi Justin,

Adding the missing </li> element still does not display the last level menus properly.

Here's the code

<?
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   global $c;
   if ($c->isEditMode()) {
      echo("<div class=\"mega_menu\" style=\"position:inherit!important;\">\n<ul id=\"menu\">\n"); }
   else {
      echo("<div class=\"mega_menu\">\n<ul id=\"menu\">\n"); }
   $nh = Loader::helper('navigation');
   $divcount = 0;
   $submenu = 0;
   $parent = 0;
   foreach($aBlocks as $ni) {
      $_c = $ni->getCollectionObject();
      if (!$_c->getCollectionAttributeValue('exclude_nav')) {


hope you can help !!
Pritam replied on at Permalink Reply
Got this to work but only in firefox and chrome, in IE it still is the same. Besides adding the missing <\li> tag I also had to comment out an extra closing </div> at line 44, that was creating a problem.

Now I wonder why it does not displayed properly in IE, hope someone can point out whats going wrong.

http://intheframestudio.com/hardnav/...
justinjools replied on at Permalink Reply
It works in IE8, it seems you have put a </ul> (and </li>) tag in the wrong
place after Lutron</a></ul> /n </li>

<ul> <li class="sub2 s1"><a href="
/hardnav/index.php/products/automation/speaker/<http://intheframestudio.com/hardnav/index.php/products/automation/speaker/>
">Speakercraft</a></li> <li class="sub2 s2"><a href="
/hardnav/index.php/products/automation/crestron/<http://intheframestudio.com/hardnav/index.php/products/automation/crestron/>
">Crestron</a></li> <li class="sub2 s3"><a href="
/hardnav/index.php/products/automation/lutron/<http://intheframestudio.com/hardnav/index.php/products/automation/lutron/>
">Lutron</a></ul> </li>
It is just a matter of playing around of where to put the </li> at the end
of the code, you should put some comments in to see where it prints out.

When I get some time I'll have a look.
adavis replied on at Permalink Reply
adavis
Well, we are a technology company that sells phone systems and data services... It is pretty appropriate (although admittedly in need of a refresh).
adavis replied on at Permalink Reply
adavis
Thanks for the code, I will try it out. In the meantime I created my own solution, which is a little more freeform. I used the scrapbook display add-on to create a menu from a scrapbook (of anything). So in this way you can add content (or whatever you like) to the dropdowns as well as auto nav items...