The first change we can accomplish is updating our main menu with a custom font and some rollover functionality. We can do that with minimum fuss, and it'll update our whole look nicely. I chose a freeware font from Larabie Fonts (http://www.larabiefonts.com) called Deftone because it'll show off GIFBUILDER, and my boss loves it. You can use any TrueType font file you would like, though. Some fonts seem to work better with ImageMagick then others, so you may need to experiment. In any case, let's start updating our menu:
- We need to change
lib.mainMenu.1 = TMENUtolib.mainMenu.1 = GMENUto use theGMENUobjects. - We want a consistent height for our entire menu, so we'll enable
useLargestItemYin our template:lib.mainMenu.1.useLargestItemY = 1
- Let's update the normal menu state first. We won't be using the
divtags around our menu items, so want to add a class to our images:lib.mainMenu.1.NO.ATagParams = class="menu-link"
- We can set the background color and dimensions of our menu items. We are going to use
10for our text object, so we can go ahead and use that as part of the size calculation to make our items exactly the same width and 5 pixels taller than the text:lib.mainMenu.1.NO { backColor = #ffffff XY = [10.w],[10.h]+5 } - Now we can create the
TEXTobject. This is our main menu, so we're just going to use the title as our text content. We're also going to use the Deftone font at a size of36in a classic black:lib.mainMenu.1.NO { 10 = TEXT 10.text.field = title 10.fontFile = fileadmin/templates/deftone.ttf 10.fontSize = 36 10.fontColor = #000000 10.align = left } - The main menu is already looking better, but we can add some flair by tilting the text up with the angle property. Because of the angle changing the dimensions, we'll push the text down a little more by adding a
50pixel offset to the height:lib.mainMenu.1.NO { 10.offset = 0,50 10.angle = 3 }
After all of our modifications, this is what our menu should look like:
We can't deny that the menu is looking better, but we lost that rollover functionality that we were showing off in the TMENU. Luckily, we can add that back with just a couple lines of code. We can use the< operator to copy all of the NO properties over, then we can change the text to red and add a shadow whenever the mouse rolls over it with the RO state:
lib.mainMenu.1 {
RO < .NO
RO {
10.fontColor = #990000
10.shadow.offset = 1,1
}
RO = 1
}
If we want to differentiate the pages in the current rootline by graying them out, it's almost the same process:
lib.mainMenu.1 {
ACT < .NO
ACT {
10.fontColor = #999999
10.shadow.offset = 1,1
}
ACT = 1
}
In the following screenshot, you can see the results if we are on the Products page (so it's active) and roll over the Content Elements menu item with our mouse. We could almost show this off right now.
After all of the tweaking, our code might be getting ugly. If we take away the redundancies and use curly braces, this is what our code can look like:
## Main Menu [Begin]
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul id="menu-area">|</ul>
lib.mainMenu.1 = GMENU
lib.mainMenu.1.useLargestItemY = 1
lib.mainMenu.1 {
NO {
allWrap = <li class="menu-item">|</li>
ATagParams = class="menu-link"
backColor = #ffffff
XY = [10.w],[10.h]+5
10 = TEXT
10 {
text.field = title
fontFile = fileadmin/templates/deftone.ttf
fontSize = 36
fontColor = #000000
align = left
offset = 0,50
angle = 3
}
}
RO < .NO
RO = 1
RO {
10.fontColor = #990000
10.shadow.offset = 1,1
}
ACT < .NO
ACT = 1
ACT {
10.fontColor = #999999
10.shadow.offset = 1,1
}
}
## Main Menu [End]