To navigate our pages we need to style the menu, there are three types of menu we could use, All Images, No Images, Text and Images, we will look at two of these, the first one will be All Images this is the most simple, we just create a chop images to make our menu.
For this example we just visited one of the photo stock images websites and for a couple of dollars we have a licence to use the image in our template, we cannot re-distribute the image but under the license we can use it in our own or our customers template.
Here is a comp of the image we purchased, notice the watermark, when we purchased the license, the watermark is removed, there is a link to the image below.
We open the image in a graphics program sized it to fit the template and chopped it into four, the height we finished with was adjusted later to 170px, then from our Menu Options, here we just need to update three values, Height, Type and Align.
We uploaded our four images to the images folder, and next we assign them to the menu items.
We also added 4px of Menu Padding, that is all we need to do for an All Image menu, simple as that and each image links to a page section.
Enough of the fun stuff how about a normal menu, we edited some graphics from an Artisteer theme, creating a menu bar background 520px * 40px and a hover image 28px * 1px.
Notice the different values, the type is now text-images our heights are used to set the height, and we are aligning the text to the center of each menu item
We set our navigation menu image, in the now familiar background settings.
Now we add an optional 6px of padding, this will move our menu items down.
As our menu background is dark we change our font color, we also style the font here.
Final setting is the hover image, this is 1px wide so we repeat-x
That is our menu sorted!
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.