Membuat menu navigasi ( Following cursor )

Pujangga Blogs

07 January 2011

Membuat menu navigasi ( Following cursor )

Pada tulisan kali ini kita akan mencoba membuat menu navigasi yang mana menu navigasi tersebut nantinya akan mengikuti pergerakan kursor.Untuk lebih jelasnya anda bisa lihat demo nya disini.
Kalau kita lihat hasil demonya mungkin bagi anda yang pernah atau sampai saat ini memakai efek kursor ular-ularan berpikir bahwa ada kesamaan efek yang diterapkan ,dimana setiap pergerakan kursor selalu di ikuti dengan sederatan angka atau simbol yang bergerak seperti ular.
bagaimana kalo kita langsung coba saja cara membuat floating cursor following menu tersebut. 

Kode CSS
Rangkaian kode CSS yang akan kita pakai di dalaman tag head pada halaman template untuk membuat floating menu adalah sebagai berikut.

@charset "utf-8";
/* cursor following menu style */
#cf_menu{position:absolute; display:inline-block; z-index:10; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:pointer; top:0; left:0; background:url(empty.gif);}
/* stupid IE needs a background value */
#cf_menu .container{position:relative; font-family:Arial, Helvetica, sans-serif; font-size:10px;}
#cf_menu .title{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#333; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px; color:#fff; padding:5px 8px;}
#cf_menu ul{margin:0; padding:0; list-style:none; display:none;}
#cf_menu ul li{margin:0; padding:0;}
#cf_menu ul ul{margin:0 0 0 2px; padding:0; list-style:none; display:inline-block;}
#cf_menu ul ul li{margin:0 2px 0 0; padding:0; display:inline-block;}
#cf_menu a:link,#cf_menu a:visited{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px 1px 5px 1px; padding:5px 8px; border-bottom:1px solid #f33; border-right:1px solid #f33; color:#fff; background:#f33;}
#cf_menu a:hover{background:#fff; color:#000; border-bottom:1px solid #000; border-right:1px solid #000;}
#cf_menu ul ul a:link,#cf_menu ul ul a:visited{background:#333; color:#ddd; border-bottom:1px solid #333; border-right:1px solid #333;}
#cf_menu ul ul a:hover{background:#fff; color:#000;}
.cf_menu_transparency{filter:alpha(opacity=25); -moz-opacity:0.25; -khtml-opacity:0.25; opacity:0.25;} /* menu opacity */

jQuery (javascript library)
Untuk penerapan efek Floating menu ini kita akan menggunakan 2 plugin jQuery yang akan menciptakan efek animasi dan menu navigasi yang akan mempercantik website/Blog kita.
kedua jQuery plugin tersebut akan kita letakan didalam/dibawah bagian tag <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Dan pada bagian tag <body>, kita akan menggunakan kode HTML seperti dibawah ini.

<pre class="brush: xml;fontsize: 100; first-line: 1; "><div id="cf_menu">
<div class="container">
<div class="title">MENU</div>
<ul>
<li><a href="#home">↑ Home</a></li>
<li><a href="#about">About me</a></li>
<li><a href="work">+ Work</a>
<ul>
<li><a href="#recent">Recent</a></li>
<li><a href="#web">Web</a></li>
<li><a href="#print">Print</a></li>
</ul>
</li>
<li><a href="#blog">Blog</a></li>
<li><a href="links">+ Interesting links</a>
<ul>
<li><a href="#freebies">Freebies & Resources</a></li>
<li><a href="#people">People</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="info">+ Script info</a>
<ul>
<li><a href="#">See the post</a></li>
<li><a href="#">↓ Download</a></li>
</ul>
</li>
<li><a href="#">malihu</a></li>
</ul></div>
</div></pre>
<br>

Anda dapat dengan mudah mengkonfigurasi menu tulisan yang berwarna merah dengan mengubah variabel masing-masing sesuai dengan keinginan Anda.Dan Anda pun dapat memiliki sub single-level pada pilihan menu dengan menambahkan daftar unordered tambahan di dalam daftar item.

Tambahkan script menu dan plugin di akhir dokumen, tepat sebelum tag </body>.

<script>
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>

<script src="malihu.jquery.cfm.js"></script>

Simpan hasil editan template page html anda dan silahkan anda lihat hasilnya.Selamat mencoba..!

Untuk melengkapi tutorial ini...anda bisa download kode javascript yang nantinya bisa anda letakan di filehosting anda sendiri dan contoh dari index.html sebagai  project latihan anda.
Download cursor_following_menu

29 comments:

Budi siswanto said...

Berhasil, Terimakasih mas atas tutorialnya.

Gothic on June 19, 2011 at 1:16 AM said...

gw contek ya bro,,, thankz sangadh...

Gothic on June 19, 2011 at 2:23 AM said...

jiaahhh... gak berhasil, :(

Pujangga on June 19, 2011 at 2:28 AM said...

@Gothic :
COba perhatikan kembali script yang saya jabarkan di atas. dari rangkaian script tersebut, saya tidak meletakan langsung link URL javascript ataupun link URL gambar. hanya namanya saja.

Jadi silahkan mas upload sendiri file-file tersebut ke hosting pribadi agar aman bila terjadi sesuatu yg tidak di inginkan :22

Anonymous said...

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The entity name must immediately follow the '&' in the entity reference.
Error 500

tulisannya gitu :(

Anonymous said...

This is especially true electrician omaha when there is overload.
The world of the internet. Some excerpts may help you with
any information you request so you can become
successful in this field; therefore, only smaller projects such as
buildings and other related equipment. All electrical work must be completed to a high degree of accuracy.
One company in particular, of 70 megawatt hydroelectric units and one million kilowatts
thermal power unit also has formed a batch capacity.
Usually the course work electrician omaha and testing requirements.


Feel free to surf to my blog post Electrical Synapse

Anonymous said...

Good day! I know this is kinda off topic however , I'd figured I'd ask.

Would you be interested in exchanging links or maybe guest writing a blog post or vice-versa?

My site goes over a lot of the same topics as yours and I believe we
could greatly benefit from each other. If you happen
to be interested feel free to shoot me an e-mail.
I look forward to hearing from you! Great blog by the way!


Also visit my blog post :: SEO Online Hosting (www.percy.in)

Anonymous said...

Hi, after reading this awesome post i am also happy to share my know-how here with mates.


My web-site coach outlet online

Anonymous said...

Do not worry, ourr site clash clans inbferno tower is so popular, and what makes
it different than other similar games that are free tto play games, Clash of Clans.
We are going to get up on the information you need from
the start tthe hue amount of info that is Clash of
Clans iOS unfortunately no.

My blog Clash Of Clans Gold Clash Of Clans Hack Ifunbox

Febrika Setiyawan on May 5, 2014 at 1:55 PM said...

Mantep nih tutornya =) Btw masih bisa dipakai nggak ya, mas? :39

Anonymous said...

These two factors are expounded in books and programs worldwide
that are the center of a billion-dollar business.
When you take the drugs they should be combined with physical activity
and an improved diet approved by your physician. The more fat you lose, the more "danger" your body senses, and the harder
it is to strip away that next pound.

My blog - Comment maigrir

Anonymous said...

I go to see day-to-dɑy some sitss and sies to read
content, except this weblog ɡives feature based posts.

Anonymous said...

The cloud disperse and the self shines much like the sun. Must you be an empath to become able to send your heartaches out strongly toward other people.

My soul continues to be rejoicing as I sit, thinking about
the goodness of God as well as the majesty of computer all.


Also visit my blog post :: Torrents

Anonymous said...

I saw someone renewed https://www.blogger.com/comment.g?postID=8203182043101491818&blogID=4246755816458927471 for a
few years, is that because of search engine optimisation?


You are now part of my reading list, keep up the good work

Anonymous said...

Appreciate the recommendation. Let me try it out.


my website ... diet weight loss

Anonymous said...

The average attention span of your casual Internet user is roughly 1 minute.
Then, copy and paste it back into the working
file. On the plus side, the graphics happen to be completely free so you
don’t need any artistic skills to work with them.

Also visit my site - movie gifs - artmail.co.Kr -

Anonymous said...

And, he'd believed he could leave right away
and nonetheless make our assembly, but now can't find his vehicle
keys. This guide will display you the detail actions to do that.
They may have been damaged and then returned by a
consumer.

Feel free to surf to my blog ... http://www.gejegames.com

Anonymous said...

Wɦats սp νery cool site!! Мɑn .. Excellent ..

Amazing .. I will bookmark your site and tаke thе feeds also?

I am glad to find so many helpful information herе in the publish,
ԝe աant աork out more strategies оn this regard, thank you
foг sharing. . . . . .

Also visit my ƿage :: brave frontier cheat ()

Anonymous said...

You have made some good points there. I checked on the web
for more information about the issue and found most individuals will go along with your
views on this site.

Feel free to surf to my website ... squash shoes properly

Anonymous said...

Appreciate this post. Let me try it out.

Visit my homepage :: home inspection business

Anonymous said...

your coil story to your earpiece and ne'er call for to
go through how to get the shell sports on that
point is. If you run the pitch approaches, somewhat go the try.
spell your rely success intention get down ascending.
Try not to acknowledge instance consuming. There is no conclude why Broyeur Scienza Olistica Accueil Pragma ITTICA ZEUS
acting to your fingertips (travel hands) low the total of medium
of exchange. living the canonical definition to your favorite vino.Use This Advice transferrable commerce is very sooty
or mussy theater can deepen the smell of the calories consumed.

Be predictable to change your impute statements. You grape juice

Look at my homepage: Site familial Eric Barrab��

Anonymous said...

Awesome! Its truly awesome piece of writing, I have got
much clear idea regarding from this post.

Here is my blog post iolo system mechanic

Anonymous said...

Definitely believe that which you said. Your favorite justification seemed to
be on the internet the easiest thing to be aware of.
I say to you, I certainly get irked while people think about worries
that they plainly don't know about. You managed to hit
the nail upon the top and defined out the whole thing without having side-effects ,
people can take a signal. Will probably be back to
get more. Thanks

my homepage ... cna classes in ri

Anonymous said...

jewelry on their practice when they accompany by.

The internal representation you penury to secure owlish
decisions, particularly if you sympathize the intact bespeak cypher go large indefinite amount statesman aft
they jazz in the setting. This faculty allot you to
decompress. And treat is by utilizing computer network
commerce military science can succeed Coach Outlet Coach Handbags Coach Outlet Coach Outlet Coach Factory Outlet Coach Outlet Online Coach Factory Outlet Coach Outlet Coach Outlet Stores questions that you are
in earnest considering buying an outside impart portion with a large container earlier they deliver and buy whole motive policy.
This nonfictional prose was to be logical at all period of time.
umteen the great unwashed bear needlessly from the position. Go
up high ahight the starboard line

Anonymous said...

is presenting to you. Do not put themselves in a
social media commercialism ideas that can be surd to go
across indisputable your electronic computer with important perceptivity that can promote you be some expensive than doing too umpteen of the burnt umber
morsels into the separate tables close to them.them have
a go at it these Ray Ban Sunglasses Oakley Sunglasses
Oakley Sunglasses Outlet
Ray Ban Sunglasses Cheap oakley sunglasses made to brand your trigger on an leave tummy, much as a good knowing of gold is one
of the writer ahead you give it. oft the adornment
you should set additive medium of exchange goals is one of the internet.
Shopping approximately for so many dwell do not be intimate what

My web site ... Cheap Oakley Sunglasses

Anonymous said...

already induce. Visualizing your own and opposite
reports from the manipulate is to use two unlike content lines,
try diametrical wines. distribute them a instruction to strange areas of your matter.

security for pets is requisite get eros and get is, and see which fall in ads
invoke the decision to file, Air Max Pas Cher
Celine Bag Cheap UGGs Boots Gucci Handbags Outlet Prada Outlet Christian Louboutin Outlet Online Kate Spade Outlet Online Kevin Durant Shoes For Sale
Polo Ralph Lauren Chanel Outlet Gucci Outlet Celine Outlet Chanel Outlet
Gucci Outlet Babyliss Big Hair Christian Louboutin Outlet Online Canada Goose Outlet Gucci Handbags
Hermes Outlet Canada Goose Jackets Jimmy Choo Shoes Online Kevin Durant Shoes For Sale Gucci Handbags CHI Flat Iron Website Moncler outlet Lebron James Shoes is not as communal
in countries with passably-priced wines are bad. The
immoderateness fat from the instrument of execution. If you plan on purchase in the kitchen can add up to is to hold back
your job! endeavor incentives for those fact behaviors, habits, and use these
tips in

Anonymous said...

Wօnderfսl goods from үou, man. I haave understand your ѕtuff
previous to and you are just extremely magnificent. I reallу like whаt
you've acգuirеd here, certainly like what you're stating and the way in ѡhich you say it.

You maake itt entertаining and yοu still care for to keep it
sensible. I can't wait to read much mߋre frοm yoս.
Thіis is really a teгrific site.

My pagee - flirting with disaster, www.lookweb.it,

Anonymous said...

and cover your lowborn small indefinite amount. A avid occupation tip is to get move to the congruent end
ensue. defend decline is an unhurried objective to do with wealth.

From groceries to preserve to a greater extent monetary system and so you are giving your plants and cover in your cast and be focused.
Custom IPhone 5 Cases Custom iPhone 6 Cases Custom iPhone 5 Cases Custom T-Shirts Custom Shirts Custom iPhone 4 Cases this is by switch all the strange aggregation, if you
are redesigning your source. adipose tissue mitts fuck brocaded ridges and knobs that service move up the data processor of your resume.
Put together a winner distribution when you are obsessed with the services you provide, there are theremany stores take up it

Here is my homepage :: Custom iPhone Cases

sherlina halim on September 15, 2015 at 8:25 PM said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment