Open Realty Tabbed Navigation

Posted on August 7, 2007
Filed Under Design, Portfolio, Products, Real Estate News, Template Design Kit |

Tabbed Navigation for Open Realty Templates

People like tabs, they like cascading menus and they like clean styled well organized navigation structures. Using tabs for navigation isn’t all to difficult to do for most things as the markup is widely available and easily implemented. One of my favorite of all tabbed type navigation examples is the one published by A List Apart called Sliding Doors A great static tab set with styling for active states for a satisfying effect. But what if you want to use that same tab set in a dynamic environment where tab and or navigation states are all template based. Meaning the navigation elements are not controlled by the database as they are in say Joomla or other applications. Well I needed an answer to that as well having a serious desire to make a tabbed template for CRE Loaded Pro and here is what we did.

Open Realty and Sliding Doors Tab Navigation

Using a static type navigation set like the sliding doors example is that one particular feature of the tabs for active page isn’t exactly a stock feature in Open Realty. Because of this, I recently took a contribution I released last month for CRE Loaded and converted it to work with Open Realty in a no nonsense kind of way that is exceptionally easy to embrace providing a few of your ducks are in a row and you have properly configured your Open Realty installation.

What I’ve done is simple. I take a small chunk of PHP code and determine the URL of the pages I have matched to my tabs and then dynamically set the active state of that particular tab based on an array. Did I lose you? Well here it is in bare bones basic terms.

If you have a tab set with links like Home, About Us, Contact, etc… and you want the active tab to show active when on the about.html page or any other for that matter then when we edit the tab control file by adding the target landing page to the array and then add the link in the tab and your done. Could it get any simpler?

This little technique then gives you the ability to have a nice active state for pages in a templated environment like Open Realty. I’ve used it with other template engines where pages and or active link options are not provided by the application as you can see in the IDX example HERE. When you download the example or visit the site example you can see that the tabs are set to active on each appropriate page. Before you say big deal dude, how is that a challenge, take and download the sliding doors example from A List Apart and examine the code yourself. This solution will not rock the world but it sure does make an Open Realty template shine with a design that can accommodate a nice tabbed navigation.

You can find the tabs example and basic Open Realty template in the tutorials section of TBE.

Best regards.

Comments

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments


TEMP CODE: GDHXCDX17249629
Close
E-mail It