Advertise

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.

19 komentar:

  1. 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)

    BalasHapus
  2. 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.

    BalasHapus
  3. selalu simple spt ini ente bikin tutorial brad...salut.....ya simple dgn cara tak obrak abrk template.....keren...

    BalasHapus
  4. 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..!!!

    BalasHapus
  5. 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

    BalasHapus
  6. makasih info dan tutor nya sob,ijin copas dulu siapa tahu suatu saat jenuh dengan tampilan blog yg sekarang ^_^'

    BalasHapus
  7. wah mantap sob....
    kapan2 di coba
    makasih ya infonya

    BalasHapus
  8. Salam
    Menyapa kawan dihari Sumpah Pemuda...
    Mohon berpartisipasi dan dukungannya kawan...

    Salam Kawan

    BalasHapus
  9. keren sob, g pake edit html, kapan2 mau tak tes sob

    BalasHapus
  10. pengin di terapkan sob. sesuai nggak ya dengan template-ku.. :D

    BalasHapus
  11. tampak berbeda Lebih unik, tidak seperti pada umumnya yang berbentuk kotak atau Lonjong.

    BalasHapus
  12. Izin copas sob, tutornya bagus, terima kasih.

    BalasHapus
  13. kren.... kren.... kren.... kren.... makasi triknya mas,, saya pedatang baru ne saya dari aceh

    BalasHapus
  14. Wahahahaha!!

    Thanks tutorialnya Om :D Sangat membantu... :))

    BalasHapus
  15. nah itu masalahnya mas, teks musti ngikut elemen bukan elemen yang ikut teksnya :|

    BalasHapus
  16. ini navigasi bisa di bilang seo freindly nggak gan

    BalasHapus
  17. mksih gan atas info,nya ngomong2 itu navigasi menu nya seo freindly nggak,maklum lagi buat blog

    BalasHapus