Simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

Create a SSD Virtual Server with DigitalOcean , using this link you get $100 FREE

digital ocean

If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make ?filtering by category? a little more interesting with just a little bit of jQuery.

Take a basic list of links and turn them into an awesome OS X dock of icons.

CSS3 and jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. The thumbs are scrollable by moving the mouse up and down which makes a really nice effect. We will add some CSS3 properties for spicing up the looks.

How to build an attractive full page content feature slider plugin (similar to the MailChimp slider) - by using the jQuery Cycle plugin which allows you to rotate, paginate or cycle a set of images.

In this tutorial with downloadable source code Kevin Liew will teach you how to create a vertical scroll menu. You will also use the jQuery.color plugin to animate the background color changes. The HTML is as simple as possible, and the jQuery and CSS do the rest.

We will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Recent Comments

venkatesh cs said:

Thanks for sharing valuable information.https://www.credosystemz.com/courses/digital-marketing-training ...

josephin jose said:

Really nice post. Thank you for sharing amazing information. <a href="https://www.credosystemz.com/java-training/">Java ...

keen Digital said:

Thank you so much for sharing such an awesome blog. <a href="http://www.keendigitalservices.com/">digital ...

impressbss said:

Article is very informative nice to read it <a href="https://www.impressbss.com/">web design company ...

tvtap said:

http://tvtap.fun

venkatesh cs said:

Excellent Blog. Thank you so much for sharing. https://www.credosystemz.com/training-in-chennai/react-js-training/ ...

josephin jose said:

the best java training in chennai is credo systemz. https://www.credosystemz.com/java-training/

gokul prasath said:

Thank you for this informative blog <a href="https://www.credosystemz.com/training-in-chennai/best-data-science-training-in-chennai/"/>Top ...

Benish said:

Nice post.... thank you for sharing motivate information.. <a href="https://www.credosystemz.com/training-in-chennai/best-python-training-in-chennai/">Best ...

Joviksha jovi said:

Get the most advanced AWS Course by Professional expert. Just attend a FREE Demo session. For further details call us @ ...