Thursday, March 4, 2010

Circular menu (using CSS)

The menu such as above can be created using HTML and CSS.
To see it working just click on menu example link present on right top corner of your screen.
All you need to do is download the following files and make the appropriate changes according to your use.
HTML page:-
CSS page:-

Now you can make the following changes according to your need:-
  • In menu.css under heading anchor styles ,you will find 8 such declaration as shown:-
Now change the url to appropriate image URL you want to give for corresponding label for all 8 labels.
Also you can change the name of label in all of their occurances in whole file.

  • Next open the HTML file.
 Here find the definition for 8 labels such as one shown here:-

Here replace # with the URL you want the label to redirect.
Also replace strong tag and span tag content to appropriate value.
Also change the ID according to the value you changed in CSS
Finally you can add or remove the overhead text by head tags.
Warning:- I have experienced that some .GIF images are not supported so try using jpeg.

No comments:

Post a Comment

customised by Vaibhav