css and category menus

12 posts by 3 authors in: Forums > CMS Builder
Last Post: December 1, 2009   (RSS)

By atomicrabbit - September 14, 2009 - edited: September 14, 2009

ok I'm trying to use the code from http://www.cssplay.co.uk/menus/dd_valid.html for styling my (category) menu... Problem is, to be compatible with IE6, it uses conditional if statements between the <li> and <ul> tags on sub-menus. See sample code below:

<div class="menu">
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/about">ABOUT</a></li>

<li><a class="hide" href="/collection">PRODUCTS</a>
<!--[if lte IE 6]>
<a href="/products">PRODUCTS
<table><tr><td>
<![endif]-->
<ul >
<li><a href="/products/product-1">Product 1</a></li>
<li><a href="/products/product-2">Product 1</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>

As you can see, the conditional if statements go in between <li> tags if parents of sub menu's. Adding the beginning conditional if won't be a problem as I can just check if it's not the parent menu, then print the conditional code, then just print $categoryRecord['_listItemStart'].

But the problem comes when printing the end tag, since $categoryRecord['_listItemEnd'] will print the end tag of the last sub-item, the end tag of the sub items list and the end tag of the parent item all at once.

Is it possible to insert the condition if statement BEFORE the close </li> tag of the parent as shown in the code above?

Re: [atomicrabbit] css and category menus

By Chris - September 15, 2009

Hi atomicrabbit,

If I understand correctly, IE6 needs this extra code to be inserted immediately before a nested <ul> and immediately after a nested </ul>?

You can use a regular expression to replace </ul>'s in $categoryRecord['_listItemEnd'] with some extra code. For example:

$newListEnd = $categoryRecord['_listItemEnd'];
$match = '|</ul>|';
$replace = "</ul>\n<!--[if lte IE 6]>\n</td></tr></table>\n</a>\n<![endif]-->\n";
$newListEnd = preg_replace($match, $replace, $newListEnd);
echo($newListEnd);

Does that solve the problem? Please let me know if you have any more questions.
All the best,
Chris

Re: [chris] css and category menus

By atomicrabbit - September 15, 2009

I haven't tested it yet, but what do the pipes | around the </ul> in the $match variable do?

Also, won't that match ALL <ul> tags, not just nested <ul> tags? ... so won't it also match the surrounding <ul> tags around the entire menu?

Re: [atomicrabbit] css and category menus

By Chris - September 15, 2009

The pipes surround the regular expression. Typically, people use forward slashes, but since our match contains a forward slash, we'd have to escape it. '/<\/ul>/' would be an identical regexp.


Also, won't that match ALL <ul> tags, not just nested <ul> tags? ... so won't it also match the surrounding <ul> tags around the entire menu?


Hmm. Would a simple solution be to add the IE6 LI start code to the <ul> tags around the entire menu?
All the best,
Chris

Re: [atomicrabbit] css and category menus

By Chris - September 15, 2009

Hi atomicrabbit,

Also, won't that match ALL <ul> tags, not just nested <ul> tags? ... so won't it also match the surrounding <ul> tags around the entire menu?


Now that I've done my research properly, I can answer this question instead of just guessing at a solution. :)

No, it won't. $categoryRecord['_listItemStart'] and $categoryRecord['_listItemEnd'] are meant to be used inside an outer <ul></ul>, so you have full control over the <ul> tags around the entire menu. For example:

<ul>
<?php foreach ($categoryRecords as $record): ?>
<?php echo $record['_listItemStart'] ?>
<a href="<?php echo $record['_link'] ?>"><?php echo $record['name'] ?></a>
<?php echo $record['_listItemEnd'] ?>
<?php endforeach; ?>
</ul>

I hope this helps! Please let us know how these menus work out for you. I'm suprised something this cool can work with IE6! :D
All the best,
Chris

Re: [chris] css and category menus

By atomicrabbit - September 15, 2009

hey chris,
seems to work ok so far. Is there a way to determine if an item has sub items. I don't want it to print the IE conditional statement if an item does not have children.

Re: [atomicrabbit] css and category menus

By Chris - September 15, 2009

How about a similar approach with _listItemStart?

$link = $categoryRecord['_link']; // for example: "/products"
$name = $categoryRecord['name']; // for example: "PRODUCTS"

$newListStart = $categoryRecord['_listItemStart'];
$match = '|<ul>|';
$replace = "<!--[if lte IE 6]>\n<a href="$link">$name\n<table><tr><td>\n<![endif]-->\n<ul>";
$newListStart = preg_replace($match, $replace, $newListStart);
echo($newListStart);
All the best,
Chris

Re: [chris] css and category menus

By atomicrabbit - September 16, 2009

yeah that's what I ended up doing.

It all seems to work! Thank you Chris! Your help is much appreciated!

Re: [chris] css and category menus

By GraphicLingoes - December 1, 2009

Hi Chris,

I have a class that I apply to an unordered list at the list item level so the code looks something like this for selected items
<ul>
<li class="selected"><a href="#">Example Selected Link</a></li>
<li><a href="#">Example Non-Selected Link</a></li>
</ul>

How can I apply my "selected" class to $categoryRecord['_listItemStart'] ?

Thanks
Graphic Lingoes
www.graphiclingoes.com