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

<style type="text/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

<ul id="circularMenu">
    <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>

Sumber: CSS play