Wonderful photo effects Photoshop tutorials

Collapsing Site Navigation with jQuery

A collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.

View Demo Download

Embed fonts into CSS using Google Web Fonts API

 

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Google Web Fonts are a great way to get started using new typefaces on the web without paying for a service like Typekit.

Google Web Fonts is the best way to add amazing new free fonts to your site. Google web fonts are web safe fonts, which can be added to any site by adding a few simple lines of code to your html.

Enthused by the new font technology and with the intention to improve our web design fonts,  we tested out the Google web fonts. And it was much easier than I thought and was compatible with most web browsers.

Try Google web fonts, as there are some really amazing web fonts out there and amaze your readers. You can add as many free web fonts as you like. Which is your favorite Google web font?

View Demo

Sliding Panel Photo Wall Gallery with jQuery

 

The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically!

View Demo
Download

css3 JQuery Animated Tabs

Tabs is used for utilizing space and keep some stylish effects on website. jQuery tabs are very popular and it created some fancy look on web pages. I created a simple in use but a fancy looking jquery and css based tabs to give you and example. I used css to make it in some rounded style. Its doesnt work for IE but its fine in Firefox and Chrome.

View Demo Download

Nice Multiple jQuery Mega Drop Down Menu

The Mega Drop Down Menu plugin takes standard HTML nested lists and turns them into horizontal mega menus. With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation.
A mega menu has several advantages over standard drop down menus, including:

• All options visible at the same time
• No scrolling and tricky mouse manoeuvres to see sub-menus fly out
• Using standard nested lists the groups can be easily structured and formatted with CSS

To get the full effect of the plugin use 3 levels of nested lists.

View Demo Download

jQuery MegaMenu

So whats new in jQuery MegaMenu 2

• A completely revamped JS and CSS code-base.
• Easier to use. (A lot simpler HTML and JS needs to be used to initiate the menu)
• Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple
• Customizable menu activation and deactivation actions. Now you can choose to activate the menu by click or by mouseover
• HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
• Automatic alignment of the menu content according to the width of the parent menu container.
• Variable width of the menu contents.
• Non obtrusive and easier to understand CSS.

View Demo Download