Scribd
Upload
35 views

Image Menu

The document provides instructions and code for creating drop-down menus on a website using DHTML and JavaScript, including an example of menus with submenus and explanations of the functions used in the code to show, hide, and style the menus on mouseover and mouseout events. Cut-and-paste code is provided to easily implement similar drop-down menus without much coding experience required.

Uploaded by

Ninu_Furia_9791
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views

Image Menu

The document provides instructions and code for creating drop-down menus on a website using DHTML and JavaScript, including an example of menus with submenus and explanations of the functions used in the code to show, hide, and style the menus on mouseover and mouseout events. Cut-and-paste code is provided to easily implement similar drop-down menus without much coding experience required.

Uploaded by

Ninu_Furia_9791
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Indented Individual Menu Items on Mouseover with CSS

The following CSS code will move the menu


item over 15 pixels on mouseover. Enclose
your menu code with a div with
The following animation shows a menu
class="menu" and put the following in
item being indented on mouseover
your CSS file:
with CSS as installed on AntiAging
Research
.menu a:link { color:#000000;
text-decoration: none;
margin-left:0px;
font-family: 'Arial Narrow', Helvetica,
sans-serif; }
.menu a:visited { color:#000000;
text-decoration: none;
margin-left:0px;
font-family: 'Arial Narrow', Helvetica,
sans-serif; }
.menu a:hover { color:#cccccc;
text-decoration: none;
margin-left:15px;
font-family: 'Arial Narrow', Helvetica,
sans-serif; }
Vertical Menu Samples in CSS and HTML using Lists
The vertical menu sample shown on the left is designed as a list
and works on all major browsers and produces a menu with
graphic 3-D buttons which are controlled by CSS but the text is
controlled by HTML. This enables the text to change color on
mouseover and floats over the buttons so search engines can read
the text (they can't read text on images). There is actually only
one button loading multiple times and thus you can change the
style or color of the button without having to change the text.

You can control the vertical spacing between menu links with CSS
by setting up a class for the menu links and specifying line height
as shown below. See the source code on this page for the list
formatting with CSS and how to load the button image.

NOTE: I had to take the code for this vertical menu off the page as
too many idiots were copying it without changing the urls to point
to their own site and then I was getting a lot of bogus site-wide
links from other sites. Just set up a simple menu for your site
encased in a list format and it should work.

.menu a:link {color: #000000;


font-weight: bold;
background: transparent;
line-height:1.5em;
text-decoration: none;
font-size:11px; }
Image Map Drop Down Menus
Use the following DHTML script to give a neat navigation for your site without much code
involved. It is easy to integrate and modify for an amateur designer, however you need to have
some knowledge of HTML.
Example

Example of drop-down menus

Web site Design & Redesign

Dynamic Web site Development

Flash Animation & Programming

Smart Survey

Smart Poll

Smart Quote

Smart Guestbook

Smart Referrer

Design Packages

Instant Quote

Note: In the above example there are 3 drop down menus, i.e. for the Services, Products and
Rates links.
View Explanation of the Code

Cut and Paste Code

Cut 'n' paste code for the above Example


JavaScript Code download file
HTML Code
N: absolute; VISIBILITY: hidden; Z-INDEX: 1}
SITION: absolute; VISIBILITY: hidden; Z-INDEX: 1}
SITION: absolute; VISIBILITY: hidden; Z-INDEX: 1}
SITION: absolute; VISIBILITY: hidden; Z-INDEX: 1}
"color:black;background-color:#99ff99">menu</b>

Instructions
Copy the Javascript code from the downloaded file and place it in the head content of your page
and place the HTML code in the body of your page.
Make a transparent 1x1 gif called shim under your images folder as 'div' tag layers need an
image to be present to work in lower versions of Netscape (below 6). You can manipulate the
position of the layers where they appear in the following lines of code:
img = getImage("imgTabs");
x = getImagePageLeft(img);
y = getImagePageTop(img);
menuTop = y + 20 ; // LAYER TOP POSITION
SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION

img represents the single image with an image map or the first image from the left if you are not
using maps but a series or images (named imgTabs). To test this example you can save our
image and change the path to it in the HTML. All the layers should have the same position from
the top of img represented by menuTop (here we have used 20 you can change this according to
your requirement). From the left of img the distance is given for each layer (we have taken 55,
120 and 260 which can be changed by you). If you have new layers be sure to add variables with
the id of the layer followed by a capital 'L'.
If you want different colors for the menu rows, mouse over background and layer background
then instead of changing it everywhere just do a find and replace for red (#990000), light yellow
(#FFD784) and dark yellow (#FFB928) respectively.
If you are trying to use more drop down menus then you need to change the name of the new
div layer id field and also change the reference to it in the link onMouseOver event for the map
image or linked image. Also give each row (<tr> tag) a new id property for each row and change
the reference to it in the link onMouseOver event for the respective content of the row.
Explanation of the Code
The JavaScript has the following main functions:
• Function showLayer is used to make the tip box appear : This function first
finds the top and left position of the place holder shim image (usually placed
following the link) by its name passed to it while calling the function in the
link onMouseOver event. Next it shows the div tag layer by the layer name
passed to it by setting its visibility property (to 'show' in Netscape and
'visible' in IE).
• Function btnTimer is called to hide the current drop down menu on the
onMouseOut event after a small pause : This function waits for a small time
period (here 1000 milliseconds i.e. one second) and then calls the hideLayer
function (it passes the visible layer name).
• Function hideLayer is used to hide the visible tip box by setting the visibility
property of the layer to 'hide' in Netscape and 'hidden' in IE.
• Function setBgColor is used to change the color of the row background for
the menu items.

http://msdn.microsoft.com/en-us/library/aa218659(v=office.11).aspx.

You might also like