Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Making a circle navigator in html

Making a circle navigator in html

Problem

Is it possible to make a Circle Navigator ? example a circle divided into 4 and each division has different links on it?

and also if it is possible can i put animations on them or color change when a mouse hover? tnx...

Problem courtesy of: Frankie Roy Sanqui Niverba

Solution

Use border-radius

HTML

link 1
link 2
link 3
link 4

CSS

#circle-container{width:100px;height:100px}
.quarter{width:50px;height:50px}
.top-left{border-top-left-radius:50px;background:#e3f9d1;float:left}
.top-right{border-top-right-radius:50px;background:#c0f7f7;float:right}
.bottom-left{border-bottom-left-radius:50px;background:#fc92f5;float:left}
.bottom-right{border-bottom-right-radius:50px;background:#333;float:right}
a{
 text-decoration:none;
    color:red;
    width:50px;
    line-height:50px;
    display:block;
    text-align:center
}

DEMO

Solution courtesy of: Sowmya

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Making a circle navigator in html

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×