Results 1 to 3 of 3

Thread: is it the correct implementation of tabbed navigation?

  1. #1
    Join Date
    May 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default is it the correct implementation of tabbed navigation?

    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

    Code:
    <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:

    Code:
    <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
    Last edited by dev4u; 06-16-2008 at 06:32 AM.

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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 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/dynamici...tentslider.htm
    http://www.dynamicdrive.com/dynamici...edcollapse.htm
    http://www.dynamicdrive.com/dynamici...tabcontent.htm
    http://www.dynamicdrive.com/dynamici...jaxcontent.htm
    http://www.dynamicdrive.com/dynamici...tent/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.

  3. The Following User Says Thank You to Medyman For This Useful Post:

    dev4u (06-24-2008)

  4. #3
    Join Date
    May 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thanq man,this is my first post and you are the first man to reply,once again thanq

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •