Navigation Bar--Expanded navigation bar

1. Overview

For a corporate website, the "Contact Us" hyperlink is essential. To be more noticeable, you can make it into a navigation bar with an expanded animation effect. Running this example, the reader can see the "Contact Us" navigation bar on the right side of the page is slowly expanding, and each time the page is refreshed, it will be expanded with the same animation effect.

2. Technical Highlights

This example uses the custom JavaScript function ourmove () to control the height property value of an Image object. In order to animate, you also need to apply the settimeout () method in JavaScript functions to delay the operation of changing the height of the image.

3. Concrete implementation

(1) In the page to display the "Contact Us" navigation bar location Insert a full expanded "contact Us" navigation image, the text that needs to set the hyperlink to add a picture hotspot and set the corresponding hyperlink.

(2) Set the Height property value of the picture to the 0,name property to our.

(3) Write a custom JavaScript function ourmove (), which is used to implement the image expansion effect. The code for the Ourmove () function is as follows:

<script language= "javascript" >function  ourmove () {        if(our.height<163) {          our.height=our.height+9;          SetTimeout (Ourmove,1);    // Call the Ourmove function once every millisecond        }}</script>

(4) at the bottom of the current page, that is, before the </body> tag, add the following code to call Ourmove (), to achieve the expanded animation effect of the navigation bar.

<script language= "JavaScript" >     ourmove (); </script>

Navigation Bar--Expanded navigation bar