Jump to content

Horizontal Menus ... help please


Hornblower

Recommended Posts

Ok so after a bit of fighting with css and templates etc I've got my menu displaying horizontally. I have 2 separate issues that I hope I can get some pointers on both within "element.navigation_tree.php":

My code in this template reads:

<li {if $BRANCH.url == $CURRENT_PAGE} class="current" {/if}><a href="{$BRANCH.url}" title="{$BRANCH.name}" ><b>{$BRANCH.name}</b></a>

{if isset($BRANCH.children)}<ul>{$BRANCH.children}</ul>

{else}<ul><li></li></ul>{/if}

</li>

1.) I only want the <ul> in the else statement to run if there are no BRANCH.children at all (yes I do want an unpopulated list). Obviously if there are 'children' it then produce another level of sub-menu with the unpopulated list. Any ideas?

----

2.) Checking BRANCH.url against CURRENT_PAGE is fine for showing which category you are currently in, if you are in a top level category. As soon as you go down into a sub categroy this check dosen't work (I am wanting to keep the top level category highlighted in the menu). I have tried using $CRUMBS as this is used to create the breadcrum trail and must at somepoint contain the top level category. However when I try to do a {foreach} loop it only seems to conatain the very last breadcrumb value ?@*?!!

Have tried using various other methods and variables but to no avail. Information provided by the general debug (set in the adminstrator interface) and the {smarty} debug only give partial information about variable contents.

Is there a similar thing to ColdFusion <cfdump var="#.... that will show the complete structure and values in variables?

Thanks in advance ... :)

Link to comment
Share on other sites

1.) The code you have looks correct to me. Is it not producing what you want?

2.) You can use jquery parentsUntil() to add a class to the current category page's parents. Assuming the top-level <ul> of your category tree has an id of "categories", you could try adding this to your skin's javascript file:

$('li.current').parentsUntil('#categories', 'li').addClass('current_parent');




The problem will be on a product page, where $CURRENT_PAGE won't get you the current category. You would need to add a template variable for the current category, which involves making some changes to a class file. In /classes/catalogue.class.php find this around line 280:





if (is_array($cats)) {

  foreach ($cats as $cat) {

    if (preg_match('#^<a href="(.*)">(.*)</a>$#', $cat, $match)) {

	  $GLOBALS['gui']->addBreadcrumb($match[2], $match[1]);

    }

  }

}







and change it to this:




if (is_array($cats)) {

  foreach ($cats as $cat) {

    if (preg_match('#^<a href="(.*)">(.*)</a>$#', $cat, $match)) {

	  $GLOBALS['gui']->addBreadcrumb($match[2], $match[1]);

      if(!next($cats)){

   	 $GLOBALS['smarty']->assign('CURRENT_CAT',$match[1]);

      }

    }

  }

}




You should now have $CURRENT_CAT as a template variable on product pages. So in element.navigaton_tree.php you would need something like this:




<li {if $BRANCH.url == $CURRENT_PAGE or $BRANCH.url == $CURRENT_CAT} class="current" {/if}>

This is all theoretical, by the way. I haven't tested it. Good luck. :)

Link to comment
Share on other sites

1.) No it's not doing exactly what I want. What I would like is:

Dogs Birds Cats

|.. <ul><li></li></ul> |.. Robin |.. <ul><li></li></ul>

What I get is:

Dogs Birds Cats

|.. <ul><li></li></ul> |.. Robin |.. <ul><li></li></ul>

|.. <ul><li></li></ul>

Hope that makes sense - in other words isset($BRANCH.children) test fails when it iterates over the child items

2.) looks good - will try it in the morning and let you know how I get on.

Thanks for your help

Link to comment
Share on other sites

Just had a look at your site and noticed you don't have "Expand category navigation tree" enabled, so that line of jquery won't work. Try changing that block of code in catalogue.class.php to this instead:

if (is_array($cats)) {

  foreach ($cats as $cat) {

	if (preg_match('#^<a href="(.*)">(.*)</a>$#', $cat, $match)) {

	  $GLOBALS['gui']->addBreadcrumb($match[2], $match[1]);

	  if(!$set){

		$GLOBALS['smarty']->assign('CURRENT_CAT',$match[1]);

		$set = true;

	  }

	}

  }

}

That should set $CURRENT_CAT to the current top-level category instead.

Link to comment
Share on other sites

Why is it not possible to use the $CRUMBS array used earlier




{foreach from=$CRUMBS item=crumb}

			    <li><a href="{$crumb.url}">{$crumb.title}</a></li>

			    {/foreach}

both url and title would give an exact match? I am obviously not understanding something, but realising if I don't ask .... :D

Link to comment
Share on other sites

1.) No it's not doing exactly what I want. What I would like is:

Dogs Birds Cats

|.. <ul><li></li></ul> |.. Robin |.. <ul><li></li></ul>

What I get is:

Dogs Birds Cats

|.. <ul><li></li></ul> |.. Robin |.. <ul><li></li></ul>

|.. <ul><li></li></ul>

Hope that makes sense - in other words isset($BRANCH.children) test fails when it iterates over the child items

Ah, I see. No, it's not failing, it's actually doing exactly what you tell it to. When the category tree is built, the script loops over that template code for every item on every level of the tree. So at the end of every <li>, no matter how many levels down it is, you will have either a list of subcategories or an empty list. Not sure if there's any way around that. However, you can target just the first level of sub-lists in the CSS. Give the empty lists a specific class, eg. "empty" and do something like:

ul#categories ul.empty{

display:none;

}

ul#categories>li>ul.empty{

display:block;

whatever else you want to do

}

Link to comment
Share on other sites

Realised it wasn't failing, just not doing what I wanted it to do :)

But you have pointed me at the answer - though the other way around:

ul#categories>li>ul.empty{

display: none;}

should mean that I get a menu where every top level has one level, and only one, visible sub level.

Hearty thanks :D

It's now far too early in the morning to try anything else- will have a go at it after some much needed rest - once agin thank you for your insight.

Link to comment
Share on other sites

OK so the following worked:

in box.navigation.php I added empty <ul><li></li></ul> code blocks to the static top level categories


<div>

<h3 class="hidden">{$LANG.navigation.title}</h3>

<ul id="mymenu">

<li {if $SECTION_NAME == 'home'} class="current" {/if}><a href="{$STORE_URL}/index.php" title="{$LANG.navigation.homepage}"><b>{$LANG.navigation.homepage}</b></a>

<ul><li></li></ul>

</li>

{$NAVIGATION_TREE}

{if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}

<li><a href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}"><b>{$LANG.navigation.giftcerts}</b></a>

<ul><li></li></ul>

</li>

{/if}

{if $CTRL_SALE}

<li><a href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}"><b>{$LANG.navigation.saleitems}</b></a>

<ul><li></li></ul>

</li>

{/if}

</ul>

</div>





In element.navigation_tree.php



<li {if $BRANCH.url == $CURRENT_PAGE} class="current" {/if}><a href="{$BRANCH.url}" title="{$BRANCH.name}" ><b>{$BRANCH.name}</b></a>

{if isset($BRANCH.children)}<ul>{$BRANCH.children}</ul>{/if}

<ul class="empty"><li></li></ul>

</li>



the fact that if there are no children the second level is given the class empty doesn't seem to cause issues because in my menu css I've added (as pointed to by Viola):



#mymenu ul ul.empty {

display: none;

}

as the code for my top level <ul> has id=mymenu.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...