« Back
Split Menu
Posted by: mark | May 7, 2013 | Category: Menus Smarty
A split menu will allow you to one part of the menu text under the other, both can be styled separately.
This code will split the menu by putting a </span><br /><span> whenever it comes a cross a / in the text, really pretty simple with the smarty replace variable modifier as you will see below.
In this example I made the text smaller, italic, blue and white background on hover.
Most of the default menu templates come with.
<span>{$menu->text}</span>
Replace it with this.
<span>{$node->menutext|replace:'/':'</span><br /><span class="line2">'}</span>
Now with menu text of About/Us this will output the code below, anything w/o the / in it will appear normal.
<span>About</span><br /><span class="line2">Us</span>
Now you have a split menu where you can style the top and bottom text individually.
/* -------- CSS for example -------- */
span.line2 {
font-size: 60%;
color: blue;
font-style: italic;
font-family: sans-serif;
}
a:hover span.line2 {
background-color: #FFF;
}