SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabbed website: PHP to make active tab / inactives...?

    Problem -

    I have a CMS which makes pages dynamically. I have navigation that uses CSS to make the navigation "tabbed". When you're on the current page, the associated "tab" looks like it is "active".

    Well, when my CMS makes a new page, the link goes into the navigation all fine and dandy, but at the moment, I have no way of implementing the tabbed stuff. How can I do this through PHP's dynamics, but keep the CSS I have used to be applied to the "active" and "inactive" tabs???

    If I understand it correctly, we're talking about simple tabbed navigation here that gets the CSS assigned to each link upon creation by PHP.

  2. #2
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are many ways to do this.
    A simple solution:

    define two CSS styles:
    .active(for current tab)
    .inactive(for inactive tab)

    in the HTML for the tabs, do something like this:
    <li class="<?php echo $homeClass ?>">HOME</li>
    <li class="<?php echo $contactClass ?>">Contact</li>


    Now from PHP, when you are in index page set $homeclass to '#active' and everything else to '#inactive'; Follow the same logic for the rest of the pages.

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kailash Badu View Post
    There are many ways to do this.
    A simple solution:
    define two CSS styles:
    .active(for current tab)
    .inactive(for inactive tab)
    in the HTML for the tabs, do something like this:
    <li class="<?php echo $homeClass ?>">HOME</li>
    <li class="<?php echo $contactClass ?>">Contact</li>
    Now from PHP, when you are in index page set $homeclass to '#active' and everything else to '#inactive'; Follow the same logic for the rest of the pages.
    Okay, but how can I make that be applied to the pages autonomously when they are dynamically created via the CMS?

    For some reason, I keep thinking that I have to fetch the current page with PHP, and somehow assign those classes to an array that would have my pages as links for each array element... In turn, this would be able to store whatever pages I produce while automatically assigning those "active" and "inactive" classes to the links (the active being assigned to whatever page you would be on, hence, the fetch issue)...

  4. #4
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i had to look up autonomously. I still don't know what it means..anyway

    The best way to do it is to give each page it's own body id. And give each nav a or li it's own class. Then in your .css file do somethign like:

    Code:
    #navigation a {} /* style all navigation links */
    
    #home #navigation a.home {active} /* change style for only home link on home page
    #contact #navigation a.contact {active} /* change style for only contact link on contact page */
    Now you just have to edit your CMS's to spit out a body id for each page and a class for each nav link

    sometimes this is a pain with CMS's. It might be easier to do it a different way. But without seeing how your CMS makes nav elements look active I cant really say. Do you have a link you can give us?

  5. #5
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, no. I'm at work, and my stuff is on my laptop (which is at home...). I might have something for you, though, tonight sometime.

    As for "autonomously"... This is a word which means "automatic".

    Thanks for the ideas though. I think I have a better understanding of how this might be done now.


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
  •