Circular Menu
Menu sederhana ini merupakan satu perubahan multi-level menu, dapat menghasilkan A circular menu ( Menu melingkar ). Dengan menggunakan gambar latar belakang dan teks yang digunakan untuk memberikan penjelasan singkat tentang setiap ikon saat mouseover diatas ikon.
Teruji pada beberapa browser, seperti, di IE6, IE7, Firefox, Opera, Safari (PC) dan Google Chrome.
Demo Circular Menu
Letakan cursor pada Ikon...- HOME
back to the start - CHAT
talk to friends in real time - EMAIL
send us your thought on an email - SHOP
online shopping for all your needs - DELIVERY
track your deliveries - SEARCH
search our enormous site - ADDRESS
why not send us a letter - UPLOAD
upload images to your web space
Untuk menciptakan A Circular Menu, silahkan gunakan Kode lengkap berikut ini:
Kode CSS
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/circular.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(circular/background.gif) no-repeat;}
#circularMenu li {display:block; width:60px; height:60px; position:absolute;}
#circularMenu li.home {left:120px; top:4px; background:url(circular/home.gif) no-repeat center center;}
#circularMenu li.chat {left:200px; top:40px; background:url(circular/chat.gif) no-repeat center center;}
#circularMenu li.upload {left:35px; top:40px; background:url(circular/photo.gif) no-repeat center center;}
#circularMenu li.email {left:230px; top:115px; background:url(circular/email.gif) no-repeat center center;}
#circularMenu li.address {left:5px; top:115px; background:url(circular/address.gif) no-repeat center center;}
#circularMenu li.shop {left:200px; top:190px; background:url(circular/shop.gif) no-repeat center center;}
#circularMenu li.search {left:35px; top:190px; background:url(circular/search.gif) no-repeat center center;}
#circularMenu li.delivery {left:120px; top:225px; background:url(circular/delivery.gif) no-repeat center center;}
#circularMenu li a b {display:none;}
#circularMenu li a {display:block; width:60px; height:60px; text-align:center;}
#circularMenu li a:hover {background:url(circular/circle.gif); text-decoration:none; font-family:georgia, serif;}
#circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;}
#circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;}
#circularMenu li.home a:hover b {left:-22px; top:100px;}
#circularMenu li.chat a:hover b {left:-102px; top:64px;}
#circularMenu li.upload a:hover b {left:63px; top:64px;}
#circularMenu li.email a:hover b {left:-132px; top:-11px;}
#circularMenu li.address a:hover b {left:93px; top:-11px;}
#circularMenu li.shop a:hover b {left:-102px; top:-87px;}
#circularMenu li.search a:hover b {left:63px; top:-87px;}
#circularMenu li.delivery a:hover b {left:-22px; top:-121px;}
</style>
Kode HTML
<li class="home"><a href="#url"><b>HOME<br /><span>back to the start</span></b></a></li>
<li class="chat"><a href="#url"><b>CHAT<br /><span>talk to friends in real time</span></b></a></li>
<li class="email"><a href="#url"><b>EMAIL<br /><span>send us your thought on an email</span></b></a></li>
<li class="shop"><a href="#url"><b>SHOP<br /><span>online shopping for all your needs</span></b></a></li>
<li class="delivery"><a href="#url"><b>DELIVERY<br /><span>track your deliveries</span></b></a></li>
<li class="search"><a href="#url"><b>SEARCH<br /><span>search our enormous site</span></b></a></li>
<li class="address"><a href="#url"><b>ADDRESS<br /><span>why not send us a letter</span></b></a></li>
<li class="upload"><a href="#url"><b>UPLOAD<br /><span>upload images to your web space</span></b></a></li>
</ul>
wkwkwkkw kayak yg aku share dulu ini :D
ReplyDeleteOops' maaf saya tidak tahu! Tutorial ini asli saya buat sendiri dengan nara sumber dari CSSplay. Demonstrasi ini hanya sebagai reminder buat saya dan hanya sekedar share buat siapa saja yang mungkin belum tahu atau belum sempat membaca tutorial ini. terimakasih
Deletesama aja bang aku juga dapat dari sana :) maksud saya itu sama menunya :D
Delete[img]https://lh5.googleusercontent.com/-L9vwT10iQsg/Tmhf9bHP8xI/AAAAAAAABAg/FJKubDKzp1w/boyreadingbook.gif[/img] Wolzz..
ReplyDelete