5 Navigation dropdown menu with Jquery

  1. Perfect multi-level navigation bar
    by by Antonio Lupetti
    You can quickly reuse the code tutorial into your web projects, customizing the CSS file and changing the links. You can take a look at the demo here or download the source code here.

    Continue reading
  2. Mega Drop Down Menu with CSS
    In this tutorial,  drop dowm menu with jquery for creating a menu system that would be ideal for large list data. demo
  3. Nested drop down menus
    Quick and dirty nested drop-down menu in the jQuery style.  With more drop submenu level can make it.
  4. Smooth Animated Menu with jQuery
    by Zach Dunn.
    building a menu and animate it with some smooth effects.


  5. Sexy Drop Down Menu with css and jQuery
    Create a sexy drop down menu that can also degrade gracefully.

Glimmer, cara mudah menambah efek web dengan jquery

screen0

JQuery siapa yang tidak kenal, tetapi uraian codiang siap yang gak pusing membacanya :-), tetapi ada kabar yang menggembirakan bagi para pengembang web baik untuk keperluan website dan aplikasi berbasis web. Sebuah apliaksi desktop dengan nama Glimmer akan membantu kita untuk mempermudah pembuatan website dengan efek dari jQuery. It allows you to easily create interactive experiences like rotating photo-galleries/mastheads,drop-down navigation, hover effects, or custom animations. :-). Tanpa perlu banyak menulis baris-baris code java script kita sudah dapat membuat efek yang kita inginkan.
Continue reading

Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS. It is also extensible; if you knows .NET & WPF you can write a design wizard that plugs into Glimmer. In addition to design wizards you can also write a Glimmer effect. Currently, Glimmer ships with 8 effects, which include things like opacity animation, x position animation, add CSS class, etc.

Developed by Tim Aidlin and Karsten Januszewski; Glimmer is freely downloadable & open source Windows desktop application(Different license terms apply to different file types). You can find further information, demo & download on Glimer’s Website.

Sebelum mendownload perlu diingat hal yang harus di siapkan ;-)
1. Koneksi Internet yang memadai untuk proses download paket Glimmer.
2. .NET Framworks 3.5 sp1.

Pengalaman saya setelah mendownload dan install maka aplikasi akan meminta windows untuk restart dan saya sempat bingung karena icon aplikasi seperti biasa langsung muncul setelah di setup/install ternyata jika hal ini terjadi maka kita harus setup sekali lagi, dan walhasil …yang dinanti2 keluar ;-)

berikut screenshot Glimmer ;-)
screen1

screen2
screen3

screen4

screen51

Contoh-cotoh hasil penggunaannya bisa berkunjung ke visitmix.com

Selamat mencoba ;-)

Amazing HTML Template

Pemanfaatan tata letak dan permainan warna yang berani dari kriesi.at telah menghasilkan sebuah HTML template yang sangat unik dengan nama “HTML Template: Reflect”,  ditunjang dengan integrasi dari jQuery dan beberapa javascripst yang digunakan sebagai pemanis menambah efek yang benar-benar dinamis.

html_temp_reflect_kristat Continue reading

Secara keseluruhan  HTML template menggunakan warna dasar hitam yang kesannya grunge dan tangguh, tetapi pada bagian atas backgroundnya diberi warna yang sangat mencolok dengan efek light memberi kesan menyala hal ini menurut saya bertujuan agar para pengunjung terfocus ke bagian tersebut  karena disitulah bagian yang menjadi pusat dari HTML template portfolio ini dimana pada layer atasnya terpampang beberapa portfolio yang ingin disampikan kepada para pengunjung,  dan jika melihat ketengah pada bagian sebelah kiri ada sebuah tombol kecil yang warnanya lebih mecolok lagi dan pastilah kita akan mengkliknya and “zap” bagian tersebut membuat bagian layer portfolio berganti dengan tampilan yang lain dengan pergerakan yang sangat menarik dan bener-benar sempurna “bagian ini yang saya suka ;-)”  dan perhatikan juga efek refleks di bagian bawah layer ini yang sewaktu terjadi transisi ikut pula berubah. Kesan pertama adalah ini hasil perbuatan dari flash magic tetapi tunggu dulu seperti posting saya yang sebelumnya ini merupakan hasil dari penggunaan javascripst secara sempurna.

Dibagian lain pada navigasi atas kita dapat melihat pergeseran menu yang soft dan pada bagian gallery, kita akan disajikan permainan lightbox yang sudah kondang dalam dunia efek gallery …”saya juga pake loh”…….he3x.  Menurut saya tamplate ini benar – benar menantang otak kreatif saya ;-)  , bener-benar patut menjadi inspirasi dalam dunia design web…;-)

Berikut detail lengkap dari HTML template tersebut  dari kriesi.at :

  • Valid XHTM Strict1.0 and CSS 2 .1, tableless Design
  • jQuery Support:
    • Image tooltips that align next to the mouse cursor
    • Bouncing/fading Header for Portfolio/punchlines/whatever
    • Lavalamp Menu, improved with jQuery
    • jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
    • Gallery Page with lightbox
    • Working ajax/php contact form
  • All PSD files I used are included
  • Documentation Included
  • Works in all Major Browsers

Buy this HTML Template for as low as 15 $ at Themeforest.net

Demonya ada disini

Menggunakan Mootools dan JQuery bersamaan

Bulan ini saya mendapatkan sebuah pekerjaan pembuatan web dari sebuah fakultas di perguruan tinggi. Saya mencoba memberi nuansa animasi pada beberapa bagian dari web yang saya buat, seperti biasa bagian banner adalah langganan utama penggunaan efek animasi, awalnya saya ingin menggunakan flash tetapi saya ingin membuat yang lebih ringan dan benar-benar pure code no flash “so gaya!” he3x…

mootools

Continue reading

Muter-muter, browsing sana kemari dan akhirnya saya menemukan script animasi slide image dengan core JQuery yang dibuat oleh Boban Karišik seorang Web dev.  Dia memberi nama s3Slider JQuery plugin , sebenarnya script ini tidak jauh beda dengan  Smooth Slideshow v2.1
milik dari JonDesign’s.

s3Slider :

Singkat kata script pun terpasang dan animasi berjalan dengan kehendak hati, but sekarang mata saya tertuju pada bagian navigasi web alias menu, nah ini dia bagian yang tidak pernah kurang dari dua mesti lebih tapi kadang – kadang ada juga yang cuman atu he3x. Navigasi favorit saya adalah pada bentuk horizontal dan menggunakan drop down untuk sub menu alias menu anakannya, kali ini si anakan ternyata harus ber anak lagi “ampun deh” banyak bangets anaknya …., sempat puyeng juga gimana buatnya yang tidak sekedar dropdown biasa tapi pengen yang ketika dropdown ada efek smooth dan otomatis scrool up juga. Untung ada gudang bookmark dan menemukan menu yang diinginkan milik mas Jason Jeager , dia memberi nama model navigasinya dengan nama MenuMetic, kaya model sepeda motor saja, mungkin ada benarnya juga karena ada efek otomatisnya, penasaran silahkan liat disini. Scriptsnya berbasi mootools dan ketika di gabungkan dengan JQuery bencana pun tiba…he..he..he ..semua menjadi berantakan, s3Slider tidak jalan dan navigasi pun buyar yar……”aduh!”.

MenuMetic :

Selidik punya selidik dan mencoba cari tau dari bang google, bahwa ada ketidak akuran dari mootools dengan JQuery pada pemanggilan code-nya yang sama – sama menggunakan tanda “$” pada awalnnya sebagai shortcut penulisannya. JQuery menggunakan “$( )” dan si Mootools menggunakan “$” , memang dollar dimana-mana membuat masalah termasuk di coding he3x….tapi “mahal nilainya!”. Google membawa saya kesitus milik Om JQuery sendiri dan Bang Phil Tylor serta Mas “Gatot Ari Wibowo”   sebagai rujukan.

Cara pemecahan yang ditawarkan adalah :

  1. Menambahkan script jQuery.noConflict() seperti pada contoh berikut ;
    <html>
     <head>
       <script src="mootools.js"></script>
       <script src="jquery.js"></script>
       <script>
         jQuery.noConflict(); <-------------------------scipt tambahan
    
         // Use jQuery via jQuery(...)
         jQuery(document).ready(function(){
           jQuery("div").hide();
         });
    
         // Use Prototype with $(...), etc.
         $('someid').hide();
       </script>
     </head>
     <body></body>
     </html>
  2. Mengganti semua awalan “$” pada fungsi JQuery  yang kita buat menjadi “jQuery”
    Awalnya :
    $(document).ready(function(){ <———————”$”
    // Lakukan sesuatu
    });
    Menjadi :
    jQuery(document).ready(function(){ <—————————”jQuery”
    // Lakukan sesuatu
    });
  3. Jika jQuery dirasa kurang enak kita dapat mendefiniskannya menjadi “var $J = jQuery” , suka-suka sesuai keinginan kita, kala perlu pake nama kita he3x biar keyen! ….

Dan akhirnya saya dapat menjalankan mootools dan JQuery bersama-sama ;-)  dan hal ini dapat juga digunakan jika kita memasangkan Jquery dengan framework javascript lainnya seperti prototype.

Selamat mencoba ;-)