Using BrotherCake CSS Menus

[bomag]

iNSiPiD,
I'm new to CMSMS and am trying to achieve a similar navigation to yours. I want a CSS vertical Menu that shows submenus without rollouts. I like it how you implemented a click and then the submenu appears beneath the Main menu. Can you tell me, if possible, how to implement this process (Details Please). Another example http://tutorials.alsacreations.com/dero ... rtical.htm

Using CMSMS (version 0.9.2)

I'm new to this and I can't seem to even figure out how to implement bulletmenu properly. I've searched the forums and not sure what to do. I do have some knowledge of PHP and some CSS. Can you or anyone please help.

Thank You,
Tim

[nils73]

The manual says:

How do I use it?

Just insert the tag into your template/page like: {bulletmenu}
What parameters does it take?

    * (optional) showadmin - 1/0, whether you want to show or not the admin link.
    * (optional) collapse - 1/0, whether you want to collapse sub items that shouldn't be shown. Defaults to 0.
    * (optional) start_element - the hierarchy of your element (ie : 1.2 or 3.5.1 for example). This parameter sets the root node of the menu and only shows it and it's children.
    * (optional) show_root_siblings - 1/0, if start_element (above) is given, then show direct siblings of the give start_element as well.
    * (optional) number_of_levels - an integer, the number of levels you want to show in your menu.


And then just style the tags you see in HTML with CSS. It's as simple as that.

Regards,
Nils

[iNSiPiD]

Hi bomag,

It's not quite as simply as nils73 makes out unfortunately. The {bulletmenu} tag is a piece of p!ss. Just insert it in your template's or where you want your menu to appear. In my page it looks like this, despite certain tags being 0 by default {bulletmenu admin='0' collapse='1'}.

The CSS is the tricky bit as it kind of needs to be written in a certain order. You can use the following; just change the colours and borders to suite your needs and set the or class to vnav. If you want your menu to go to three levels then you will need to extend the following with ul ul ul and li li li styles.

Hope I didn't make it too easy for you. Half the joy is figuring this stuff out yourself you know.

/******************************************************************************
*  vnav.css
* ------------------------------------------------------------------------------
*  responsible for the vertical navigation elements commonly found in the left
*  and / or right columns.
*******************************************************************************/

.vnav
{
margin: 0;
}
.vnav ul, .vnav ul li
{
margin: 0;
padding: 0;
list-style-type: none;
display: block;
}
.vnav ul
{
border-bottom-width: 0;
}
.vnav ul ul
{
border: 1px solid #666;
border-right-width: 0;
border-bottom-width: 0;
}
.vnav ul li
{
border-top: solid 1px #FFFFFF;
border-right: solid 1px #666666;
border-bottom: solid 1px #000000;
border-left: solid 1px #333333;
}
.vnav ul ul li
{
border-width: 0 0 1px 0;
border-style: solid;
border-color: #ccc;
}
.vnav ul li a
{
display: block;
text-decoration: none;
padding: 2px 10px;
}
* html .vnav ul li a/* hide from IE5.0/Win & IE5/Mac */
{
height: 1%;
}
* html .vnav ul
{
position: relative; /* IE needs this to fix a rendering problem */
}
.vnav ul li a:link, .vnav ul li a:visited
{
color: #000000;
background-color: #CCCCCC;
}
.vnav ul li a:hover, .vnav ul li a:active
{
color: #fff;
background-color: #005CAB;
}
.vnav ul ul li a:link, .vnav ul ul li a:visited
{
color: #005CAB;
background-color: #fff;
border-left: 4px solid #ffffff;
}
.vnav ul ul li a:hover, .vnav ul ul li a:active
{
color: #005CAB;
background-color: #fff;
border-left: 4px solid #005CAB;
text-decoration: underline;
}

[Ted]

I hope "piece of p!ss" is a term of endearment. 

(yes, I have bug fixes to it on my TODO list)

[iNSiPiD]

Of course. It's Australian for "dead easy", ya flamin' galah.

(And once that's done you can start on that custom WYSIWIG.)

[Ted]

That's a new one for me.  See?  i'm learning...

Well, don't forget the search, and the this, and the that...  and, oh yeah, 1.0. 

[iNSiPiD]

I know, I know!

And I really am holding my breath in anticipation of the big unveiling, so don't take too long, okay?

[Ted]

Ok.  But just for you. 

[nils73]

It's not quite as simply as nils73 makes out unfortunately.

I absolutely agree. But only if you try to do more complex things or try to be more standards compliant ... or less.

The CSS is the tricky bit as it kind of needs to be written in a certain order.

Erm ... I don't want to argue ... but doesn't this "certain order" appear in the name Cascading Stylesheets? Right, it is a cascade. So it has to be written in a certain order. I had to learn this the hard way and I wish I had never seen font-tags, layout-tables and such nonsense before .... life would be so much easier with CSS only.

A good starting point for CSS list navigations is List-A-Matic ... tons of great ideas for horizontal and/or vertical nav-bars.

Regards,
Nils