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.
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.
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?
Do you also want the possibility to add, edit and remove items by dead simple templating?
Subscribe to:
Posts (Atom)