xpanded category tree for drop down menu

As requested, here is the zip. If the mods want i can answer any questions on a support thread, or this one.

This will look the same as the regular drop down, with the exception of categories being in three columns. I have seperated the categories form the other drop downs, added some basic hover and cleaned up the css a little.

In addition all of the extra css and coding required is included.

There are a few new div's but all the files are the same as the regular drop down and all you need to do is copy over them. BACKUP BEFORE YOU DO ANYTHING. If your unsure, message me first.

If you've already modified any of these files then i'd suggest you merge them and not copy over them.

A basic demo is here:
http://www.andy-wood.com

And a customized version is here:
http://www.gearsofwargear.com

You may have to change some of your categories sort orders to get the exact layout you want.

Any questions just message me.

Thank you very much. This looks great! :smile:

Thanks again
Anthony

First Trading - thank you for sharing your superb work.:D

Not a problem and enjoy. Like i say, any probs then simply post up or message me.

ggbarnum:

Just for your info. On IE7 the menu's pop up behind the image and cannot be seen, seems ok on IE8 though.
I presume you found a fix for this? I ran into the same issue while working on the Model List mod, and discovered that the only reliable fix for a dynamically populated dropdown involved javascript.

I did find an easy solution for the situation where the only need for positioning the main elements is to provide a context for the dropdown: keep the position: relative; out of the base style rule for the element, and put it in the :hover rule that reveals the sub-elements.

Meanwhile, good work on making this available. Since it is a different layout than the original mod, you should submit it as a new mod once some other people test it.

Looking at the construction of the dropdown, I see that the individual category lists are floated left, so that they display in order from left to right, then top to bottom. This should be fine for most cases, but if say the middle category is longer than the righthand one, the next row will hang up on it while floating and you may get some odd spacing/alignment issues. This might be avoided by inserting a clear: left; element after every third category, or in the <li> following every third category.

That might be a problem if a deeper level of subcats is added. What does the display as you have it do in that case?

-Nevermind, I see that this would just add another indent to the top cat lists. Adding the clear: left; to the top cat <li>s should work fine.

Thanks for the solution to that. I stated above that you may have to re-arrange your category sort orders, which originally was the reason i did'nt suggest this for an ad-on as it was'nt polished enough, buy i'll get to work on that right now.

You can sort it simply by changing the category sort order though, well at least in most cases.

As for the IE7 fix, i sorted that out. If you look at my second demo you will see that even with a fadeshow on the homepage, in IE7 it works perfectly.

This was done by adding a 'z-index' to every single div.

After some private discussion, here is a solution for adding a new class tag to every third <li>. It is a generic function that can be applied in many different situations, with appropriate parameters.

// posted in user comments on strpos() in the php manual
//strnposr() - Find the position of nth needle in haystack.
//alt version - slightly faster, more correct result
function strnposr($haystack, $needle, $occurrence, $pos = 0) {//find the position of nth needle in haystack.
    return ($occurrence<2)?strpos($haystack, $needle, $pos):strnposr($haystack,$needle,$occurrence-1,strpos($haystack, $needle, $pos) + 1);
}

//new function
//replace every nth occurrence of $needle with $repl, starting from any position
function str_replace_int($needle, $repl, $haystack, $interval, $first=1, $pos=0) { //gjh42 20101213
  $firstpos = strnposr($haystack, $needle, $first, $pos);
  if ($firstpos === false) return $haystack;
  $nl = strlen($needle);
  $qty = floor(substr_count($haystack, $needle, $firstpos + 1)/$interval);
  do { //in reverse order
    $nextpos = strnposr($haystack, $needle, ($qty * $interval) + 1, $firstpos); 
    $qty--;
    $haystack = substr_replace($haystack, $repl, $nextpos, $nl);
  } while ($nextpos > $firstpos);
  return $haystack;
}

//$needle = string to find
//$repl = string to replace needle
//$haystack = string to do replacing in
//$interval = number of needles in loop; last in each loop iteration will be replaced
//$first=1 = first occurrence of needle to replace (defaults to first)
//$pos=0 = position in haystack string to start from (defaults to first)

$menulist = str_replace_int('submenu', 'submenu newRow', $menulist, 3, 4); 

Thanks for this Glen, i will be testing it in a little while, thanks for the help and time you have given.

first trading:

I have all the files zipped up and incorporated in the drop down menu ad-on, if you want the files i can send them.

It will look exactly the same as the drop down menu ad-on but the category's will be three columns accross (you can have as many or as few as you like though). Then you can just go ahead and customize as you please.

I simply used a background image for the opacity on the above url.

Hi Andy,
Above you mentioned "the category's will be three columns accross (you can have as many or as few as you like though)"
If you have a moment, could you explain how to add a column? I'd like to try 4 or 5 columns wide to see how it looks on the site I'm working on. Thanks again for this great navigation menu.
Cheers

In the stylesheet simply change:

#dropMenu ul.level1 li.submenu:hover ul.level2 {width:501px;display:block;}

And change the width. The width is 501px at the moment, and you need to change this by a further 167px for each additional column you require.

So changing width to 668px gives you 4 columns, changing it to 835px gives you 5 columns.

You can also change the categories listed width from 167px if you so desire.

#dropMenu li.submenu ul.level2 li {width:167px;}

Changing this width to 100px will give you 5 columns for example.

The overall width of the menu is 501px, the columns are 167px, so by changing these two widths will give you as many as columns as you like within reason of course.

gjh42:

After some private discussion, here is a solution for adding a new class tag to every third <li>. It is a generic function that can be applied in many different situations, with appropriate parameters.

// posted in user comments on strpos() in the php manual
//strnposr() - Find the position of nth needle in haystack.
//alt version - slightly faster, more correct result
function strnposr($haystack, $needle, $occurrence, $pos = 0) {//find the position of nth needle in haystack.
return ($occurrence<2)?strpos($haystack, $needle, $pos):strnposr($haystack,$needle,$occurrence-1,strpos($haystack, $needle, $pos) + 1);
}

//new function
//replace every nth occurrence of $needle with $repl, starting from any position
function str_replace_int($needle, $repl, $haystack, $interval, $first=1, $pos=0) { //gjh42 20101213
$firstpos = strnposr($haystack, $needle, $first, $pos);
if ($firstpos === false) return $haystack;
$nl = strlen($needle);
$qty = floor(substr_count($haystack, $needle, $firstpos + 1)/$interval);
do { //in reverse order
$nextpos = strnposr($haystack, $needle, ($qty * $interval) + 1, $firstpos);
$qty--;
$haystack = substr_replace($haystack, $repl, $nextpos, $nl);
} while ($nextpos > $firstpos);
return $haystack;
}

>   //$needle = string to find
>   //$repl = string to replace needle
>   //$haystack = string to do replacing in
>   //$interval = number of needles in loop; last in each loop iteration will be replaced
>   //$first=1 = first occurrence of needle to replace (defaults to first) 
>   //$pos=0 = position in haystack string to start from (defaults to first)
> ```php
$menulist = str_replace_int('submenu', 'submenu newRow', $menulist, 3, 4); 

Just had a go at implementing first trading's version of drop down menu. Amazing work...Gears of War ROCKS too. Beautiful template...
Sorry for the novice question Black Belt, but i don't understand where the 2 lots of php code go.
Does "$menulist" go in "tpl_drop_menu.php"???
& do i have go create php file in "/includes/functions/extra_functions/ " for the other???.
I'm at beginning of customizin temp attempt. Site is: http://www.poliritmia.net/
& i'm a bit of a novice...you can tell right!:blush:
Cheers

The answers are yes and yes.

I have packaged this function into a mod, String Replace at Intervals, so you can just get that and follow the instructions in its readme.

If you have questions on the replacement mod, please post in the support thread for help.

Is it possible to use this menu with EZ pages?

Just curious if anyone noticed my post above. Can I somehow integrate EZ Pages into the menu?

Thanks

Jeff

You probably could if you were an experienced PHP coder, but that would be a whole other topic and beyond the scope of this mod.

Thanks for the mod, it looks good.

May I ask if there is anyway this can be used to list the top level categories individually alone and leave out the Home/Account/Information pages please?

have added this menu but dont understand how the string replace at intervals works, any body give a simple explanation

thanks
Bryan

Have you downloaded the String Replace at Intervals mod and read its readme?
It basically finds every nth instance of a given substring in the target string and replaces it with the given replacement substring. In this case you would look for something like <li and replace it with <li class="clearBoth". The details of how it accomplishes that are technical PHP and not appropriate for this thread. If you want to discuss that further, post in the String Replace at Intervals support thread (mentioned above).

hi,
thanks for the response, yes i mean more how to alter the file to do what i want, would it be possible to show me how to change the file so it does your example change above every 7th time, im hoping once i see the change and see the effect it has on the menu i can they play with it a bit

hope this makes sense and glad of the help

thanks
bryan