jQuery CSS3 animated dropdown menu

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.Perhaps the best title for this article would have been: CSS3 dropdown menu – Revisited. The reason I’m saying that is because in this article you’ll learn how to create an animated CSS3 dropdown menu based on our previous example.

Read More

Cursor following menu with jQuery

A website navigation menu that follows the cursor, created with the jQuery framework and CSS that’s easy to implement and configure.The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css.

Read More

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. Please check out the examples to see it in action.

Read More

jQuery UI Bootstrap

jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets.

With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.

Read More

Simple and effective jQuery dropdown login box

In this article, you will see how to create a good looking dropdown login form using CSS3 and a bit of jQuery.The main purpose is to avoid waiting to load a separate page in order to log in. This way you can increase user experience, as the user has the possibility to log in immediately.

Read More

A navigation menu that stays on top with jQuery

This is an easy way to make a navigation menu that sticks to top of the window while scrolling down the page. We want the menu to stick to the top only after we've scrolled down further than its original position. A few lines of jQuery will to the trick.

Read More

jQuery One Page Navigation Plugin

I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to..I wanted the page to scroll smoothly when the navigation was clicked, so I used the jQuery ScrollTo plugin. I also wanted the page to automatically highlight the correct navigation section depending upon which section was scrolled to, and that was where I added my custom code.

Read More

Path App Fly-out Menu using CSS3 & jQuery

I am a huge sucker for great ui design so I fell in love. The thing that really stole my focus was the awesome fly-out menu that is in the bottom left corner. This button is the main means of navigation in this app. It had not only some good features but also had smooth animations as well. Me being a noob to application development, googled if it was made in phone gap due to it heavy customization and no it wasn’t. It ‘apparenly’ has too advanced animations.

Read More

jQuery Widgets unique library for jQuery UI Development

jQWidgets gives us something new and special. It’s a new and unique library for jQuery UI development and unlike others it makes our Apps and Websites look beautiful on desktops, touch devices and mobile phones. jQWidgets is the ultimate UI toolkit for the next generation of cloud apps development and it is built entirely on open standards and technologies like HTML5, CSS, JavaScript and jQuery.

Read More

jQuery Multi Level Menu – FX CSS Menu with Submenus

CSS Menu with visual effect powered by jQuery. Javascript is used for effects only. Full cross-browser compatibility including IE6. Effects: smooth fade animation on mouse over and unfold submenu appearance. Easy-to-setup: simple nested unordered list for menu items with unlimited levels.

Read More

jQuery contextMenu

The jQuery contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike implementations as a beautiful site's or trendskitchens' this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects. Unlike the mentioned plugins, contextMenu doesn't need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.

Read More

Multi Level Hierarchical jQuery Menu: jQSimpleMenu

As your website grows, so does the need for better navigation and sometimes the navigation becomes the driving force for better user experience. jQSimpleMenu is a multi-level hierarchical jQuery drop down menu that helps you add drop down menu in your website without writing a single line of code.

Read More

Convert a Menu to a Dropdown for Small Screens with jQuery

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.

Read More

How to Build a Sliding One Page Portfolio with jQuery

In this tutorial, I will show you how to create an interesting jQuery-powered one-page site. One page sites are usually a great way to show your prospective clients how good you are at what you do. This one is no exception.

Read More

Flexible Slide-to-top jQuery Accordion

In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.

Read More

Slide Subnav navigation Plugin

Here is very nice animated slide subnav navigation menu.

Read More

Creating CSS3/jQuery crossbrowser Drop-down menu with tabs

This is our seventh CSS3 menu. Today we will make dropdown menu with parental tabs (as first level). Part of the work we pass on to the shoulders of jQuery (switching tabs, display popups). In the current version – we have three levels of menus.

Read More

Creating a Click-action CSS3 Dropdown Menu with jQuery

Nowadays, pure CSS3 menus still very popular. Mostly – this is UL-LI based menus. Today we will continue making nice menus for you. This will nice dropdown menu (looks like menu at http://www.microsoft.com/) with onclicking (instead onhover).

Read More

Highlight Web Page Elements With jQuery Highlighter

jQuery Highlighter neatly highlights the web page elements and helps you to direct your readers to the places you want them to look.

This jQuery plugin is handy for products showcases, guided tours, portfolios and helpful for the color blind & visually impaired people.

It is highly customizable and has built-in support for keyboard navigation. The plugin works fine on Chrome, Firefox and Safari (issues with IE).

Read More

Slide Navigation Using JQuery With Easing Plugin

The navigation at apple mac page are using an easing effect, it separating each product by the category, I love the effect when user click on the navigation it like the products appear and disappear one by one, with the easing effect on the end movement, like bouncing on the vertical line

If you see the source code on apple page, seems they are still using prototype.js, once are the most popular javascript framework, before the appearance of  jquery. In this post I want to create something like the apple mac navigation menu using jquery easing plugins.

Read More