Circular Menu | Buku Catatan si Ugi

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.



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




4 komentar:

  1. wkwkwkkw kayak yg aku share dulu ini :D

    ReplyDelete
    Replies
    1. Oops' 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

      Delete
    2. sama aja bang aku juga dapat dari sana :) maksud saya itu sama menunya :D

      Delete
  2. [img]https://lh5.googleusercontent.com/-L9vwT10iQsg/Tmhf9bHP8xI/AAAAAAAABAg/FJKubDKzp1w/boyreadingbook.gif[/img] Wolzz..

    ReplyDelete


Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan