Log in

View Full Version : is it the correct implementation of tabbed navigation?



dev4u
06-16-2008, 06:14 AM
hi everyone,
I am working on iphone web design.I am having problem in this tabbed navigation issue.I am using 5 tabs,

home videos @@@ $$$ search

like this,i have used css for tabbed appearance.
In body tag,Using unordered list My implementation is like this



<ul class="navigation">
<li class="navlist"><a href="home.html">home</a></li>
<li class="navlist"><a href="videos.html">videos</a></li>
<li class="navlist">@@@@</li>
<li class="navlist">@@@@</li>
<li class="navlist"><a href="search.html">search</a></li>
</ul>

now,I have created 5 html pages home.html,videos.html,@@@.html,$$$.html,search.html.I am repeating this whole code in all five pages along with respective body part of the pages,for the appearence of tabbed navigation.My PM is saying its not the correct implementation of tabbed navigation.

she is saying that,we don't have to redirect pages to another locations.we have to just reload the page dynamically.
we have to use code like this:



<ul class="navigation">
<li class="navlist"><a href="#home">home</a></li>
<li "class="navlist"><a href="#videos">videos</a></li>
<li "class="navlist"><a href="#@@@">@@@</a></li>
<li "class="navlist"><a href="#$$$">$$$</a></li>
<li class="navlist"><a href="#search">search</a></li>
</ul>

<div id="home">
----------code for home page--------------
</div>

<div id="videos">
----------code for videos page--------------
</div>

<div id="@@@">
----------code for @@@ page--------------
</div>

<div id="$$$">
----------code for $$$ page--------------
</div>

<div id="search" >
<form name="SearchFrm" action="http://search.foodnetwork.com/food/recipe/search.do" method="get" target="_blank" id="searchFrm">
----------code for search page--------------
</form>
</div>

because of this there will not be any code duplication of Unodered List code for the display of tabbed navigation and tabs will load dynamically.
Now please suggest me
1.is it fine to use my procedure and is that can be called tabbed navigation?
2.if i have to follow my PM's procedure what i have to do?can i repeat 5 pages code in that single page in respective div's of home,videos,@@@,$$$,search.tahen what about the situation if my tabs having a complex and bulk code.
please suggest me,u can understand my situation by alll this explanation

Medyman
06-16-2008, 01:13 PM
Hey dev4u...

First, yes what you have is called tabbed navigation. There isn't a standard for "tabbed navigation". So, if you have tabs that are used for navigation, I'd called it tabbed navigation. The real question is it's implementation and utility.

If you're using the tabs as your page's main navigation, I see no error in repeating the code across 5 pages. Of course, this makes maintenance difficult in that when you want to change something you have to change it all the places. A solution to this would be to use a server-side language (PHP, ASP,etc) or server-side includes to include only one copy of your code across several pages.

If you're using the tabs as organizational piece, separating complex/overwhelming content into easier bite-sized portions (for example, the ExpressionEngine (http://www.expressionengine.com/index.php?affiliate=visualbinary) site), then this can be done dynamically on the same page.

Dynamic Drive has several scripts that my be use to you if you choose to/ have to listen to your PM.

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

Note: All of these scripts use JavaScript to only show sections of your code at a time. In the event that the end user has JavaScript disabled, much of your content will either not be accessible or it will throw off your design. If you choose to go that route, you should consider the experience you want users without JavaScript to have and code appropriately.

dev4u
06-24-2008, 05:53 AM
thanq man,this is my first post and you are the first man to reply,once again thanq