April 8th 2017 03 Easter Rare Cutouts April 1st 2017 03 Easter Background PSDS01 Easter Brush Pack05 Easter Color Schemes03 Easter Phone Wallpapers03 Easter Cutouts March 19th 2017 03 Easter Cutouts01 Easter Color Scheme Template March 17th 2017 20 Site Names 10 Font Previews Easter + Spring Content 04 Sign Decos 20 Color Schemes 04 Vector Masks 03 Border PSDS 03 Tiff Montesco Cutouts 06 Avatars 02 Brush Packs Installing WordPress Using FTP Installing WordPress Themes Using FTP Defining Patterns Individual Letter Coloring Patterned Text Preppy Text Version One Simple Text Version One Simple Text Version Two March 14th 2017 01 St. Patrick's Cutout March 8th 2017 01 St. Patrick's Cutout 01 Cara Daley Cutout 02 Miranda Seto Cutouts 02 Rare Zoe Monroe Cutouts 02 Zoe Monroe Cutouts Double Box Navigation Tutorial March 1st 2017 15 Color Schemes 10 Avatars 01 Pattern PSDs 02 Brush Packs 02 Alva Jay Cutouts 03 Alva Jay Rare Cutouts 03 St Patricks Color Schemes 03 St Patricks Background PSDs Creating ABR File Tutorial Installing ABR File Tutorial Kerning Text Tutorial Creating Circle Brushes Tutorial Feb 16th 2017 Circle Navigation Tutorial Defining Brushes Tutorial Feb 14th 2017 10 Color Schemes Coding A College Layout Feb 8th 2017 2 textures 3 site model singles 10 avatars 2 Laura Delagarza cutouts 2 Zoe Monroe cutouts
- - - Previous Updates - - -
a b c d e

Circle Navigation

Information

Difficulty: Easy
Class: HTML Coding

Date Posted: May 22nd 2016
Revamped: February 15th 2017

Comments: Please don’t forget to credit everaft3r.net,
please do not redistribute my tutorial.


This tutorial will teach you how to style your navigation link into circles. It should look something like this.

Link Link Link Link

Step One

Take the following code below, and add it too your style.css

a.circlenavigation, a.circlenavigation:active, a.circlenavigation:visited {
display:inline-block; width:40px;
color: #eee;
line-height:40px;
font-size: ;
border-radius:999px;
font-weight: normal;
text-align: center;
margin:1px;
transition: all 0.8s ease-out;
background-color:#cccccc;
border:1px solid #d3d3d3;
}

Next you are going to want to edit the coding, so that it matches with you layout. Below are the main areas you want to focus on when editing the code

width: this is how big your circle is going to be, you can play around with the size
line-height: this is the spacing of the letters to the top of the circle. You are going to want to match it with the width
font-family: this is the font style, you change it anyone you want
font-size: this is the size of your font
color: this changes the color of your font
background-color: this changes the base color of the circle
border:this is the border that is around the circle, you can either, change the color, or remove the whole line

Step Two

Now you are going to take the code below and paste it on the style.css right under that last code you just added. This next code is the hover code, when you hover over the link this code will come into play. You will just have to play with the border and the link color for this one, you are more then welcome to add some coding from the top. (Example: If you are wanting a different background color when you hover over it, just add background-color:#cccccc; to the coding.

a.circlenavigation:hover {
color:#DADADA;
border: 1px solid #d3d3d3;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

Step Three


For the final step you are going to add the actual coding for the circles. Open up the file/page you would like to display the circle navigation. Where is says URL HERE paste the url of the page you are wanting to link.
Where it says LINK NAME, is the name of the page

<a href=”URLHERE” class=”circlenavigation”>LINKNAME</a>
<a href=”URLHERE” class=”circlenavigation”>LINKNAME</a>
<a href=”URLHERE” class=”circlenavigation”>LINKNAME</a>
<a href=”URLHERE” class=”circlenavigation”>LINKNAME</a>