jQuery BBC News Map menu plugin

The BBC News Map cleverly breaks England into 10 square-boundary regions, allowing them to make each region out of several <span> tags rather than one <area> tag. The use of the <span> tag means that each region can have more styles applied to it (such as background images and colours), making the development a little easier but, each region could only ever have square boundaries.

jQuery New Top Black Menu Bar like Google

Google has come up with a new look with the launch of Google Plus and one of the prominent changes we can observe is the black menu bar found on the top of Google Search Page and every other Google product like Google Plus(obviously), Google reader, etc. Almost every Google product by now has been integrated with the top black menu bar.

Awesome jQuery and CSS3 Interactive menu

This example will tell you how to create an interactive menu using CSS3 goodness and jQuery’s power.

The idea

The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.

Colorful jQuery animation slide menu

This is a nice and colorful jQuery and css menu
The Idea is to create a normal ul li menu and apply a top border to the anchor tags with colors that will match with the element background color when it is hovered.

useful Tabbed Menu with jQuery

We are going to use the HTML element list to display the menu and the drop down.

Each of the top level menus are in their own list items and the drop down menus are lists placed inside the list items.

jQuery and CSS3 Animation effect

The markup is not difficult, we used two unordered lists, the first list follow insert all graphics (via CSS3) and animations, while the second listsocial will have links to social networks always with a nice animation.

jQuery useful Drop-Down Menu with Fixed list

The HTML is structured using unordered nested lists. I suppose I could have used ordered lists to facilitate maintainable numbering, but I thought it was fine this way and if someone wants to use ordered lists they can just alter the markup and make a small change in the script.

Pure useful CSS3 Dropdown Menu

e will code in pure CSS3 the Navigation Menu that you can find in Impressionist UI by Vladimir Kudinov.

Step 1 – HTML Markup

We will create an unordered list with a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list.

Awesome jQuery Image Parallax Effect

Custom jQuery Plugin for Creating Parallax Effect Image Sliders

Default options:

Very nice jQuery and CSS3 parallax scrolling

Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.

How it works

jQuery tooltip animated progress bar

Here’s a very basic example of how to code up an animated progress bar with tooltip using the Tipsy tooltip plugin.

The Code

Awesome Horizontal scroll bar graph

This is an animated, horizontal bar graph using jQuery, CSS3 properties (such as: gradients, border-radius, rgba) and CSS3 transitions.

Stylish progress bars effect with CSS3

you’ll learn how to create stylish and animated progress bars using CSS3.

The HTML

The markup could not be simpler than that:

jQuery mousewheel Knob effect

jQuery Knob

canvas based ; no png or jpg sprites.
touch, mousewheel, keyboard events implemented.
downward compatible ; overloads an input element.

Sortable text list with jQuery

this is a 3 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable. Yeah!
Do you also want the possibility to add, edit and remove items by dead simple templating?

Subscribe to: Posts (Atom)