1. jQuery & CSS Example – Dropdown Menu

The 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 demo

2. jQuery Tabbed Interface / Tabbed Structure Menu

This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect.

jQuery Tabbed Interface / Tabbed Structure Menu demo

3. Animated Menus Using jQuery

How to create an animated menu (very similar to Dragon Interactive’s menu).

Animated Menus Using jQuery demo

4. Fisheye JavaScript Menu

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

Fisheye JavaScript Menu demo

5. 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”.

Sliding JavaScript Menu Highlight 1kb demo

6. Create a Cool Animated Navigation with CSS and jQuery

How to build a really cool animated navigation menu using just CSS and jQuery.

Cool Animated Navigation with CSS and jQuery demo

7. Create a multilevel dropdown menu with CSS and improve it via jQuery

Learn how to create a multi level dropdown menu, and improve it with a little bit of jQuery.

Multilevel dropdown menu demo

8. jQuery ListNav Plugin

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.

jQuery ListNav Plugin demo

9. Sliding Jquery Menu

Learn how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Sliding Jquery Menu demo

10. CSS Sprites2

Create inline menu navigation using CSS Sprites2.

CSS Sprites2 demo

11. CSS Dock Menu

Learn how to create CSS dock menu Mac style.

CSS Dock Menu demo

12. 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 for jQuery demo

13. Dynamic Page / Replacing Content

Dynamic Page / Replacing Content demo

14. Smooth Animated Menu with jQuery

Learn how to build a menu and animate it with some smooth effects.

Smooth Animated Menu with jQuery demo

15. Vimeo-like top navigation

How to create top navigation like on Vimeo.com.

Vimeo-like top navigation demo

16. Slick Tabbed Content Area using CSS and jQuery

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

Slick Tabbed Content Area demo

17. Animated Drop Down Menu with jQuery

Learn how to create animated drop down Menu with jQuery.

Animated Drop Down Menu demo

18. A Stylish Navigation Menu With jQuery

How to make a stylish CSS + XHTML navigation menu with the help of the jQuery library.

A Stylish Navigation Menu demo

19. Garagedoor Effect using jQuery

Here is the Garage Door effect, now in jQuery.

Garagedoor Effect using jQuery demo

20. Using jQuery for Background Image Animations

Changing the position of the background image felt to be the best approach to creating the type of effect we’re looking for.

Using jQuery for Background Image Animations demo

21. Floating HTML Menu Using jQuery and CSS

Learn how to create floating HTML menu using jQuery and CSS.

Floating HTML Menu Using jQuery and CSS demo

22. Coda-Slider

Learn how to create Coda-Slider.

Coda-Slider

23. Mega Drop Down Menus w/ CSS & jQuery

Mega drop down menus tested to be more efficient for large scale websites.

Mega Drop Down Menus w/ CSS & jQuery demo

24. Use Sprites to Create an Awesomeness-Filled Navigation Menu

CSS sprites can dramatically increase your site’s performance. With jQuery, we can implement awesome transition effects easily.

Awesomeness-Filled Navigation Menu demo

25. Tab Navigation with Smooth Horizontal Sliding Using jQuery

How to create a navigation menu that slides horizontally.

Tab Navigation with Smooth Horizontal Sliding Using jQuery demo

26. droppy – Nested drop down menus

Quick and dirty nested drop-down menu in the jQuery style.

droppy – Nested drop down menus demo

27. Creating a navigation menu with CSS & jQuery

Learn to create a navigation menu with CSS & jQuery.

Navigation menu with CSS & jQuery demo

28. Apple style menu and improve it via jQuery

Learn how to create an Apple style menu and improve it via jQuery.

Apple style menu with jQuery demo

29. Sexy Drop Down Menu w/ jQuery & CSS

Learn to create sexy drop down menu with jQuery and CSS.

Sexy Drop Down Menu w/ jQuery & CSS demo

30. Mega Drop-Down Menu with jQuery

Tutorial about how to create mega drop-down menu with jQuery.

Mega Drop-Down Menu with jQuery demo

31. CompareNetworks jQuery’d Bread Crumb – jBreadCrumb

This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages.

jBreadCrumb demo

32. ‘Mootools Homepage’ inspired navigation effect using jQuery

Learn how to create a ‘Mootools Homepage’ inspired navigation effect using jQuery.

‘Mootools Homepage’ inspired navigation effect using jQuery demo

33. Keypress Navigation Using jQuery

Learn how to create a keypress navigation using jQuery.

Keypress Navigation Using jQuery demo

34. LavaLamp for jQuery lovers

The nifty effect of Lava Lamp.

LavaLamp demo

35. UvumiTools Dropdown Menu

It is a very simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework.

UvumiTools Dropdown Menu demo

36. Simple Javascript Accordions

Learn how to create a simple javascript accordions.

Simple Javascript Accordions demo

37. MenuMatic

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.
How to create an amazing slide out menu or navigation for your website.

MenuMatic demo

38. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Beautiful Slide Out Navigation demo

39. jQuery UI Selectmenu

Create variety of the features currently supported in the selectmenu plugin.

jQuery UI Selectmenu demo

40. jQuery OS X-style – Dock And Stack Navigation

Learn to create OS X-style – Dock And Stack Navigation.

jQuery OS X-style – Dock And Stack Navigation demo

41. Superfish

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 demo

42. Fresh Content Accordion

Learn how to make a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

Fresh Content Accordion demo

43. Color Fading Menu with jQuery

A short jQuery tutorial on how to achieve fading hover effects.

Color Fading Menu with jQuery demo

44. jQuery Tabbed Navigation

How to create a tabbed navigation script with jQuery, and then modifying it so that it works without JavaScript.

jQuery Tabbed Navigation demo

45. Elastic Thumbnail Menu

Magnifies menu items when they are hovered over.

Elastic Thumbnail Menu demo

46. BDC DrillDown Menu, an iPod-style menu

A drilldown menu takes up constant space like an accordian menu but offers the deep hierarchy of a flyout menu at the same time.

iPod-style menu demo

47. jQuery mb.menu

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

jQuery mb.menu demo

48. A Different Top Navigation

This tutorial will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

A Different Top Navigation demo

49. Slide out and drawer effect

The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks. The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed.

Slide out and drawer effect demo

50. Vertical Scroll Menu with jQuery Tutorial

Create a vertical scroll menu that scroll automatically according to your mouse axis-Y movement.

Vertical Scroll Menu demo

51. jQuery idTabs

idTabs is simple and easy to use.

jQuery idTabs demo

52. 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.

jQuery File Tree demo

1. Coin Slider

Coin Slider is jQuery Image Slider with Unique Effects. Coin Slider have a lot of options for helping you set slider as you want. Free to use under MIT licence.

Coin Slider demo

2. Nivo Slider

The world’s most awesome jQuery slider. Nivo Slider has built-in directional and control navigation. Free to use and abuse under the MIT license.

Nivo Slider demo

3. Automatic Image Slider

Automatic Image Slider with CSS & jQuery by Soh Tanaka. The html based image slider will have its benefits with SEO and will also degrade gracefully for those with or without js.

Automatic Image Slider demo

4. jCoverflip

Present your featured content elegantly. Control the number of items, colors, fonts and styles through CSS. Open Source. Distributed using the GNU General Public License and built using jQuery and jQuery UI.

jCoverflip demo

5. jqFancyTransitions

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

jqFancyTransitions demo

6. jQuery Easy Slides v1.1

jQuery Easy Slides is a simple slideshow plugin that is quick and easy to use.

jQuery Easy Slides v1.1 demo

7. Mosaic Slideshow With jQuery & CSS

Mosaic Slideshow features an interesting tile transition effect when moving from one slide to another.

Mosaic Slideshow With jQuery & CSS demo

8. jQuery Blinds

jQuery Blinds is slideshow using CSS Sprites.

jQuery Blinds demo

9. Uize.Widget.SlideShow

The Uize.Widget.SlideShow class eases the creation of slideshow presentations, supporting navigation controls, configurable visualizations, and more. UIZE is free to use (available under MIT License or GNU General Public License).

Uize.Widget.SlideShow demo

10. CU3ER

CU3ER™ is the Flash® 3D image slider, easy to set up, fully customizable, tailored to provide a unique look and feel, inspiring and fun-to-use. Free for personal or non-commercial usage.

CU3ER demo

11. The Piecemaker

Beside the transition type you can also customize tweening time, tweening delay as well as the movement of the cubes while tweening in terms of position on the z axis and positions to each other.

The Piecemaker demo

12. jQuery Coda Slider Effect

jQuery Coda Slider Effect.

jQuery Coda Slider Effect demo

13. Galleria

Galleria is an image gallery framework, written in JavaScript. The aim is to simplify the process of creating visually appealing image galleries for the web and mobile devices. The Galleria core and a number of themes and add-ons are 100% open source licensed under the MIT license, which makes it free to use, copy, sell and redistribute.

Galleria demo

14. Supersized

Supersized will resizes images to fill browser while maintaining image dimension ratio, and cycles images/backgrounds via slideshow with transitions and preloading. Creative Commons Attribution 3.0 License.

Supersized demo

15. iTunes-like Slider

Create a simple slider similar to the one used in the iTunes store.

iTunes-like Slider demo

16. Animate Panning Slideshow with jQuery

A classic slideshow, but use a different kind of transition to animate between slides.

Animate Panning Slideshow with jQuery demo

17. Slide Thumbs

How to turn old boring image viewer into a nice-looking one with jQuery.

Slide Thumbs demo

18. Floom

Blinds-effect MooTools slideshow.

Floom demo

19. Multiple Image Cross Fade

This simple effect is ideal for portfolio websites, galleries or magazines where images need to be seen. Add captions and tooltips to make it more usable.

Multiple Image Cross Fade demo

20. s3Slider – jQuery Image Gallery Plugin

Info layer about the images in the slideshow can be displayed at left, right, bottom or top. You can use the script for both personal and commercial projects.

s3Slider – jQuery Image Gallery Plugin demo

21. Easy Slider 1.5

The easiest jQuery plugin for sliding images and content.

Easy Slider 1.5 demo

22. SlideDeck

The web’s most powerful jquery slider plugin.

SlideDeck demo

23. Spacegallery jQuery Plugin

Again another image gallery.

Spacegallery jQuery Plugin demo

24. jQuery Cycle Plugin

Slideshows are not limited to images. You can use any element you want.

jQuery Cycle Plugin demo

25. Moving Boxes

The big difference here is that there are buttons to change panels and the panels zoom in and out.

Moving Boxes demo

26. Slick Slideshow Using jQuery

Learn how to create a slick and accessible slideshow using jQuery

Slick Slideshow Using jQuery demo

27. The Lof SiderNews Plugin

The Mootool – Lof SiderNews Plugin use for play a slideshow with the navigation display on the lef side or right side.

The Lof SiderNews Plugin demo

28. BarackSlideshow

BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images (demo).

BarackSlideshow demo

29. AnythingSlider jQuery Plugin

This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features.

AnythingSlider jQuery Plugin demo

30. SlideItMoo

BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images (demo).

SlideItMoo demo

31. Image Rotator with Description

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery.

Image Rotator with Description demo

32. Slider Gallery

Michiel Kenis requested a tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.

Slider Gallery demo

33. Apple-like Slideshow Gallery

Learn how to make an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.

Apple-like Slideshow Gallery demo

34. ImageSwitch

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images.

ImageSwitch demo

35. jQuery Image Scroller

This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

jQuery Image Scroller demo

SCREENSHOT

SCREENSHOT for THREADED COMMENTS

DEMO
This theme in only tested in WordPress 2.5.1 and WordPress 2.7.
Web Minimalist 200901 WordPress Theme demo (WordPress version 2.7)

FEATURES

• Minimalist, clean, and imageless theme style.
• Custom image header, allows you to upload a custom header image to be shown at the top of your blog instead of the default one. On the next screen you will be able to crop the image. Images of exactly 340 x 200 pixels will be used as-is.
• Supporting threaded comments for WordPress 2.7
• Widget ready.
• The comment section is supporting Gravatars (http://gravatar.com/)
• Supporting WP-PageNavi plugins

INSTALLATION

• Upload the theme folder to wp-content/themes
• Log into your WordPress dashboard, click on Appearance — Themes, and activate the theme

USAGE

• This theme is very easy to use. Just install the theme and you are ready to blog.
• If you need to change the size of header image height, please go to functions.php, and edit “200″ in this code:define(‘HEADER_IMAGE_HEIGHT’, 200);
• This theme is supporting threaded comments for WordPress 2.7. To activate the threaded comments, go to your WordPress dashboard, click on Settings — Discussion, and activate the  “Enable threaded (nested) comments”.

LISENCES
Web Minimalist 200901 is released under the GNU General Public License, version 3, as published by the Free Software Foundation. This theme has a link back to WebMinimalist.com to credit me as the creator of this theme. Please leave the credit in tact.

DOWNLOAD

SUGGESTIONS
For suggestions or help with improvements, please leave your comments here.

2. Add this lines to the very top of code in archives.php:

<?php
/*
Template Name: Archives
*/
?>

3. Edit the <?php the_content(''); ?> to <?php wp_get_archives('arguments'); ?> (if you want other format, please read this).

Remove other unnecessary code to meet with what you need.

4. Publish a New Page, call it Archives. Change the Page Template from Default Template to Archives.

There are many tutorials about creating Archives Page. I just want to make it simpler and flexible. If you can understand the point here, you can make your Archives Page in any format. You also can create as many as pages you want, not only Archives Page.

I prefer to combine my archives page with Clean Archives Reloaded plugin.

For default, installing this theme will create regular blog in the home page.

How To Create A Site With STATIC PAGE on the Home Page

1. Published a page, name it Home, and choose Homepage as the Page Template.
2. Published another page, name it Blog, and choose Blog as the Page Template.
3. In the Setting – Reading, change the Front page displays to A static page (select below):

• Front page: Home
• Posts page: Blog

Preview of static page in the home page:

Screenshot below is preview of blog:

View live demo for Minimalist Vintage WordPress Theme.

Download this theme for free: Minimalist Vintage Wordpress Theme (2687)

Update July 7, 2008:

To make the sidebar on the right side, open the style.css from the Theme Editor, find this code and change it to:

.content { width: 460px; float: left; background: #fff; margin: 0 0 10px 0; }

.sidebar { font: 10px 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; width: 170px; margin: 0 0 10px 0; padding: 0; text-align: center; float: right; }

Get more design options for your blog with these free wordpress themes.

First page indexed by Yahoo:

Following the instruction from Google XML Sitemaps Plugin:

• Create YAHOO Application ID to notify YAHOO about updates of this site.
• Create robots.txt file in blog root which contains the sitemap location.

Today, only 1 page indexed in Google:

Jun 25, 2008 at 06:51 – Installing WordPress on this domain.

Jun 25, 2008 at 17:23 – Installing new theme.

Jun 25, 2008 at 16:57 – Installing Platinum SEO Pack.

Jun 26, 2008 at 21:22 – Installing NextGEN Gallery Plugin.

Jun 26, 2008 at 09.00 – Create link back from my personal site.

PS: I do not submit this domain to Google or Yahoo or other search engine/directory until today, and I don’t plan to. WordPress already has this facility when installing WordPress for the first time. When I typed site:webminimalist.com on Google search yesterday (June 26 at 18:00…), my pages already indexed.

Below is screenshot of pages indexed by Google today:

When I checked it on Google search, the permalink is still the old one. And when I clicked on the old permalink, it is redirect to the new one.

Font-family property is a prioritized list of font names. Here are the list of font-family. I use this to help me designing website.

Arial, Helvetica, sans-serif
‘Times New Roman’, Times, serif
‘Courier New’, Courier, monospace
Georgia, ‘Times New Roman’, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
‘Arial Black’, Gadget, sans-serif
‘Bookman Old Style’, serif
‘Comic Sans MS’, cursive
Courier, monospace
Garamond, serif
Impact, Charcoal, sans-serif
‘Lucida Console’, Monaco, monospace
‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif
‘MS Sans Serif’, Geneva, sans-serif
‘MS Serif’, ‘New York’, sans-serif
‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif
Symbol, sans-serif
Tahoma, Geneva, sans-serif
‘Trebuchet MS’, Helvetica, sans-serif

I also add screenshots of how they look in different web browser:

Download these premium wordpress themes for free.