UKI.NET - Easy to build Web sites, bespoke design, website development, internet solutions, content management.

Changing CSS Menu Settings

Go to the 'Website Design - Navigation' page.

Select the select the type of menu from the drop down - 'CSS'

Enter the menu position - Select an option from the drop down list - Horizontal or vertical.

Enter the Menu Location - Select Relative or Absolute.

Relative positioning will align the menu with the content area of the site, so the menu will move if the design stretches to fill the screen or floats to the centre.

Absolute positioning fixes the menu to an exact spot on the screen and it won't move position whatever screen size your site is viewed on.

Enter the start top position
This determines where the menu starts displaying from the top. Enter a number and add px to the end (this indicates that the position is measured in pixels). If you don't, it may stop your menu from displaying.

Enter a start left position
This determines where the menu starts displaying from the left of the browser screen. As above, enter numbers and add px.

Enter the Arrows Colour
Arrows will display on your menu to indicate that there are sub sections from the main page. Select a colour from the colour picker and it will be applied to the arrow displayed. Entering a custom colour is not available here, you must select from the colour picker.

Enter the Display arrows?
Arrows will automatically display if you have sub sections. You can select to turn them on and off from the drop down.

Enter the Menu Button Width - Enter numbers and add px.

Enter the Menu Button Height - Enter numbers and add px.

Enter the main button colour - Select a colour from the colour picker or enter your own.

Enter the roll over button colour
This colour displays when you hold your mouse over the button. Select a colour from the colour picker or enter your own.

Enter a main & a roll over font colour - Select these colours from the colour picker or enter your own.

Enter a border colour
This will display around the edge of each button. Select a colour from the colour picker or enter your own.

Select if you would like the text on your menu to display as normal or bold.

Select if you would like the text on your menu to display left, centre or right.

Select a font style from the drop down or input your own.

If you input your own font name and it includes spaces, i.e. Times New Roman it must have single apostrophes around it like this 'Times New Roman'. Your font will not work if apostrophes are not used.

When defining your own fonts, be aware that if the viewer doesn't have the font installed on their computer it will not be displayed and will they will see a default font. It is advisable to use common font families to ensure your site is viewed as you intended it to look.

Enter a font size.

Inserting a background image into main menu buttons.

Select an image from the 'Enter a Background Image' dropdown. The image must already be stored in the Image Manager.

Select the 'Background Repeat' from the next option.

Repeat = Tiled image filling the button area
Repeat-y = Image will repeat top to bottom
Repeat-x = Image will repeat left to right
No Repeat = Image will display once

Note: Selecting 'User Defined' will open up a blank box allowing you add a custom setting. It is only recommended that you use this option if you are competent using CSS coding. Correct CSS code needs to be entered here for this feature to work.

Select the background position from the 'Enter the Background position' dropdown.

You may need to adjust the height/width of your button area to accommodate your new background image, see steps 9/10 above.

Inserting a background image into rollover menu buttons.
Repeat steps 19 - 22 to insert a second background image to display when the mouse is over the button (hover).

Display Menu option. Select 'yes' to display the menu on your site.

Submit your changes and view your web site.

Also see:
	Open PDF Help Sheet
	Watch Video Tutorial