Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[jQuery] Animasi keren nggo menu navigasi nganggo jQuery Gooey Menu
#1
jQuery Gooey Menu

kiye script nggo nggawe menu navigasi unik, dadi angger mouse digerakna maring menu sing dipilih ngko ana efek background bergerak maring menu mau.
sing digunakna kuwe JavaScript nggo fungsi efek animasi lan CSS nggo nata menu lan efek background-e.

JavaScripst sing digunakna:
----------------------------
gooeymenu.js (Click to View)
CSS kodene:
-------------
gooeymenu.css (Click to View)
Carane:
--------
pertama copy-paste code kiye trus dalah neng bagian Head page HTML:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="gooeymenu.js">

/***********************************************
* Gooey Menu Script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<link rel="stylesheet" type="text/css" href="gooeymenu.css" />

kedua, nggawe menu CSS sing isine menu" navigasi neng website, kayakiye:
Code:
<ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>



<hr />

<ul id="gooeymenu2" class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'})
</script>




<hr />

<ul id="gooeymenu3" class="underlinemenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu3', fxtime:250})
</script>

<hr />

<ul id="gooeymenu4" class="framemenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu4', snapdelay:500})
</script>

sumber lan contone:
jQuery Gooey Menu

dewek bisa modifikasi neng JS apa CSS e terserah selerane pan piben Josss
.:: my heart just for one girl ::.
MOZZERO PENYERAP TAR DAN NIKOTIN
Reply
Keren um. . . .
Sering - sering bagi tutorial web yah. . ampunnnnnn
ghantexs16,ngarasa bangga dadi member Forume Wong Tegal lan Sekitare sejak Sep 2010.
Reply
#3
ya mipil jon nggo blajar bareng" yak... Josss
Reply
(29-06-2011, 10:14 PM)Barrezta Wrote: ya mipil jon nggo blajar bareng" yak... Josss

hokeh. . . hokeh. . .
ym'e apa kie um??
ghantexs16,ngarasa bangga dadi member Forume Wong Tegal lan Sekitare sejak Sep 2010.
Reply
(29-06-2011, 07:57 AM)Barrezta Wrote: jQuery Gooey Menu

kiye script nggo nggawe menu navigasi unik, dadi angger mouse digerakna maring menu sing dipilih ngko ana efek background bergerak maring menu mau.
sing digunakna kuwe JavaScript nggo fungsi efek animasi lan CSS nggo nata menu lan efek background-e.

JavaScripst sing digunakna:
----------------------------
gooeymenu.js (Click to View)
CSS kodene:
-------------
gooeymenu.css (Click to View)
Carane:
--------
pertama copy-paste code kiye trus dalah neng bagian Head page HTML:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="gooeymenu.js">

/***********************************************
* Gooey Menu Script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<link rel="stylesheet" type="text/css" href="gooeymenu.css" />

kedua, nggawe menu CSS sing isine menu" navigasi neng website, kayakiye:
Code:
<ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>



<hr />

<ul id="gooeymenu2" class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'})
</script>




<hr />

<ul id="gooeymenu3" class="underlinemenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu3', fxtime:250})
</script>

<hr />

<ul id="gooeymenu4" class="framemenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu4', snapdelay:500})
</script>

sumber lan contone:
jQuery Gooey Menu

dewek bisa modifikasi neng JS apa CSS e terserah selerane pan piben Josss

Kang AKu melu Takon relation shep carane pbe
TEGAL
Reply
Nyengir

wis tau nyoba...

mbiyen jamane Es Em A nyong senenge kopi paste scrip Javascript nang dynamicdrive... Nyengir
Kamu tak perlu memiliki segalanya untuk bahagia, karena yang kamu butuh hanya seseorang yang mampu buatmu tersenyum disaat terluka.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)