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
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 & 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
(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.
Chris
Re: [chris] Integrating CMS with Accordion Menu - tips would be helpful
By meg - December 1, 2010
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
Can you please attach the complete PHP source code of your individuals1.php page?
Chris
Re: [chris] Integrating CMS with Accordion Menu - tips would be helpful
By meg - December 1, 2010
Re: [meg] Integrating CMS with Accordion Menu - tips would be helpful
By Chris - December 2, 2010
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?
Chris
Re: [chris] Integrating CMS with Accordion Menu - tips would be helpful
By meg - December 3, 2010
Re: [meg] Integrating CMS with Accordion Menu - tips would be helpful
Could you post your corrected code so we can all learn from it?
Thanks,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Re: [meg] Integrating CMS with Accordion Menu - tips would be helpful
By Chris - December 6, 2010
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 5P4I'm just glad you got everything working! :)
Chris