iWeb FAQ - Color fading menu

iWebFAQ.org

 

How can I add a menu with a fading effect to my website?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


Here’s an example of the menu:






1. Go to http://css-tricks.com/color-fading-menu-with-jquery/ and download the source of the menu.

2. You will get a folder called “ColorFadingMenu”. Upload the entire folder to the root of your server (If you don't know what the root is or how this is done read it here)

3. Copy the following code and paste it in an HTML Snippet:



<div style="background-image:url(http://yourdomain.com/ColorFadingMenu/images/navBG.png);width:660px;height:30px;">

<div style="margin-left:20px;">

<link rel="stylesheet" type="text/css" href="http://yourdomain.com/ColorFadingMenu/main.css"/>

<script type="text/javascript" src="http://yourdomain.com/ColorFadingMenu/jquery.js"></script>

<script type="text/javascript" src="http://yourdomain.com/ColorFadingMenu/jquery-color.js"></script>

<script type="text/javascript" src="http://yourdomain.com/ColorFadingMenu/main.js"></script>

<a class="hoverBtn" href="http://URLtoThePage" target="_top">Title</a>

<a class="hoverBtn" href="http://URLtoThePage" target="_top">Title</a>

<a class="hoverBtn" href="http://URLtoThePage" target="_top">Title</a>

<a class="hoverBtn" href="http://URLtoThePage" target="_top">Title</a>

<a class="hoverBtn" href="http://URLtoThePage" target="_top">Title</a>

</div></div>



Edit the code as follows:


Where it says http://yourdomain.com type your domain

Where it says width:660px you can define the width of the menu. You probably don’t have to change the height.

Where it says margin-left:20px you can define how far from the left you want the menu to display

Where it says http:URLtoThePage replace it with the URL to the page you want to open when that button is clicked and replace Title with the name you want to display in the menu



How to customize the appearance of the menu


To customize the appearance of the menu you have to edit its source files. Open the source files in TextWrangler to edit them.


How to change the background of the page


The background of the page is what displays around the menu. Ideally following my tutorial that shouldn’t display at all once you add the menu to your page but in case it does display this should equal the background color of the pages you add the menu to.


The background color of the page is changed in the main.css file where it says


body {

background-color:#222;


How to change the initial text color


The initial text color (color of the text when the page is loaded) is set in the main.css file where it says


div.hoverBtn a {

[...]

color:#000;


This should equal the color the text returns to after moving the mouse away from the link again.


How to change the text color displaying when pointing your mouse over a link (hover)


The color of the text displaying on hover is set in the jquery-color.js file where it says


Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),

Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),

Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)


The first three-digit vertical numbers (by default 255, 255, 255 hence white) are for the color of the text displaying when pointing your mouse over a link. Some RGB color codes are listed at the bottom of the file itself. If you know the hexdecimal color code (ex. 000000 for black) and want to find its RGB color code you can use this converter.


How to change the text color displaying when moving your mouse away from a link again (after hover)


The color the text returns to after moving your mouse over a link (hence after hover) is set in the jquery-color.js file where it says


Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),

Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),

Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)


The second three-digit vertical numbers (by default 0, 0, 0 hence black) are for the color of the text displaying when moving your mouse away from a link again. Some RGB color codes are listed at the bottom of the file itself. If you know the hexdecimal color code (ex. 000000 for black) and want to find its RGB color code you can use this converter.


This should equal your initial text color.


How to change the menu’s background color


To change the menu’s background replace the navBG.png image you find in the “images” folder inside your “ColorFadingMenu” folder. Make sure that width, height and name of your image equal the original image.


How to change the color the menu’s background changes to when pointing your mouse over a link


To change the menu’s background color on hover replace the navHover.png image you find in the “images” folder inside your “ColorFadingMenu” folder. Make sure that width, height and name of your image equal the original image.


How to change the font and the font size


To change change the font and the font size go to main.css where it says


*, body{ font-family: Trebuchet MS, Helvetica, Arial; font-size: 95%; }


Instead of Trebuchet MS type the name of the font you would like to use.

Instead of 95% type the size you want for the text in px (example: 12px)




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark