bMenu Menu Styler

This module is a result of frustration in building menus. I strongly dislike creating website menus. Because there are a lot of strange things happening when creating them. Like

• It does not look the way you want it to
• If it looks the way it should, it does not work in IE or in FF
• The stylesheet becomes large and unclear.
• Lots of other problems

So I decided to create a system in which menus can be controlled with logical settings that behave the same in all browsers. But lets be clear, I am not a stylesheet hero, so I may need some extra help in improving the final stylesheet output. Here some todo's:

• Disable global :hover class for all links

About

The bMenu menu styler is not just a styler, it is also a menu behaviour. Which result in two functions.

• Create and maintain stylesheets
• Control the behaviour of drop down menus by adding a javaschipt to the page.

Features

• Create as many drop down menus on a page as you want with all their own layout and behaviour
• Inherit system which result in changing only settings you actually want to change
• Many more, I'll add them in the future (or maybe others, it is a wiki)

Add bMenu to your template

Adding behaviour scripts to your page consists of at least two steps. First add the javascript to the page, needed to execute the menus. This is done by placing

{cms_module module="bMenu"}

In the header of your template. Then for each menu on the page add

{cms_module module="bMenu" styleid="..."}

below each {menu ...} call. Here the styleid is the id of the stylesheet you are using. This call is shown in the Settings tab (with the right id). The default settings of the bMenu module work best when the menu uses the cssmenu.tpl template.

{menu template="bMenu" ......}

NOTE: Make sure you associate the bMenu stylesheet with all the templates you use NOTE: The bMenu menu template exists from version 0.4.6, use other template for older versions

The settings tab

In the settings tab you can control the main look and behaviour of the menu. Here a description of its settings:

Menu orientation

This setting determines if the main menu will be a horizontal or a vertical menu.

Submenu horizontal

This setting determines at which side the submenus appear. The options are

• left
• right (default)

Submenu vertical

This setting determines how submenus are displayed. Options are:

• up
• down (default)

When the menu orientation is horizontal and this setting is set to up, the complete menu will be upward oriented. This is probably when you want a drop...up menu at the bottom of the page.

Hide delay

This setting determines how long a menu will remain visible after it looses the mouse cursor.

Appear

This setting determines with which appear effect the submenus will be displayed. Options are:

• Show
  • direct
  • slow
  • normal
  • fast
• Slide
  • slow
  • normal
  • fast
• Fade
  • slow
  • normal
  • fast

For interested people. It uses the jQuery effects. If you know some more nice effect statements, please let me know and I will add them.

Disappear

This setting determines with which disappear effect the submenus will be displayed. The options are the same as the appear settings. Only show will be hide.

Highlight parents

This setting determines if the parents of the current hovered submenu will be highlighted with the active class.

Stylesheet

This setting determines which stylesheet is used to store the menu style settings. This stylesheet will be overwritten by the bMenu module, so changes you make manual will be overwritten everytime you regenerate the menu Add this stylesheet to your template to use it.

The bMenu call for each menu

Since this module supports multiple dropdown menus at a page, each {menu ...} call will need an extra {bMenu ....} call after it. Note:This is only when you want to use the effects. If you just want to use this module for the styling of the menu elements, do not include the {bMenu ...} call in your template.

The classes tabs

The classes tab is a core element in this module. These settings represent the structure of your menu in the page. Since this module is on top of the MenuManager, these settings should be congruent with the indication and classnames in the menu template. I hope the examples will give the idea. Otherwise contact me. Here the settings for the delivered templates from the menu manager. Note that text between brackets is comment and not a value

simple_navigation.tpl

Menu indicator = #primary-nav
default class = (empty, so do not fill in anything)
active class = (you can choose yourself, I chose .hover)
current class = .currentpage (note: change h3 to h3 class=currentpage in your menu template if you use this option if not already)
is parent class = .activeparent (note: change a href... to a class=activeparent href... in your menu template if not already)
has children class = (not used in this template)

cssmenu.tpl

Menu indicator = #primary-nav
default class = (empty, so do not fill in anything)
active class = (you can choose yourself, I chose .hover)
current class = .menuactive
is parent class = (not used. In stead this is a combination of active class and current class)
has children class = .menuparent

minimal_menu.tpl

If you use this template, you probably do not want to use the bMenu module.

Menu indicator = ul.clearfix
default class = (empty, so do not fill in anything)
active class = (you can choose yourself, I chose .hover)
current class = .currentpage (note: change li to li class=currentpage in your menu template if you use this option)
is parent class = (not used in this template)
has children class = (not used in this template)

Creating the layout

The layout is created by an inheritance system. Everything looks like the Main menu default style setting, or an appropriate setting done unless you check the checkbox before the setting. The settings are discussed on page bMenu layout

Templates

Since bMenu works with templates it can be tweaked any way you want. The skill level must be higher though. If someone creates a good template, please submit it here so others can use it. The templates can be found at: bMenu templates

3th or 4th level styling with bMenu

By default with bMenu you can edit the settings for the main level an sublevel of menus. Since bMenu 0.4.5 there is support for up to 4 levels of styling. To achieve multiple styling you have to change the bMenu.module.php file. change the line:

$this->bmlevels('main','sub');

to

$this->bmlevels('main','sub','subsub');

for three levels of styling, or to:

$this->bmlevels('main','sub','subsub','subsubsub');

for four levels. This is not a standard setting to reduce the amount of tabs so non-experienced users will not be confused to much :)

Onetime settings

These settings are required only once per menu level.

Width

This setting determines the width of the menu items. Be sure that this setting has a value. One exception to this is if you want a horizontal menu with automatic fitted width, set this property to auto, but be sure to set the submenu width to a value. Otherwise the menu will behave strange.

• default 100px

Height

This setting determines the height of the menu items. Be sure that this setting has a value if you have a horizontal menu.

• default 25px

Padding

This is the padding, or the internal space between the menu cell border and the menu text. This setting can have css padding values. Like 3px, but also statements like 3px 12px are allowed.

• default 3px

Distance

This is the distance between the menu items. This will be empty space between the items.

• default -1px

Submenu distance

This is the distance between a menu item and its submenu.

• default -1px

All classes settings

These layout settings are applied for every class.

Border size

These are a range of settings that determine the border.

Size

This is the thickness of the border

• default 1px

Style

This is the style of the border. options are:

• solid (default)
• dotted
• dashed

Color

This is the border color.

Background color

This is the background color of menu items.

Background image

Font size

Text alignment

This is the text alignment of the menu text. Options are:

• left
• center (default)
• right

if you want more control on the text position, use the padding setting.

bMenu Template

Since bMenu works with templates it can be tweaked any way you want. The skill level must be higher though. If someone creates a good template, please submit it here so others can use it.

Menu vertical where the complete menu item is clickable

Change menu_vertical.tpl to this in the templates folder

{$main_indicator} {ldelim}
       display:block;
       margin:0;
       padding:0;
       list-style:none;
       z-index:10001;
{rdelim}
{$sub_indicator} {ldelim}
       display:none;
       position:absolute;
       list-style:none;
       margin:0;
       padding:0;
       width:{$sublevel.width};
       {if $submenu_vertical=="up"}
       bottom:0;
       {else}
       top:{CssCalc base=0 substract=$mainlevel.border_size_top add=$sublevel.border_size_top};
       {/if}
       {if $submenu_horizontal=="left"}
       left:{CssCalc base=-`$sublevel.width` substract="`$mainlevel.submenu_distance`,`$mainlevel.border_size_left`"};
       {else}
       left:{CssCalc base=$mainlevel.width add="`$mainlevel.submenu_distance`" substract=$mainlevel.border_size_left};
       {/if}
{rdelim}

{$sub_indicator} ul{ldelim}
       {if $submenu_horizontal=="left"}
       left:{CssCalc base=-`$sublevel.width` substract="`$sublevel.submenu_distance`,`$sublevel.border_size_left`"};
       {else}
       left:{CssCalc base=$sublevel.width add="`$sublevel.submenu_distance`" substract=$sublevel.border_size_left};
       {/if}
{rdelim}

{foreach from=$styleclasses item=style}
{$style.indicator} li{$style.class}{ldelim}
       position:relative;
       width:{CssCalc base=$style.width substract="`$style.padding_left`,`$style.padding_right`,`$style.border_size_left`,`$style.border_size_right`"};
       height:{CssCalc base=$style.height};
       padding:0;
       margin-bottom:{$style.distance};
{rdelim}
{$style.indicator} li{$style.class} {$style.tag}{$style.class}{ldelim}
       display:block;
       width:{CssCalc base=$style.width substract="`$style.padding_left`,`$style.padding_right`,`$style.border_size_left`,`$style.border_size_right`"};
       height:{CssCalc base=$style.height substract="`$style.padding_top`,`$style.padding_bottom`,`$style.border_size_top`,`$style.border_size_bottom`"};
       padding:{$style.padding};
       background-color:inherit;
       color:{$style.font_color};
       font-weight:{$style.font_weight};
       font-size:{$style.font_size};
       text-decoration:{$style.font_decoration};
       font-family:{$style.font_family};
       background-color:{$style.background_color};
       {if $style.background_image_url}
       background-image:url({$style.background_image_url});
       {/if}
       background-position:{$style.background_image_offset_x} {$style.background_image_offset_y};
       background-repeat:{$style.background_image_repeat};
       border:{$style.border_size} {$style.border_type} {$style.border_color};
       text-align:{$style.text_alignment};
{rdelim}
{/foreach}

This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

User Handbook/Admin Panel/Layout/b Menu

From CMSMS