Integrating CMS with Accordion Menu - tips would be helpful

9 posts by 3 authors in: Forums > CMS Builder
Last Post: December 6, 2010   (RSS)

By meg - September 14, 2010

So I have this accordion menu that I'm trying to integrate with the CMS, but haven't had luck yet. Can anyone give me some tips?

A sample of the original code:
<div class="arrowlistmenu">
<h3 class="menuheader" style="cursor: default"><a href="#" class="toc">Overview</a></h3>
<div></div>

<h3 class="menuheader expandable"><a href="#" class="toc">For Sponsors</a></h3>
<ul class="categoryitems">
<li><a href="#" class="toc">Recent Developments</a></li>
<li><a href="#" class="subexpandable">Services</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="#" class="toc">Overview</a></li>
<li><a href="#" class="toc">Program Design</a></li>
<li><a href="#" class="toc">Support</a></li>
<li><a href="#" class="toc">Communication &amp; Education</a></li>
</ul>
</li>
<li><a href="#" class="toc">Welcome New Administrators</a></li>
<li><a href="#" class="toc">Annual Enrollment</a></li>
</ul>

<h3 class="menuheader expandable"><a href="#" class="toc">Case Studies</a></h3>
<ul class="categoryitems"></ul>

</div>

There are three tiers to this accordion menu. In the main layout, this accordion menu is also connecting to a "tabbing" script, allowing viewers to navigate through the content and sub-content without the page refreshing. The tabbing function works just fine, but the accordion menu lists don't properly translate.

How I'm using this with the CMS:
This section is a multi-listings section. Within each listing, there are assigned checkboxes that will indicate what tier the menu item will be on: 1st, 2nd and 3rd.

The problem I'm facing is activating the <ul> before and after the tiers, along with a variation of the second tier that has the </li> close tag after the 3rd tier <ul>.

Any suggestions?

Here's what I came up with that DIDN'T work, if that's any kind of basis for comparison...
Since the top menu item is a separate DIV, I made a separate checkbox for that - which works fine.

It might be best of someone looked at this in more detail on my server, come to think of it....


<?php foreach ($institutions_subcategoriesRecords as $record): ?>
<?php if($record['top_menu_item']): ?><h3 class="menuheader" style="cursor: default"><a href="#" class="toc"><?php echo $record['title'] ?></a></h3><?php endif ?><?php endforeach ?><div></div>
<?php foreach ($institutions_subcategoriesRecords as $record): ?>
<?php if($record['1st_tier']): ?><h3 class="menuheader expandable"><a href="#" class="toc"><?php echo $record['title'] ?></a></h3><?php endif ?>
<?php if($record['1st_tier_drop_down']): ?><ul class="categoryitems"><?php endif ?>
<?php if($record['2nd_tier']): ?><li><a href="#" class="toc"><?php echo $record['title'] ?></a></li><?php endif ?>
<?php if($record['2nd_tier_with_3rd_tier']): ?><li><a href="#" class="subexpandable"><?php echo $record['title'] ?></a><?php endif ?>
<?php if($record['2nd_tier_with_3rd_tier']): ?><ul class="subcategoryitems" style="margin-left: 15px"><?php endif ?>
<?php if($record['3rd_tier']): ?><li><a href="#" class="toc"><?php echo $record['title'] ?></a></li><?php endif ?>
<?php if($record['2nd_tier_with_3rd_tier']): ?></ul><?php endif ?>
<?php if($record['2nd_tier_with_3rd_tier']): ?></li><?php endif ?>
<?php if($record['1st_tier_drop_down']): ?></ul><?php endif ?>
<?php endforeach ?>

Re: [meg] Integrating CMS with Accordion Menu - tips would be helpful

By Chris - September 14, 2010

Hi meg,

(This is a really complicated accordion menu! Usually you can use a Category Menu to automatically generate nested <ul>s for you with the '_listItemStart' and '_listItemEnd' pseudo fields.)

I believe the only problem with your approach is that your last three IFs aren't doing what you expect. Instead of outputting a </ul> right away for certain record, you'll want to save that </ul> until after you've run through all the records with higher tiers.

Specifically, after finding a 2nd_tier_with_3rd_tier record, you'll want to output "</ul></li>" as soon as you run into a record that's not 3rd_tier (or at the end of the foreach.) Also, after finding a 1st_tier_drop_down, you'll want to output "</ul>" as soon as you run into the next 1st_tier record (or at the end of the foreach.)

I think your solution will end up looking something like this:

<?php $tier1_buffer = ''; ?>
<?php $tier2_buffer = ''; ?>
<?php foreach ($institutions_subcategoriesRecords as $record): ?>


<?php if(!$record['3rd_tier'] && $tier2_buffer): ?>
<?php echo $tier2_buffer ?>
<?php $tier2_buffer = ''; ?>
<?php endif ?>

<?php if($record['1st_tier'] && $tier1_buffer): ?>
<?php echo $tier1_buffer ?>
<?php $tier1_buffer = ''; ?>
<?php endif ?>



<?php if($record['top_menu_item']): ?>
<h3 class="menuheader" style="cursor: default"><a href="#" class="toc"><?php echo $record['title'] ?></a></h3><div></div>
<?php endif ?>

<?php if($record['1st_tier']): ?>
<h3 class="menuheader expandable"><a href="#" class="toc"><?php echo $record['title'] ?></a></h3>
<?php if($record['1st_tier_drop_down']): ?>
<ul class="categoryitems">
<?php $tier1_buffer = '</ul>' ?>
<?php endif ?>
<?php endif ?>

<?php if($record['2nd_tier']): ?>
<li><a href="#" class="toc"><?php echo $record['title'] ?></a></li>
<?php endif ?>

<?php if($record['2nd_tier_with_3rd_tier']): ?>
<li><a href="#" class="subexpandable"><?php echo $record['title'] ?></a>
<ul class="subcategoryitems" style="margin-left: 15px">
<?php $tier2_buffer = '</ul></li>' ?>
<?php endif ?>

<?php if($record['3rd_tier']): ?>
<li><a href="#" class="toc"><?php echo $record['title'] ?></a></li>
<?php endif ?>

<?php endforeach ?>


<?php echo $tier2_buffer ?>
<?php echo $tier1_buffer ?>

I hope this helps! Please let me know if you have any questions.
All the best,
Chris

Re: [chris] Integrating CMS with Accordion Menu - tips would be helpful

By meg - December 1, 2010

Hey Chris,

Sorry for such a delayed reply. This client had my hands in other print materials and now I'm back to building the CMS. This menu almost works perfectly. Good job so far, BTW. You def know what you're doing. So, please compare these files and see where the problem is. If you need more info to resolve this...let me know:

Page/Menu without the CMS as it show appear:
http://www.emeritihealth.org/individuals.php

Page/Menu with the CMS - it doesn't close the second tier properly:
http://www.emeritihealth.org/individuals1.php

I promise to send you a bottle of wine if you fix this glitch for me - thank you thank you!!

Re: [meg] Integrating CMS with Accordion Menu - tips would be helpful

By Chris - December 1, 2010

Hi meg,

Can you please attach the complete PHP source code of your individuals1.php page?
All the best,
Chris

Re: [chris] Integrating CMS with Accordion Menu - tips would be helpful

By meg - December 1, 2010

Thank you!
Attachments:

individuals1.php 6K

Re: [meg] Integrating CMS with Accordion Menu - tips would be helpful

By Chris - December 2, 2010

Hi meg,

From the looks of your example URL, you're missing some </ul></li> tags to close off your 2nd_tier_with_3rd_tiers. The only way I can see this happening is if you have some records with both '2nd_tier_with_3rd_tiers' and '3rd_tier' enabled. Can you make sure you don't have any records with contradictory flags?
All the best,
Chris

Re: [chris] Integrating CMS with Accordion Menu - tips would be helpful

By meg - December 3, 2010

Of course! Thanks for pointing out my sloppy code skills. [:P] I should probably have someone QC on my end. BTW - I think your product is amazing and I want to send a gift to you all - where should I send it??

Re: [meg] Integrating CMS with Accordion Menu - tips would be helpful

By Chris - December 6, 2010

Hi meg,

That's not necessary at all, but if you're adamant, our mailing address is:

interactivetools.com, inc.
#201 - 2730 Commercial Drive
Vancouver, BC CANADA
V5N 5P4

I'm just glad you got everything working! :)
All the best,
Chris