Ads 468x60px

Τρίτη, 3 Δεκεμβρίου 2013

CSS Circle Menu

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα οριζόντιο menu με κυκλικά
κουμπιά για τις κατηγορίες του, διαφέροντας έτσι από άλλα που έχουμε δει σε
παλαιότερες αναρτήσεις, και είναι και αυτό με Css κώδικα για να μην καθυστερεί 
το άνοιγμα του blog μας!




Δείτε εδώ το DEMO



και για να το εγκαταστήσετε και εσείς

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
................................................................................................................................................................
<center>
<style type="text/css">

.circlemenu{
width: 100%;
overflow:hidden;
}

.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.circlemenu li{
display: inline;
margin: 0;
}

.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*right spacing between each link */
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.circlemenu a span{
position:relative;
top:40%;
}

.circlemenu li a:visited{
color: white;
}

.circlemenu a:hover{
background: #a71b15;
}

</style>
<div class="circlemenu">
<ul>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"><span>ΤΙΤΛΟΣ</span></a></li>
</ul>
</div></center>
..........................................................................................................................................................
ΑΛΛΑΓΕΣ
ΔΙΕΥΘΥΝΣΗ URL-- Eδώ βάζετε το link της διεύθυνση σας!
 
ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο που θα φαίνεται στην μπάρα του μενού!
 
Μόλις τελειώσετε Αποθήκευση και είστε έτοιμοι!


Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to dynamicdrive.com



 Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog