Just to show the concept i decided to make a speech bubble with a little pointer out of only html and css3.

Demo

When visiting other websites I quite like to have a peek in the code to see how the developers make the sites look how they look.

One of the things I’ve had trouble with in the past is horizontal navigation menus, more precisely the styling side of things and how the HTML should be for content and the CSS for the presentation.

I like to use jQuery to make the hover states of my site different

Here the code i use to do it

$("li a").hover(function() {
	$(this).stop().animate({paddingLeft : "10px"},200);
},function() {
	$(this).stop().animate({paddingLeft : "0px"},200);
});

With this code we’re basically selecting the anchor tag within a list item, then when a user hovers over it we’re pushing it 10px to the right then returning it to where it was after they mouse off it.

You can change the speed that the link slides by changing the number in the code, you will see that it is currently set as 200, this means that the left margin increases from 0px to 10px in 200 Milliseconds.

For this to work with javascript turned off we need to add this bit of css:

li a:hover {
    padding-left: 10px;
}

More info on the jQuery animate effect here http://docs.jquery.com/Effects/animate

This is my first ever blog tutorial so just drop me a comment on how i did.

Update:
From trying this script again I’ve realised it should be paddingLeft rather than marginLeft, so I’ve amended the code above.