Web Design Tips, Tutorials & More!

jQuery for Navigation

jQuery is an excellent way of doing navigation on a website. Your choices are so much easier to apply with it. There are several ways of doing it and one of them is by using tabs in various forms either as the drop downs or in a sidebar. This makes sense as it saves space and is an extremely neat way of presenting a lot of information in a very tiny area. To learn to do this sometimes it’s necessary to resort to a tutorial and luckily there are several different ways of doing this and quite a lot has been written about it on the web. I am going to show you where to find a few of these and discuss, which might be the best available way of doing it with you.

A tutorial that was created especially to discuss how to use a tab with a drop down menu with various sections is a simple and yet very clever way to present a large quantity of information in just one line with a list of up to ten items in one of 4 tabs. Obviously, you could have more tabs should you require them but this tutorial show you in a simple, elegant way that gives you a neat way of keeping your web page menu in an uncluttered page. This is done using CSS and jQuery, and you can find it on the page for CSS called Organic Tabs.

The second tutorial I found, which also discusses tabs but this uses the latest in CSS namely CSS3 in conjunction with jQuery. This tutorial has a demo as well as the written tutorial, and it shows you how do this in XHTML. Once you have started Ajax fetches content for the tab area. This is presented by Tutorialzine, which does web tuts and is a good resource to find tutorials.

Some people call this a blogroll and this can be down right fun to try. With the tutorial they show you they take you to other sites with snippets of info from those sites to give you an introduction of what the particular tab is about. Net tutplus gives you various tutorials one of which is how to build a better blogroll.

They include a slider plug-in in the way they do this, which will give the animation which makes it a bit different from the norm. It was a fun exercise to do, and you do learn something different.

Another offering from Net Tutsplus is also for a jQuery menu in a tabbed area.

This used HTML CSS and jQuery. It’s a little more difficult than a beginner tutorial but can be good fun to do it as a practise run. This is really for the slick, easy to navigate, kind of tab, which is a good way to create a tabbed menu on a serious website.

The next one is a little different as it creates a Feature list.

This gives you a demo as well as creating a list. There is no flash required to do this, and it uses a slide show. It uses a plug-in to create the actual list and makes life really easy.


Leave a Reply