Tampilkan postingan dengan label Cascading Style Sheets. Tampilkan semua postingan
Tampilkan postingan dengan label Cascading Style Sheets. Tampilkan semua postingan

Jumat

36 Eye-Catching Jquery Navigation Menus



Navigation menus have really important role in any website. For big
sites full with a lot of pages and articles, drop down menus and tabs
are popular because they can make it a lot more easier to navigate and
move through site, also you can save space on website displaying content
on dynamic tabs. Also if you want to create a navigation menu, that
really stands out of the crowd, jQuery could be the right choice to
choose offering bunch of customizable options. That’s why I present to
You 36 really good jquery navigation menu examples for every need.




1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial



Tabbed Interface or Tabbed Structure Menu is getting really famous in
web design & development. This tutorial will show you how to build
your own tabbed Interface using jQuery with slideDown/slideUp effect. Be
sure to check out the demo, you definitely will like it.


jquery-tabbed-interface



2.Animated Menus Using jQuery



Learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript help, similar to Dragon Interactive (dragoninteractive.com).


jquery-animated-menu






2.1. Sliding Tabs – jQuery Plugin



Sliding Tabs is a jQuery plugin for creating horizontal and/or
vertical animated tabs for your website. You can have multiple instances
of the tabs and customize them in any way with CSS . The script comes
with many customization options, making it very flexible and easy to
customize to your needs.





3. Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)



Animation and visual feedback are great ways to assist a user in
navigating and interacting with a website. While traditionally Adobe’s
Flash was the goto for anything animated, these days with the magic of
javascript we can avoid Flash altogether.


jquery-navigation-slide



4.jQuery ListNav Plugin



This jQuery plugin supplies an easy way to unobtrusively add a
letter-based navigation widget to any UL or OL list. An easily stylable
(via CSS) nav bar appears above the list, showing the user the letters
A-through-Z. Clicking one of the letters filters the list to show only
the items in the list that start with that letter. Hovering over a
letter (optionally) shows a count above the letter, indicating how many
items will be displayed if that letter is clicked. Other options give
you control over the basic functionality.


jquery-list-nav



5. jqDock menu



Transform a set of images into a Mac-like Dock menu, horizontal or
vertical, with icons that expand on rollover, and optional labels.


jqdock-jquery-plugin-menu



5.1. FloatMenu



A little similar to the above navigation menu, only more smarter and
more pleasing to the eyes. It can float diagonally (both up and down),
vertically (left and right), and horizontally (up and down). It is hard
to discuss how cool this navigation menu is, you just have to see the live preview. Link below the image. Oh, it works for text links too with cool effects.





6.Sliding Jquery Menu



This tutorial explains and let you download sliding jquery menu and
you can see the effect in action over on the PSDtuts webpage in the top
right hand corner.


jquery-sliding-menu-tutplus


This is how looks finished demo version:


vertical-sliding-menu



7.CSS Sprites 2 – It’s JavaScript Time



css-sprites-2-jquery




8. CSS Mac Dock Menu



If you are a big Mac fan, you will love this CSS dock menu that I
designed. It is using Jquery Javascript library and Fisheye component
from Interface and some of my icons. It comes with two dock styles – top
and bottom. This CSS dock menu is perfect to add on to my iTheme.


css-dock-menu-jquery



9.Kwicks for jQuery



Kwicks for jQuery started off as a port of the insatiably attractive
Mootools effect (of the same name), but has evolved into a highly
customizable and versatile widget.


kwicks-jquery-menu-navigation




10.Jquery File Tree



jQuery File Tree is a configurable, AJAX file browser plugin for
jQuery. You can create a customized, fully-interactive file tree with as
little as one line of JavaScript code. Currently, server-side connector
scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a
developer, you can easily make your own connector to work with your
language of choice.


jquery-file-tree-navigation







Drop Menu



With this script you can make nice and interactive drop down menus.
The advantage of this script is that it not only gives you the ability
to make list drop down menu. You can also use a div as drop down
element. This way you can create big drop down menus like under the
buttons products and tutorials in the live preview. Or you can create a
login panel in your drop down like I did in the live preview.





11.Learning jQuery: Fading Menu – Replacing Content



Nice tutorial from CSS-tricks explaining how to use CSS with jQuery,
this time he teaches how to use jquery fading options on menu.


menu-fader-jquery-navigation



12. How to Make a Smooth Animated Menu with jQuery



Ever seen some excellent jQuery navigation that left you wanting to
make one of your own? This tutorial teaches how to do just that by
building a menu and animate it with some smooth effects.


smooth-animated-jquery-menu



13.Create Vimeo-like top navigation



Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.


create-vimeo-like-top-navigation



14. jQuery (mb)Menu 2.3



This is a powerful jQuery component to build easily a multilevel tree
menu or a contextual menu (right click) in an intuitive way!


You can add as many submenus as you want; if your submenu or menu is
not declared in the page, the component will get it via ajax calling the
template page with the id of the menu you need (the value of “menu”
attribute) the ajax page should return a well formatted code as the
example below for the menu voices code.


jquery-mb-menu-navigation



14.1.Context Menu Class



Advantage: anyone can use this class even without enough programming
experience. Or if you are a master coder but is short of time, this one
is for you. very easy to customize. You can even make a website the same
as how you see a contextual menu on your desktop!





15. Coda Slider



coda-slider-jquery



16. jQuery idTabs



idTabs is a plugin for jQuery. It makes adding tabs into a website
super simple. But it can also open the door to endless possibilities.


idtabs-jquery-navigation



 



17. Create a Slick Tabbed Content Area using CSS & jQuery



One of the biggest challenge to web designers is finding ways to
place a lot of information on a page without losing usability. Tabbed
content is a great way to handle this issue and has been widely used on
blogs recently. This is great tutorial explain

ing to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.a



 



18. LavaLamp for jQuery lovers!



Extremely light weighted Lavalamp menu packaged as a plugin for the amazing jQuery javascript library.


lava-lamp-jquery-navigation






Mega Menu Complete Set



This Mega Drop Down Menu Complete Set is perfect for creating unique
menus by using one of the 10+ jQuery effects and one of the 13 color
variants.Based on a custom grid, this menu allows you to organize your
content into columns (from 1 up to 12) with a lot of typography examples
such as headings, lists, images styling, tables, form elements, etc.





 



19. Animated Drop Down Menu with jQuery



Drop down menus are a really convient way to fit a large menu into a
really small initial space. For a long time people have just used a form
element for standard drop downs, but with minimal effort you can create
a much slicker effect using jQuery and CSS.


animated-dropdown-menu-jquery



 



20. Using jQuery for Background Image Animations



Five different ways, how to create background image animations using jquery – very live effect.


jquery-background-image-animations



21. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery



As you know there are a host of competing javascript libraries around
these days. Though I prefer jQuery, I’ve always liked the way the menu
on MooTools worked. So in this tutorial we’ll recreate that same effect …
but this will be done in jQuery!


mootools-homepage-navigation-effect



 



22. Menumatic Mootools



MenuMatic is a MooTools 1.2 class that takes a sematic ordered or
unordered list of links and turns it into a dynamic drop down menu
system. For users without javascript, it falls back on a CSS menu system
based on Matthew Carroll’s keyboard accessible flavor of Suckerfish
Dropdowns by Patrick Griffiths and Dan Webb.


menumatic-vertical-menu-jquery



 



22.1. Super menu pack (10 menus)



Super menu pack is a collection of 10 cool menus, 5 in pure css and 5
using jQuery framework for customize or layout with your websites or
applications and projects.It’s perfect for anyone who wants to give a
special touch to their designs or find a starting point. Collection is
as varied as possible in style and appearance to give you choice.
Thinking in design working with code.





 



23. jQuery convertion: Garagedoor effect using Javascript



For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!


garage-door-jquery-menu



 



24. Perspective tabs



Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space.


perspective-tabs-mootools-menu


 



25. Fisheye Menu



Fisheye Menu is an expanding menu based on the MacOSX doc.


fisheye-menu-jquery



 



26. Sliding JavaScript Menu Highlight 1kb



This sliding hover effect script is an easy method to add some flavor
to your navigation. Using the CSS you can easily customize the
navigation to fit your “look and feel”. The markup for the script is
very simple as below.


sliding-javascript-menu-highlight



 



27. Mootools Demo Redux



Simple expandable Javascript navigation menu.


mootools-demo-redux



 



28. HoverAccordion



A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it).


hover-accordion-jquery


 



29. Simple Javascript Accordions



Javascript accordians have been used a lot in todays web design
world. There are a lot of scripts we have seen and sure you too would
have seen them. This script is one of the smallest accordion script
which is extremely simple and easy to integrate. Does’nt require any
framework and fully cross-browser compatible.


simple-javascript-accordion-jquery



30. UvumiTools Dropdown Menu



The UvumiTools Dropdown Menu is the menu featured on this website. It
is a very simple multi-level menu built from an HTML unordered list,
using Mootools Javascript Framework, it can be easily updated by simply
editing a <ul> HTML element.


uvumi-tools-dropdown-menu


 



31. Create a multilevel Dropdown menu with CSS and improve it via jQuery



multilevel-dropdown-menu-jquery



 



32. jQuery & CSS Example – Dropdown Menu



Dropdown menus and menu bars have been heavily used since the early
days of graphical user interfaces. Their use has become ubiquitous, and
even expected, in desktop applications, and the web has quickly followed
suit. This article is intended to describe an extremely basic, yet
extremely powerful, technique for adding dropdown menus in your
application user interface or website design.


jquery-css-example-dropdown-menu



 



33. Floating menu jQuery&CSS



For all of us who deal with long web pages and need to scroll to the
top for the menu, here’s a nice alternative: floating menus that move as
you scroll a page. This is done using HTML, CSS and jQuery, and it’s
fully W3C-compliant.


live-floating-menu-jquery



 



34. Superfish – jQuery menu plugin



Superfish is an enhanced Suckerfish-style menu jQuery plugin that
takes an existing pure CSS drop-down menu (so it degrades gracefully
without JavaScript) and adds the following much-sought-after
enhancements:


superfish-examples-jquery



 



35. JQuery Pager



A simple JQuery plugin to provide paging UI functionality for data driven web applications


jquery-pager-menu



 



36. jQuery feed menus



When feeds became popular, it worked to have one icon on your site to
point your readers to your RSS or Atom feeds. As feeds are more
prevalent in blogs and websites abroad, the presence of multiple feeds
abound – this jquery feed menu is solution here!


jquery-feed-menus





Minggu

efek animasi loading halaman dengan css3 pada blogger










 efek loading ini hanya dibuat dengan CSS, untuk menambahkan efek menarik ini di blog anda, silahkan ikuti
langkah-langkah berikut:



1. Untuk menampilkan efek load diatas pada halaman Anda, letakkan kode berikut sebelum tag ]]></b:skin> dalam template blog anda



#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}



2. Masukkan kode di bawah ini sebelum kode tag </body>



<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>



demikian semoga berguna dan bisa membuat blog anda lebih menarik....




Sabtu

Hosting File dengan Google Code dan TortoiseSVN



Selama ini kita biasa menggunakan Google Code untuk menyimpan maksimal hanya tiga jenis berkas/file saja. Yaitu JavaScript, ZIP dan gambar. Selain itu tidak pernah. Alasannya, saat file selain JavaScript, ZIP dan gambar yang tersimpan di Google Code dibuka maka akan gagal bekerja. Misalnya file CSS atau HTML. Saat dibuka malah hanya muncul sebagai teks biasa dan tidak bisa digunakan sebagaimana file CSS dan HTML pada normalnya.



Biasanya kita mengunggah file melalui situs Google Code secara langsung, atau bisa juga melalui aplikasi subversi seperti TortoiseSVN. Kabar baiknya, dengan cara mengatur MIME yang beragam pada aplikasi tersebut, maka itu akan memungkinkan kita untuk mengunggah berbagai file dengan format yang berbeda-beda. Sehingga direktori Google Code tidak lagi tampak sebagai ruang penyimpanan file berupa kode saja, tetapi juga bisa kita gunakan untuk menyimpan berbagai macam file seperti halnya situs-situs penyedia layanan hosting file pada umumnya.



Saya masih belum begitu berani untuk mengungkapkan apa itu pengertian MIME. Tapi kalau kamu ingin mencari tahu lebih jauh, kamu bisa membacanya di Wikipedia - MIME



Dengan mendefinisikan properti otomatis pada aplikasi, maka kita bisa mengunggah beberapa file yang bisa dibilang sama sekali tidak ada hubungannya dengan kode seperti PDF, DOC, SWF (Flash), WAV dan lain-lain.



Untuk mengubah masukan berkas Google Code menjadi lebih luas, maka ada dua buah pekerjaan yang harus kita lakukan. Pertama adalah menginstal aplikasi TortoiseSVN dan ke dua adalah membuat sebuah halaman proyek baru.





Pekerjaan I: Menginstal TortoiseSVN



Kunjungi situs ini ⇒ http://tortoisesvn.net/downloads.html. Unduh aplikasi tersebut lalu instal. Setelah terinstal, komputer harus di-restart karena aplikasi ini akan terintegrasi dengan menu konteks/menu klik kanan (shell command).



Setelah itu klik kanan pada desktop. Pilih menu TortoiseSVN » Settings:







 


 TortoiseSVN » Settings













Akan muncul kotak dialog seperti ini. Klik General dan klik tombol Edit:





 


Pengaturan TortoiseSVN



Setelah file config terbuka, salin kode ini dan letakkan di bawah komentar # Makefile = svn:eol-style=native


[miscellany]
enable-auto-props = yes

[auto-props]
# Scriptish formats
*.bat = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.bsh = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
*.cgi = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.cmd = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.js = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
*.php = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
*.pl = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
*.pm = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
*.py = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
*.sh = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable

# Image formats
*.bmp = svn:mime-type=image/bmp
*.gif = svn:mime-type=image/gif
*.ico = svn:mime-type=image/ico
*.jpeg = svn:mime-type=image/jpeg
*.jpg = svn:mime-type=image/jpeg
*.png = svn:mime-type=image/png
*.tif = svn:mime-type=image/tiff
*.tiff = svn:mime-type=image/tiff

# Data formats
*.pdf = svn:mime-type=application/pdf
*.avi = svn:mime-type=video/avi
*.doc = svn:mime-type=application/msword
*.eps = svn:mime-type=application/postscript
*.gz = svn:mime-type=application/gzip
*.mov = svn:mime-type=video/quicktime
*.mp3 = svn:mime-type=audio/mpeg
*.ppt = svn:mime-type=application/vnd.ms-powerpoint
*.ps = svn:mime-type=application/postscript
*.psd = svn:mime-type=application/photoshop
*.rtf = svn:mime-type=text/rtf
*.swf = svn:mime-type=application/x-shockwave-flash
*.tgz = svn:mime-type=application/gzip
*.wav = svn:mime-type=audio/wav
*.xls = svn:mime-type=application/vnd.ms-excel
*.zip = svn:mime-type=application/zip

# Text formats
.htaccess = svn:mime-type=text/plain
*.css = svn:mime-type=text/css
*.dtd = svn:mime-type=text/xml
*.html = svn:mime-type=text/html
*.ini = svn:mime-type=text/plain
*.sql = svn:mime-type=text/x-sql
*.txt = svn:mime-type=text/plain
*.xhtml = svn:mime-type=text/xhtml+xml
*.xml = svn:mime-type=text/xml
*.xsd = svn:mime-type=text/xml
*.xsl = svn:mime-type=text/xml
*.xslt = svn:mime-type=text/xml
*.xul = svn:mime-type=text/xul
*.yml = svn:mime-type=text/plain
CHANGES = svn:mime-type=text/plain
COPYING = svn:mime-type=text/plain
INSTALL = svn:mime-type=text/plain
Makefile* = svn:mime-type=text/plain
README = svn:mime-type=text/plain
TODO = svn:mime-type=text/plain

# Code formats
*.c = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.cpp = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.h = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.java = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.as = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.mxml = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

# Webfonts
*.eot = svn:mime-type=application/vnd.ms-fontobject
*.woff = svn:mime-type=application/x-font-woff
*.ttf = svn:mime-type=application/x-font-truetype
*.svg = svn:mime-type=image/svg+xml



Simpan perubahan yang kamu lakukan. Biarkan sampai di sini dulu.



Pekerjaan II: Membuat Halaman Proyek Baru



Jika belum punya akun Google, buat terlebih dahulu agar bisa mendapatkan akses ke Google Code. Kunjungi http://code.google.com, lalu klik Create A New Project:







Buat proyek baru.



Isi formulirnya, atur pilihan version control system ke Subversion, lalu pilih lisensi yang kamu kehendaki untuk

file-file yang diunggah di situ:







Mengisi formulir.



Klik Create Project. Kamu akan dibawa menuju halaman dasbor proyek barumu jika sudah berhasil. Klik tab Source lalu klik tautan googlecode.com password untuk membuat password. Ini digunakan untuk menghubungkan aplikasi dengan proyek Google kamu:







Mengenerasikan password Google Code.



Catat password yang tampil:







Password —dan alamat email— sudah digenerasikan.





Mulai Mengunggah



Buka aplikasi TortoiseSVN dengan cara mengeklik kanan pada desktop lalu pilih TortoiseSVN » Repo Browser:







Repo browser.



Akan muncul kotak dialog untuk memasukkan URL proyek:







Memasukkan URL proyek.



Pola URL selalu berbentuk seperti ini:https://nama_proyek.googlecode.com/svn/trunk/







Yang harus diingat dan yang paling sering membuat gagal dalam pengunggahan file: Saat menuliskan URL proyek di aplikasi, gunakan https, tapi saat ingin melihat hasilnya atau mengakses hasil kerjanya secara online, gunakan http



Klik OK. Tunggu sampai proses memuat selesai.



Buka folder dimana terdapat file yang ingin diunggah. Seret file yang diinginkan ke area daftar file unggahan:







Mengunggah file.



Tunggu beberapa saat, maka kamu akan diminta untuk mengautentikasikan akun Google Code kamu seperti

ini:





Autentikasi akun Google Code.



Isi alamat email dan password yang sebelumnya sudah kamu catat. Centang Save authentication agar kita tidak perlu berkali-kali login pada saat pengunggahan file di masa mendatang.



Dengan menggunakan aplikasi subversi, selain bisa mengunggah berbagai file yang tidak biasa, kita juga bisa mengedit file yang sudah kita unggah. Sehingga kita tidak perlu menghapus file lama dan mengunggah file yang baru berulang kali seperti saat menggunakan akun Google Code pada umumnya.



Untuk memeriksa hasil kerja satu per satu secara online, akses pola URL ini:



http://nama_proyek.googlecode.com/svn/trunk/



Kita juga bisa mengedit (hanya mengedit) file melalui situs Google Code secara langsung (jika kita memberikan izin pada pengaturan pengeditan secara online). Kunjungi pola URL ini:



http://code.google.com/p/nama_proyek/source/browse/trunk/



Thanks to Taufik Nurrohman for great Article : Hosting File dengan Google Code dan TortoiseSVN






MAKNA SPIRITUAL DAN FILOSOFIS HANACARAKA: KAJIAN KEBATINAN JAWA DALAM PERSPEKTIF

  MAKNA SPIRITUAL DAN FILOSOFIS HANACARAKA: KAJIAN KEBATINAN JAWA DALAM PERSPEKTIF MAHASISWA   Disusun untuk memenuhi tugas mata kuliah Fils...