Using BrotherCake CSS Menus

[KevinR]

Hi

Sorry but I'm not a fan of the PHPLayers Menu - tables, bad CSS etc.

I love Brother Cake CSS menus (www.udm4.com) - they are very simple to implement and offer almost infinite customisation.

I have created a quick User Plugin to allow me to use Brother Cake Menus on my site instead of PHPLayers.

Thanks to Julien Lancien for his code in BulletMenu which most of this was based on.

1. Create a new User Plugin called "brothermenu"

2. Insert the following code.


global $gCms;
global $db;

# getting menu parameters
$showadmin = isset($params["showadmin"]) ? $params["showadmin"] : 1 ;

$allcontent = ContentManager::GetAllContent();

# defining variables
$menu = "";
$last_level = 0;
$count = 0;
$in_hr = 0;

if (count($allcontent))
{
$menu .= "\n";

foreach ($allcontent as $onecontent)
{
#Handy little trick to figure out how deep in the tree we are
#Remember, content comes to use in order of how it should be displayed in the tree already
$depth = count(split('\.', $onecontent->Hierarchy()));

#If hierarchy starts with the start_element (if it's set), then continue on
if (isset($params['start_element']))
{
if (!(strpos($onecontent->Hierarchy(), $params['start_element']) !== FALSE && strpos($onecontent->Hierarchy(), $params['start_element']) == 0))
{
continue;
}
}

#Now check to make sure we're not too many levels deep if number_of_levels is set
if (isset($params['number_of_levels']))
{
$number_of_levels = $params['number_of_levels'] - 1;
$base_level = 1;

#Is start_element set? If so, reset the base_level to it's level
if (isset($params['start_element']))
{
$base_level = count(split('\.', $params['start_element']));
}

#If this element's level is more than base_level + number_of_levels, then scratch it
if ($base_level + $number_of_levels Active() || !$onecontent->ShowInMenu())
{
continue;
}

if ($onecontent->Type() == 'sectionheader')
{
if ($in_hr == 1)
{
$menu .= "\n";
$in_hr = 0;
}
$menu .= "".$onecontent->MenuText()."\n";
if ($count > 0 && $in_hr == 0)
{
$menu .= "\n";
$in_hr = 1;
}
}
else
{
if ($depth \n\n";
if ($depth > 0)
{
$menu .= "\n";
}
}

if ($depth > $last_level) {
if ($last_level == 0)
{
for ($i = $depth; $i > $last_level; $i--) $menu .= "\n\n";
}
else
{
for ($i = $depth; $i > $last_level; $i--) $menu .= "\n\n";
}
}
if ($depth == $last_level) {
$menu .= "\n";
}
if ($onecontent->Type() == 'separator')
{
$menu .= "";
}
else
{
$menu .= "GetURL()."\"";
if (isset($gCms->variables['page_id']) && $onecontent->Id() == $gCms->variables['page_id'])
{
$menu .= " class=\"currentpage\"";
}
$menu .= ">".$onecontent->MenuText()."";
}
$in_hr = 1;
$last_level = $depth;
}
$count++;
}

for ($i = 0; $i ";

if ($showadmin == 1)
{
$menu .= "Admin\n";
}
$menu .= "\n";
}

echo $menu;

3. As per the brothercake instal instrcutions you'll need to add the following to your head section:




and, depending on the style you want



4. Finally in your body section add:



You can now call the menus using:

{brothermenu showadmin="0"}

In fact, it uses the same as bulletmenu
showadmin - 1/0, whether you want to show or not the admin link.
start_element - the hierarchy of your element (ie : 1.2 or 3.5.1 for example). This parameter sets the root of the menu.
number_of_levels - an integer, the number of levels you want to show in your menu.

[Ted]

This would definatly be good to put into a module. Judging by the menus on your site, they seem like they would be a good fit for CMSMS.

[KevinR]

This would definatly be good to put into a module. Judging by the menus on your site, they seem like they would be a good fit for CMSMS.

I agree!

I tried to write a plugin but failed - kept getting a smarty tmp file not not found. Time was pressing so I made it a user plugin instead (for now).

I have email you the function code, would you mind showing a newbie what i was doing wrong please.

Ta

[Ted]

Well, the problem is that we're in the process of chaning over to the new module API in 0.9, so it's probably not worth the trouble to figure it at the moment.

I think what I will do is take the code you sent and make it into a module based on the new API and put it into svn. The only way to use anything based on the new API before 0.9 comes out is getting a daily build.

I'll let you know how it goes.

[Ted]

Oh, there's a price for commercial deployment. That definatly makes me rethink it a bit.

[KevinR]

Oh, there's a price for commercial deployment. That definatly makes me rethink it a bit.

I understand, I'm testing a few similar free alternatives as well for another site (client doesnt want to spend extra $s)

Give me a few days to find one as CSS compiant, simple and elegant as brothercake.

Kevin

[Ted]

Very cool. Though, it might be interesting to make it into a module anyway, with the intention that the end user has to go to their site to download the javascript portions. That way they can worry about the licensing issues themselves.

Is anyone intrested in using it if that was part of the install process?

[Greg]

There are lots of freeware menu's that will do the same. Take a look at these:

jsDOMenu
CssCreator

and lots more listed here
Dynamic Drive

[Greg]

Great looking Website you have there Kevin.

[iNSiPiD]

I wish someone could find/write a solution that didn't rely on Javascript. Clever CSS can take care of all the on/off menu switching and PHP used for the rest. This would make it fully accessible across all browsers and platforms.

NB: Yes, I know I keep going on about this but it's really, really important and is the one thing holding back this wonderful CMS. So I'm gonna keep repeating this until a solution exists.

[dfritschy]

Yes, you do not need Javascript for such things... Good sources for inspiration about UL lists for navigation and CSS are:

• http://www.alistapart.com/
• http://css.maxdesign.com.au/listamatic/
• http://www.accessify.com/

Of course there are MANY other good sites. You might even look at my site which has a quite unique navigation in pure CSS http://www.webmanufaktur.ch/

[iNSiPiD]

Nice site, drfritschy. And great portfolio. I love the inuit collection site. How does a guy in Berne get a job for a website promoting Eskimo art?

BTW, you may be pleased to know that my CSS/bulletmenu is now fully operational.

A few headaches and even more false starts but now it's up and working without any Javascript!

Take a look here: http://d81314.i50.quadrahosting.com.au/

[koehler]

Take a look here: http://d81314.i50.quadrahosting.com.au/

Wow!

This is exactly what i'm looking for - for my tiny internet telephony site (www.sipsurf.de) !

No Script at all. How do you make it ?

Michael

[dfritschy]

Nice site, drfritschy. And great portfolio. I love the inuit collection site. How does a guy in Berne get a job for a website promoting Eskimo art?

Thanks. These people happen to be located in Berne...

A few headaches and even more false starts but now it's up and working without any Javascript!

Nice job! Where did you get the idea for these very well structured css files?

[iNSiPiD]

No Script at all. How do you make it ?

Thanks! You can suck down the CSS and give it a shot yourself. There's a lot there and it's mostly broken up into logical sections. Mostly.

Just have a play at changes the colours etc in the hnav and vnav sections and you'll get the idea.

Nice job! Where did you get the idea for these very well structured css files?

drfritschy, I'm a big fan of alistapart and my Aussie peers over at designmax (as per your earlier suggestions). These guys do wonderful things with simple lists.

But my initial inspiration and ensuing conversion to CSS comes from the fabulous contributions at www.csszengarden.com. If you haven't been here yet then I urge you to take a look. Superb stuff.