Must Read: New Unified System is officially live Must Read     |   6 Templates Updated (27 April 2018) Read more

Creating two line menus in Joomla

page.title

A few days ago while scouring the web for new Joomla extensions I came across this amazing little BBcode plugin for Joomla. At first I wasn't really certain what the benefits to using the plugin were - I initially thought why not just use html - but after digging a little deeper I discovered the real power of this plugin and how easy it is to create two line menu items with it.

For those of you who are new to bbcode, its the code that is traditionally used in forums and some comment systems - or a more in depth explanation from the BBCode website:

"It is similar to HTML in the sense that in BBCode one does also use tags to format something specific (contained within the tag). In BBCode tags are indicated by rectangular brackets surrounding a keyword, which is in turn transformed into HTML before being delivered to a web browser."

The beauty of this plugin is that it has the ability to transform bbcode anywhere in Joomla.

Joomla's normal behaviour is to either strip out any html or render the actual html markup whenever you want to add it to fields such as content item titles, menu item titles etc The YVBB plugin on the otherhand, allows you to render html markup in menu items, content titles or any other field that you can normally only affect at a deeper template level.

So when it comes to creating a two line menu item with the core Joomla menu - this plugin makes it very easy.

The following screenshot is of our Zen Default template with a small addition to the css file.

sublineMenu

As you can see the plugin also renders the BBCode in the joomla admin.

backendMenuItems

While the code to create the menu item just looks like this - as you can see its really very simple:

sublineMenuCode

Once you have the plugin and menu syntax setup then its just a matter of targeting the styles with a little css. The example above uses our Zen Default template and Ive just added the following css rule to the theme.css file to get it looking the way I wanted.

{jb_redbox}

#nav ul li a {font-size: 1.2em}

#nav ul li a em {font-size: 0.8em;color: #999}

{/jb_redbox}

The plugin can also (of course) render bbcode in content items and there are some very handy article linking options available also. Check out the documentation page for an overview of the other features of the plugin.

blog comments powered by Disqus