Menu Options

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.

fourPuppies 

Four Puppies from Istock

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.

menu-1

We uploaded our four images to the images folder, and next we assign them to the menu items.

menu-2

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.

menu-3

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

menu-10

We set our navigation menu image, in the now familiar background settings.

menu-11

Now we add an optional 6px of padding, this will move our menu items down.

menu-12 

As our menu background is dark we change our font color, we also style the font here.

 menu-13

Final setting is the hover image, this is 1px wide so we repeat-x

menu-14

That is our menu sorted!

menu-15

Notices

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.

Membership

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.

2 thoughts on “Menu Options

  1. i’m confused…what program are you using to create the images menu? that doesn’t look like artisteer…did i miss where you mentioned the program?

    • doh! i think i just answered my own question…i see this was posted in the category “facebook template maker for wordpress”??  never heard of it…will have to look into it.

      but what i really need is to be able to make image menu bar in artisteer…or just how to do it in wordpress? i want to make a menu like i have at my current site: http://www.mommychats.com  and i’m trying to convert to a wordpress site (current site was created with frontpage)…i can get most of the rest of it to look fine with artisteer, but i cannot get that menu bar to look right…i’ve tried using @font-face but the font just doesn’t look very sharp so i am thinking it would look better as an image…but not sure how to do this? have you posted a tutorial on how to do this and i just missed it?

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Facebook Tutorial

wizard-thumb

It has been two weeks since the Beta 1 was released for testing, after feedback we have made a number of changes. The main topics in this section are still relevant but with a few changes, the major changes are … Continue reading

Read More