Page Details:
Grid Navigation Effects with jQuery | Codrops
http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect. The images used in the demos are by Andrew and Lili and you can see their Behance profile here: http://www.behance.net/AndrewLili The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
Tags: jquery, gallery, javascript, grid, navigation, tutorial, animation, tutorials, plugin, webdesign Saved by: admin
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. (It is not allowed to redistribute them under the free license, so I cannot include them in ZIP file of this tutorial.) Ok, let’s get to work.
http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/
Tags: jquery, navigation, css, menu, webdesign, tutorial, javascript, tutorials, webdev, sliding Saved by: admin
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. (It is not allowed to redistribute them under the free license, so I cannot include them in ZIP file of this tutorial.) Ok, let’s get to work.
http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/
Tags: jquery, navigation, css, menu, webdesign, tutorial, javascript, tutorials, webdev, sliding Saved by: admin
CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Codrops
This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element. This creates a neat card-shuffle impression.
http://tympanus.net/codrops/2010/01/17/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/
Tags: jquery, css, menu, navigation, tutorial, javascript, animation, webdesign, trucos, cobrar Saved by: admin
This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element. This creates a neat card-shuffle impression.
http://tympanus.net/codrops/2010/01/17/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/
Tags: jquery, css, menu, navigation, tutorial, javascript, animation, webdesign, trucos, cobrar Saved by: admin
Elegant Accordion with jQuery and CSS3 | Codrops
A tutorial on how to create a beautiful and elegant accordion with jQuery and CSS3 Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks. Ok, let’s start with the markup.
http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/
Tags: jquery, accordion, css3, javascript, html5, slide, webdev, menu, slider, tutorial Saved by: admin
A tutorial on how to create a beautiful and elegant accordion with jQuery and CSS3 Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks. Ok, let’s start with the markup.
http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/
Tags: jquery, accordion, css3, javascript, html5, slide, webdev, menu, slider, tutorial Saved by: admin
Fresh Sliding Thumbnails Gallery with jQuery and PHP | Codrops
Tutorial for creating a full page image gallery with automatic album creation with PHP and jQuery and sliding thumbnails container In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size. The scrolling functionality of the thumbnails bar is based on the great tutorial by Andrew Valums: Horizontal Scrolling Menu made with CSS and jQuery. Additionally, we will be using PHP to get the images and thumbs automatically from the folder structure. The folders will contain album sub-folders and we will add a select option to the gallery which allows to choose an album. Just like in the Sliding Panel Photo Wall Gallery with jQuery we will be using a resize function for the image displayed. We will also add an XML file that (optionally) co
http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/
Tags: jquery, gallery, php, slideshow, images, thumbnail, slide, webdesign, photos, scrolling Saved by: admin
Tutorial for creating a full page image gallery with automatic album creation with PHP and jQuery and sliding thumbnails container In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size. The scrolling functionality of the thumbnails bar is based on the great tutorial by Andrew Valums: Horizontal Scrolling Menu made with CSS and jQuery. Additionally, we will be using PHP to get the images and thumbs automatically from the folder structure. The folders will contain album sub-folders and we will add a select option to the gallery which allows to choose an album. Just like in the Sliding Panel Photo Wall Gallery with jQuery we will be using a resize function for the image displayed. We will also add an XML file that (optionally) co
http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/
Tags: jquery, gallery, php, slideshow, images, thumbnail, slide, webdesign, photos, scrolling Saved by: admin
Fancy Sliding Form with jQuery | Codrops
Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.
http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/
Tags: jquery, form, forms, sliding, css3, slider, javascript, tutorial, validation, ui Saved by: admin
Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.
http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/
Tags: jquery, form, forms, sliding, css3, slider, javascript, tutorial, validation, ui Saved by: admin