Cara membuat menu lingkaran CSS3

sudah lama tidak posting tutorial dan kali ini senantiasa belajar share tutorial blogger sederhana yaitu membuat menu circle Navvigasi menu memang sangat berguna bagi navigasi blog anda nah disini contoh dari menu circlenya. Sebuah trik CSS yang menarik adalah penciptaan "lingkaran", dengan menggunakan border-radius properti CSS3 yang diatur ke nilai yang sangat besar: Ketika Anda melakukan ini, perbatasan pada masing-masing dari empat sudut elemen bergabung menjadi ujung putaran terus menerus, menciptakan tampilan lingkaran. Menggunakan trik kecil yang bagus, berikut ini menciptakan serangkaian link menu lingkaran:

Kunci seperti yang disebutkan adalah hanya untuk mengatur properti border-radius ke nilai yang sangat besar, setidaknya 50% dari kedua lebar dan tinggi elemen:

width:100px;height:100px;border-radius: 400px; /*really large border radius to create round borders*/-moz-border-radius: 400px;

-webkit-border-radius: 400px;

kode CSS secara keseluruhan

.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;}

untuk pengguna Blogger Kode CSS nya bisa anda tempatkan DI atas ]]></b:skin>

HTMLNYA

 <div class="circlemenu"><ul><li><a href="http://www.namabloganda.com"><span>Home</span></a></li><li><a href="http://www.namabloganda.com/new.htm"><span>DHTML</span></a></li><li><a href="http://www.namabloganda.com/"><span>CSS</span></a></li><li><a href="http://www.namabloganda.com/"><span>Forums</span></a></li><li><a href="http://www.namabloganda.com/"><span>JavaScript</span></a></li></ul></div>

nah anda bisa tempatkan kode HTML menurut kehendak andadan ganti URL nya


jika anda ingin menempatkan di HTML javascript anda copy seluruh kode berikut dan tambah ke widget anda

kode :

<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="http://hendrytha.blogspot.com/"><span>Home</span></a></li><li><a href="http://hendrytha.blogspot.com/"><span>DHTML</span></a></li><li><a href="http://hendrytha.blogspot.com/"><span>CSS</span></a></li><li><a href="http://hendrytha.blogspot.com/"><span>Forums</span></a></li><li><a href="http://hendrytha.blogspot.com/"><span>JavaScript</span></a></li></ul></div>