cara membuat menu berbentuk lingkaran

,Okeh dikesempatan kali ini saya akan share cara membuat menu berbenti Circle atau Lingkaran. Caranya cukup mudah kok, tinggal menambahkan Gadget HTML / Javascript saja. Bagi yang pande main blog pasti tau dimana diletakkan menu ini hehee.

Kodenya :

<ul id="MenuBundar">

<li class="home"><a href="#"><b>Udah Tidur Belom Nih</b></a></li>

<li class="chat"><a href="#"><b>Chattingan Dengan Sobat Blogger</b></a></li>

<li class="email"><a href="#"><b>Kirim E-mail Ke saya</b></a></li>

<li class="shop"><a href="#"><b>Toko Online Gan</b></a></li>

<li class="delivery"><a href="#"><b>Mobil Tukang NAgih Utang Nih....??</b></a></li>

<li class="search"><a href="#"><b>Kaca Pembesar Buat Nyari Artikel</b></a></li>

<li class="address"><a href="#"><b>Catatan Hutang </b></a></li>

<li class="upload"><a href="#"><b>Photo - Photo Blogger</b></a></li>

</ul>

<style type='text/css'>

#MenuBundar {

padding: 0;

margin: 0 auto;

list-style: none;

position: relative;

width: 300px;

height: 300px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSQeAEen1mPhgZTcBkfLfhznH08lzrFXKbZC8QigjBumz9EtqSEbeoWA6gpbrGTogf9cCPb8-D_rSosQmVvJdMUVRNVqYUlbHWlGjj75_1Tfhrbu0WZO9UqEt-I5m8ralCabstHE-mvWWk/s1600/background.gif) no-repeat

}

#MenuBundar li {

display: block;

width: 60px;

height: 60px;

position: absolute

}

#MenuBundar li.home {

left: 120px;

top: 4px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFsWG-XSzOiYuxj3mhHGRYv3VYQ1J51ZPMmlb6zsQdRGF6B8Owv1WH7HZlrWV-h6cbQ3uMWnbF9G4zGFWR2dnCl_40TcjjhLdhnE8Etdd27hYFR_V8q_eGTTXdu0nGKP32izElhT_vRQa/s1600/home.gif) no-repeat center center

}

#MenuBundar li.chat {

left: 200px;

top: 40px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTkKA1y3GENgv9ZN83BuKN3SdpV-UgFJTWjtzHre0IJKac4FmZBeWOpjpaHSCGkN_J_IsttNiMdq9KkI4xbYXDid4x4l_cGDW7l-rpvHRxVtTrGBBk8OnzFaKQzOFgMmKiVv7WaMOVszy/s1600/chat.gif) no-repeat center center

}

#MenuBundar li.upload {

left: 35px;

top: 40px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr2MBaV_wiaDLzO4HCRrSXl990xOVqbmQi014AmKKrs8_t9nAP0P03qkX9E2ztBFaM-GOQ3xr6hoHXP8V3c4oP-BpdkLLQ4A3wzt41yyf0HxzFJ6MS83bzU8-tzUHMt2r-lzAakm2ry74I/s1600/photo.gif) no-repeat center center

}

#MenuBundar li.email {

left: 230px;

top: 115px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvcbmtpWrGEN5dad2gTuYrcdGWfCRiTmzrmi7_xGEvAoM-WhRnpL5SqpWnHZdxM2QBo3dvniYZZbMsXETaGrSnssuPIjkuqiRMovjmkcJMWWNZ1ardaCmQbPHfkWcf3q91in7oBKu5v1U/s1600/email.gif) no-repeat center center

}

#MenuBundar li.address {

left: 5px;

top: 115px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL_ZjPsNo51UnaxOJs2V7TYeqQIZxidv-mqmBTDV7GSw0wXshdIMyc16g4tCUE_TYrjC59unPz4IOQXaX9XMZvu8hkZEuKYGe10B2gKnxhl7RDVsbQ1VgYqnUz-nafPwkHL37XvbHNIned/s1600/address.gif) no-repeat center center

}

#MenuBundar li.shop {

left: 200px;

top: 190px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXI55-54yaBzCBmmYWZ6mGNcpOM7n2f4-M-Aut46iJhMV0Om6brOIqPIbeB8i1YstsLvpT75VlOuAxR-uBJeZxrr88x3rXXqlMeeGweR-RF8EKYuPh53aWO15ogbMx1qPCq9vOo5tUDs8y/s1600/shop.gif) no-repeat center center

}

#MenuBundar li.search {

left: 35px;

top: 190px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhasBGkl1Qzh80Bvv4U6le7x-6Sh-kqIOhsduanDgMwhJyQRBiem6OTkvfDxGPnMMLMu36QI75SjSobSntbiHLW3ccbcxi4dEW28_mm6J_DTZUp5sjM1Lv0tkehzfSIjFVNZcYaUP6vUQ5/s1600/search.gif) no-repeat center center

}

#MenuBundar li.delivery {

left: 120px;

top: 225px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiekMh-YifU0ldZVhkGrqt9jKC9IWsh-rQRNl_AzLr1iCIENzQjTmNGxvhAprT3TctcRdzvVwhXPHA_ZdTTkpHSGjcDKVq2wlwdDnaz6VS9P_BgD27rIa5YIaWYcNrcrNFcVtwgqPtdgVbw/s1600/delivery.gif) no-repeat center center

}

#MenuBundar li a b {

display: none

}

#MenuBundar li a {

display: block;

width: 60px;

height: 60px;

text-align: center

}

#MenuBundar li a:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgRveLKEQdQNvpftdkRHmjRzMa-JKza1t353z8JjoJOC73jGauJQBtIJ9EsEVafWBz-lEUXtTHXfzihypUpFvJmIsH2OTKaKTFTC6z0i6QZlc8WLR2uvpbISxsSG-WB_g8KYAhHbYTOK5/s320/circle.gif);

text-decoration: none;

font-family: georgia, serif

}

#MenuBundar li a:hover b {

position: absolute;

display: block;

width: 100px;

height: 100px;

font-size: 14px;

color: #63352c;

background: #FFF

}

#MenuBundar li a:hover b span {

display: block;

font-size: 12px;

color: #888;

font-weight: normal;

margin-top: 15px

}

#MenuBundar li.home a:hover b {

left: -22px;

top: 100px

}

#MenuBundar li.chat a:hover b {

left: -102px;

top: 64px

}

#MenuBundar li.upload a:hover b {

left: 63px;

top: 64px

}

#MenuBundar li.email a:hover b {

left: -132px;

top: -11px

}

#MenuBundar li.address a:hover b {

left: 93px;

top: -11px

}

#MenuBundar li.shop a:hover b {

left: -102px;

top: -87px

}

#MenuBundar li.search a:hover b {

left: 63px;

top: -87px

}

#MenuBundar li.delivery a:hover b {

left: -22px;

top: -121px

}

</style>

Silahkan ganti nama menu dan link menunya sob =)



sumber  http://davidchielietonga06.blogspot.com/2012/06/cara-membuat-menu-berbentuk-lingkaran.html

Artikel Terkait: