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!