» » cara membuat menu berbentuk lingkaran
Edit

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.
menu keren 2011

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/AVvXsEiQH0BQjm5h8W28L2CyPiPV6RQXQDGY1HN9yOqJlv-Qi7TNDZSjoghJOg3u8wJfYtk51jqTlNJ4UfnZq2s4hIjpPl30kv3bxM_6yVTNH7JwWArsF_7bt-oiFH4ZKsj8zdKF_ar8lxBWRRpF/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/AVvXsEgtAI5ZfHCBCkUSbr0_K5DJ42cq3tlPhulAXbn7WJcDed4QF8OSzFVhjLfCq91hr_1-EaUlvYsXtqwYrlCusI6BwORxpoXAxpRfstN3bwhkAIFpsrksyOCuebV86CesK8t59kMpAWmeeLut/s1600/home.gif) no-repeat center center
}
#MenuBundar li.chat {
left: 200px;
top: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5nw0UDwJAJjTM_AIz_PhUSyRyI7RM9liKSHdep92vU_iFmX4QRVBPcGHzMW-GszeiGXYvSw_6u4fokSwEKuqnXyEkoNWI_ecuFomRpDM_QOGy4EK36pWkjTsfqr5NaVO9UIASBU7D12cO/s1600/chat.gif) no-repeat center center
}
#MenuBundar li.upload {
left: 35px;
top: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkswLAKAsasxP7AS9MPMx0XwQ00bh_Hc_bluGebCVpGatwWJDZdG1Jvn5UI84xjzNcRWgVJUUhUP2TLXn-CZQOOFy_C39Apr9fUtvNAx4IOOipTOUWLkjyNxtUusEzFaJN0EigxmXNN_wA/s1600/photo.gif) no-repeat center center
}
#MenuBundar li.email {
left: 230px;
top: 115px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXCY1iMxSxetWNX7STQ5xmLiCoM9y5ACxJbllI-RwsTEzJcIO83k5m6-iojCbiUoFSsoLuyEcBdyWQ-OdlWvHVupxouvBF-yVYDxai31v0UoesWojigWm3nO6pC9r3HNlvjOo30u1Eu9k/s1600/email.gif) no-repeat center center
}
#MenuBundar li.address {
left: 5px;
top: 115px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLCIagDY4CW2QeE3B7-3CwpzsclvUYlvYIuT_BFr_aRxZQrZmSE_axEv7yAt5o5mCM_GjAQyPBfi21DNRI7-q6WBBUTfLrix2Ub1DnyL0Irjro-Q9LAh1wdVzLFuQr-lLyqg0zHRUM2Dl/s1600/address.gif) no-repeat center center
}
#MenuBundar li.shop {
left: 200px;
top: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkF74d1H09fDcyOY5Ej-TfpjMX6Q2KOJvdpsDm0qDLgx0fCYvM-qi9SQnqCWsy9ysxj6c1luB9ls3Er_EwQ2-e4bolHznSD6ImMDz5KZQ9WAI-BnwlDI8SKmIg_fMrnE4o6Ha9vUPhoWih/s1600/shop.gif) no-repeat center center
}
#MenuBundar li.search {
left: 35px;
top: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOPov0CdWO2HL1kywoOieCQn__31WvGR1q6AEfUgbMOPkQ_FzpWF1fWUJ1pZnJjXk8WY7mXuqPQpc15wc-p59KmB9KUUpTx_4_Da0EInEp1ZadZttCWltD7T-RH9wsww3apQI-kOu_4yoA/s1600/search.gif) no-repeat center center
}
#MenuBundar li.delivery {
left: 120px;
top: 225px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFvN2R9BSwJsRMIwMxHwwB2gGfu-lRo4qOLE640WjTepsh-zS2gNA6zqpdbPXKGXVOetK5xaJvPkyymlA85T0rm24hUokN8l03_eLuJb20OINngkJOaJgvon8FWIH43NXZWEETP1a_DJD/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/AVvXsEjgaSfihZuo4A40vwnMNCfMoAdvi68-4doz0BeHBIuzuyd-_M6mK3EvByU0pLPT8Tzq6P97kCVBZydjVrpcO796ToGVS8NKmhpRn2p74vHDK9AeNheZcUxgST4o-dcXq8ErJR17CVWp2aM7/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

Related Posts :

0 Response to "cara membuat menu berbentuk lingkaran"

Posting Komentar

Langganan: Posting Komentar (Atom)