Select Page

The article gives some information on Creating an Imageless HTML, CSS & JQuery Header. Today I will show you how to create a clean no images header and navigation using CSS, HTML and JQUERY. First you will need some default styles(CSS) for the page I have done this for you below.

Creating an Imageless HTML, CSS & JQuery Header

Now you have the default CSS you can start on the HTML. First you will need two divs for the header and the navigation which I have put a id attribute on both so you can style both HTML elements individually.

You have your basic HTML ready, now you can insert a div with the class attribute on called wrap so the content is contained in a 1000px width element.

Once you have done that you can start to style your header and navigation root elements with the styles you like, I have styled a simple version of this below.

You will then need some ul’s to list your navigation urls with li tags and a-hrefs, I will use two one with the class pull-left and the other with the class pull-right as an example below.

Now you have all the HTML for the navigation ready you can finish styling it with the final navigation CSS for the ul, li and a-href tags.

Your navigation CSS and HTML is now fully coded but your header still needs a logo this is where we will use JQUERY to animate your logo. We will first need a JQUERY library to run the JQUERY I have found a suitable one what is provided below.

Here is the fully coded JQUERY to animate your logo in your header I have kept it very simple so you can easily edit it to the way you like it. Or you can simply remove the animated logo if it is not to your liking.

Now you need to style your logo or it will look stupid, I have coded the CSS for your logo below by positioning it out of view the JQUERY will animate your logo into view once the page has loaded.

There is one last thing to code before we can see the finished result, if the user(viewer) doesn’t have javascript enabled in there browser you will need a fallback for the logo or it will simply not show at all. I will use !important to overwrite the current logo CSS wrapped in the noscript tags so it only applies the style if they don’t have javascript enabled.

The header and navigation is now fully coded and ready to put together the full result is below, you can use, edit and change this code as much as you like.