Horizontal Tab menu with Search Form

Horizontal tab menu ini telah dilengkapi dengan sebuah search form yang terpadu. Posisi search form ada disisi sebelah kanan dan search form ini dibangun dengan menggunakan kode css3 transition yang berfungsi membentuk animasi saat search form di klik. Untuk melakukan pencarian tuliskan kata yang berkaitan dengan topik yang akan anda cari kemudian lanjutkan dengan klik "enter".

Horizontal Menu 3 dimensi

Cukup fantastis untuk sebuah menu yang hanya menggunakan kode css. Inilah yang bisa kita lakukan saat ini setelah css3 transition, css3 transform dan css3 animation makin mendapat dukungan dari browser. Berbagai desain menarik yang hanya dibuat dengan kode css (tanpa satupun javascript!) akan banyak kita temukan. Dengan hanya enggunakan kode css tentu saja akan sangat berpengaruh terhadap beban kinerja loading blog. Jauh lebih enteng dan lebih cepat dibanding dengan menggunakan javascript bertumpuk.

Slide/Larva menu css3

Mungkin anda pernah melihat atau bahkan menggunakan sebuah menu horizontal yang sering disebut sebagai larva menu atau slide menu. Jika sebelumnya kita harus menggunakan jQuery, maka kali ini kita hanya butuh css3 animation dan css3 transition. Tak banyak kode css yang digunakan namun hasil yang diperoleh sangatlah menakjubkan. Anda boleh membandingkannya dengan yang dibuat menggunakan javascript atau jQuery!

Animated Single Level dropdown menu (2) with css3 transition

Animated single level dropdown menu ini sekalipun terlihat hampir sama dengan menu sebelumnya (Animated Single Level dropdown menu (1) ), namun sebenarnya menggunakan teknik dan trik pengolahan kode css yang sedikit berbeda. Jika anda cermati dengan baik, maka akan sedikit terlihat juga hasil yang berbeda. Anda akan melihatnya ketika cursor diarahkan kesetiap menu dengan berbagai perpindahan. Mungkin anda sedikit bingung melihat perbedaannya, namun jika lebih cermat dan seksama pasti akan kelihatan juga. Mana yang lebih baik di antara kedua menu ini? Ha... tentu saja terserah anda karena semua tergantung selera!

Elemen Baru untuk membuat Menu Horizontal di Blogger

Mungkin anda termasuk salah satu blogger yang sedang kebingungan atau mungkin "pernah kebingungan" yang hingga detik inipun "kebingungan itu belum terpecahkan". Sebuah persoalan "Bagaimana cara membuat sebuah horizontal dropdown menu di blogger?". Banyak sudah keluhan terhadap permasalahan ini, terutama akibat menu yang sudah terlihat dan berhasil dibuat tidak mampu bekerja sesuai harapan. Persoalan yang banyak ditemui adalah "anak menu yang diharapkan bisa terlihat ternyata tetap tak mau nongol karena hilang akibat terpotong".

Animated Single Level dropdown menu for blogger (1)

Single level dropdown menu merupakan menu horizontal yang dilengkapi dengan animasi yang dibuat dengan css3 transition dan css3 transform. Sebuah single dropdown menu yang hanya dibuat dengan kode css (tanpa javascript). Anda bisa menlihat dan mencoba animasi yang tercipta dengan mengarahkan cursor di setiap link horizontal menu yang ada di atas posting.

Create a horizontal tab menu with colorful background

Ada beberapa cara untuk membuat tab menu horizontal di blogger menjadi tab menu horizontal/navigasi menu horizontal dengan background beraneka warna seperti yang terlihat di atas. Salah satunya adalah dengan mengggunakan css selector (:nth-child(n)). Memanfaatkan css selector membuat penggunaan kode menjadi lebih simpel dan praktis karena tak perlu melakukan perubahan atau penambahan pada xHTML default template. Modifikasi hanya dilakukan dengan menambahkan kode css di atas kode ]]></b:skin>. Sangat mudah dan dapat dilakukan oleh siapapun karena tingkat kesulitan yang relatif sangat kecil.