Tuesday, 19 January 2010

JQuery - Easy guide to tabs with HTML and CSS

So today I had to put some funk stuff into the HTML site I was building. Enter jquery. Now I'm no coder but this seems like a great way to get funky functionality into a static website without much mither.
  1. Go to the jquery site http://jquery.com/ and download the current release. It's just a .js file. Point at this file in your HTML doc. I'd also take the time to read the introduction to jquery.
  2. Next you need to set up another js file that's basically going to do all the work. So I did site.js saved it and pointed my HTML file at this too.
  3. Next you surf around until you find the functionality you want in my case tabs. I found this website http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ and follow the instructions. Adapting the CSS to fit in with the website.
There are hoads of great little scripts that can really improve the look and feel of a website. I like the accordion menu which can either be used as a menu or for content like a Q&A page. Seem to me that there are loads of little ways to make the page more interactive but also space saving. So you can have lots of content on the page without the old scrolling page from hell syndrome.

Then I found this menu tutorial which was simple and easy to follow and had great results. I like simple things.
http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/

So my advise for today is designers, if you haven't already entered the world of jquery have a snuffle.

No comments:

Post a Comment