Menu boczna w kwadracikach (Mia)

Pokażę Wam szybki sposób na tworzenie takich kwadracików w PageList1.

Pamiętacie instrukcje z kółkami? Kod wygląda praktycznie tak samo, tylko że nie dajemy BORDER-RADIUS lub zmniejszamy jego wartość od 0-10px

Kod css: (na 5 kwadracików o różnych rozmiarach)

#PageList1 a {
text-transform:uppercase;
letter-spacing:2px;
font-family:Calibri;
font-size:9px !important;}

#PageList1 {

position:absolute;

top:290px;} /*wartość do indywidualnego ustawienia u siebie na blogu*/

#PageList1 li:first-child a {
position:absolute;
top:-800px;
width: 90px;
left:320px;
height: 50px;
border-radius: 10px;
padding-top: 40px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#000e4e ;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font: 11px Verdana;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;

margin-top: 11px;
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg); }

#PageList1 li:first-child a:hover {
background:#0075c6;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg); }

#PageList1 li:nth-child(2) a {
position:absolute;
top:-690px;
width: 120px;
left:310px;
height: 60px;
border-radius: 10px;
padding-top: 60px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#0075c6 ;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #000;
font: 11px Verdana;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
margin-top: 11px;
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg); }

#PageList1 li:nth-child(2) a:hover {
background:#000e4e;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg); }

#PageList1 li:nth-child(3) a {
position:absolute;
top:-550px;
width: 100px;
left:320px;
height: 50px;
border-radius: 10px;
padding-top: 50px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#000e4e ;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font: 11px Verdana;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
margin-top: 11px;
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg); }

#PageList1 li:nth-child(3) a:hover {
background:#0075c6;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);}

#PageList1 li:nth-child(4) a {
position:absolute;
top:-430px;
width: 70px;
left:330px;
height: 40px;
border-radius: 10px;
padding-top: 30px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#0075c6 ;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #000;
font: 11px Verdana;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
margin-top: 11px;
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg); }

#PageList1 li:nth-child(4) a:hover {
background:#000e4e;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);}

#PageList1 li:nth-child(5) a {
position:absolute;
top:-340px;
width: 90px;
left: 320px;
height: 50px;
border-radius: 10px;
padding-top: 40px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#000e4e ;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font: 11px Verdana;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
margin-top: 11px;
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg); }

#PageList1 li:nth-child(5) a:hover {
background:#0075c6;
transform:rotate(360deg)
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);}

a:link {
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}

a:hover {
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}

Jeśli chcemy mieć kolejne kwadraciki dodajemy oczywiście wszystko tak samo i zmieniamy tylko numerki ;) Proste, prawda? Oczywiście wartości typu tło czy kolor czcionki i rozmiar zmieniamy wedle uznania ;)