I have recently been asked to create a tabbed interface for a few projects which does not require any page reloading. I am familiar with working with the Yahoo! User Interface Library (YUI) and decided to use their tabview component to make this happen.
What you need:
You can easily “View Source” and use that as an example. The possibilities of customizing the “tabview” component are endless and can also be seen on jappler.com’s home page.
Moral of the story
Check out the YUI library, look at the examples and start using and reusing the code! This speeds up development and will make your life easier!
There have been two great menu and navigation techniques I have used over the last few years:
After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.
- Two tab images (left and right, with both an active and hover (highligted) option
- Sub-menu arrow (not required)
- CSS for both the drop downs and the sliding doors techniques
- Menu list code (your menu items)
Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length – it is all taken care of by two images and some CSS. For this example, I am going to use two basic tab images that I quickly created for this example:
Sub-menu arrow (not required)
If you want to easily let your visitors know you have a sub-menu within your menus, add in a sub-menu arrow.
CSS for both the drop downs and the sliding doors techniques
The CSS for the drop down menus and the tabbed navigation is pretty slick (check out the CSS).
Menu list code (your menu items)
The menu list code is the actual menus/tabs. The code can be dynamically created by using something like wp_list_pages() in WordPress, or you can create the code yourself. I have created some sample code for this example.
Everything put together
Now that you have an understanding of all the files and code involved, let’s see everything put together This is a very good way to have sustainable code/files for a small or large web site when dealing with navigation.
Questions, comments? Contact me!
What a crazy and full weekend! Many thanks to Demitrious for helping me out this weekend with PHP. If you are a beginner, check out Demtrious’s article: Poor Man’s Debugger. This article helped me greatly over the past weekend and I feel like I now have a good handle on what to do when things go unexpectedly.
Go PSU and Bears!
Please bare with me as I make some changes to my comments code here on my blog. I am trying to make use of an awesome AJAX comments plugin as well as dress up the interface.
After months of reading about it, I thought I would share some of the best articles on AJAX that I have come across:
- Ajax: A New Approach to Web Applications
- AJAX blog
- 24 ways to impress your friends (several AJAX articles)
- AJAX Login System using XMLHttpRequest
- XMLHttpRequest and AJAX tutorials
- AJAX Magazine: AJAX Tutorials
[tags]AJAX, XMLHttpRequest [/tags]
Well. A good calendar solution is always needed for business and/or personal needs. I just happened to stumble on a really cool PHP/CSS/AJAX solution: Monket Calendar. Check out the demo. As of now, it is still in beta testing, but it looks promising. (Especially since it supports RSS and iCal…as well as used AJAX. I need some more AJAX in my life.
[tags]Monket Calendar, AJAX[/tags]