Circle Horizontal Navigasi Menu Dengan CSS3

postingan kali ini saya akan memberikan tutorial pembuatan menu navigasi dengan model circle atau lingkaran menggunakan css3. Menu navigasi ini full menggunakan css3 tanpa image, Circle Horizontal navigasi menu css3 ini cukup lumayan walaupun hasil dari iseng-iseng membuat lingkaran dengan css3 sehingga terpikir untuk di implementasikan kepada menu navigasi horizontal, ternyata cukup memuaskan hasilnya. Untuk contohnya lihat gambar dibawah ini.

circle navigasi css3
Untuk kode css3 lingkaran atau circle sebenarnya menggunakan border radius contoh kodenya seperti dibawah ini:
-moz-border-radius:100px; -webkit-border-radius:100px;

Langsung pada pembuatan circle menu navigasi dengan css3 :
Untuk lebih mudah tanpa obrak abrik kode template, jadi saya memasang navigasi ini langsung di widget.

Masuk pada Rancangan >> Tambah Gadget >> HTML/JavaScript
Masukan kode di bawah ini :

<style type="text/css">

ul#circle { display: inline;list-style: none; }
ul#circle li { margin-right:6px; float:left;width: 65px;height:65px; }
ul#circle li a {
text-decoration: none; width: 55px;height:55px; padding:5px;
font-size:8pt; font-weight:bold; font-family:georgia;
text-align:center; line-height:50px;
border: 1px solid #ff0000;
-moz-border-radius:100px; -webkit-border-radius:100px;
background: #ffffff; display:block; color:#000; }
ul#circle li a:hover {
background:#ff0000; border: 1px solid #000;
color:#fff; font-size:8pt; font-weight:bold; }

</style>

<div id='circle'>
<ul id='circle'>
<li><a href='http://chugygogog.blogspot.com' >HOME</a></li>
<li><a href='http://chugygogog.blogspot.com' >BLOG</a></li>
<li><a href='http://chugygogog.blogspot.com' >GRAFIS</a></li>
</ul>
</div>

Ganti teks warna merah dengan link anda, ganti juga warna biru dengan judul link yang diinginkan. Jika sudah silahkan di simpan.

NB :: Untuk penulisan judul link di usahakan tidak terlalu panjang karena menu ini menggunakan lebar dan tinggi yang sama sehingga jika penulisan judul linknya terlalu panjang maka teksnya akan keluar dari lingkaran menu tersebut. Selamat mencoba.

Komentar

ph-internet mengatakan…
Kalu css3 mancing bang hendro ke sini.
Keren chugy codingnya, kalu bisa saran coba warna di kasih filter buat di IE, maksudnya gradient.
Mungkin akan lebih bagus lagi.
(sekedar opini)
Chugy mengatakan…
Ph-Internet :: ia Um koding css3-y masih basic belum dikasih warna gradient...Buat iseng iseng aja...hehehehe.
thanks UM buat opininya.
mungkin kapan2 di tambahin dengan warna gradasi.
Belantara Indonesia mengatakan…
selalu simple spt ini ente bikin tutorial brad...salut.....ya simple dgn cara tak obrak abrk template.....keren...
Kian Coy mengatakan…
hemm..bnr juga sob..dgn CSS3 solusinya bisa lebih mudah..!!! saluut deh...!!! oya bos, mohon partisipasinya di Hari Sumpah Pemuda ini..kunjungi disini yach..!!!! mohon commentnya juga..!!!
Belajar CorelDRAW mengatakan…
ide baru, menu baru.mantap sob.
Ferdinand mengatakan…
sayang aku gak suka Horizontal menu SOb.. hhe.. makanya blogku dibikin Vertikal.. tapi keren tuh Sob..... btw, Quotes masih sering update gak Sob? aku udah 2 hari nie gak buka2 abis lebih lemot dari blogging hhe.....

happy blogging ya :P
zan P O P mengatakan…
makasih info dan tutor nya sob,ijin copas dulu siapa tahu suatu saat jenuh dengan tampilan blog yg sekarang ^_^'
Tip Trik Blogger mengatakan…
wah mantap sob....
kapan2 di coba
makasih ya infonya
Three mengatakan…
Ilmu yang bermnfaat :)
DenBaGas mengatakan…
Salam
Menyapa kawan dihari Sumpah Pemuda...
Mohon berpartisipasi dan dukungannya kawan...

Salam Kawan
Rizkyzone mengatakan…
keren sob, g pake edit html, kapan2 mau tak tes sob
Sisi Lain mengatakan…
pengin di terapkan sob. sesuai nggak ya dengan template-ku.. :D
om rame mengatakan…
tampak berbeda Lebih unik, tidak seperti pada umumnya yang berbentuk kotak atau Lonjong.
Pencari makna mengatakan…
Izin copas sob, tutornya bagus, terima kasih.
Pulau Banyak Online mengatakan…
kren.... kren.... kren.... kren.... makasi triknya mas,, saya pedatang baru ne saya dari aceh
Septian mengatakan…
Wahahahaha!!

Thanks tutorialnya Om :D Sangat membantu... :))
Pulung mengatakan…
nah itu masalahnya mas, teks musti ngikut elemen bukan elemen yang ikut teksnya :|
Unknown mengatakan…
ini navigasi bisa di bilang seo freindly nggak gan
Sahabat|BlogGeR mengatakan…
mksih gan atas info,nya ngomong2 itu navigasi menu nya seo freindly nggak,maklum lagi buat blog

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text