WEB How do I automate what's selected on my navbar?

Discussion in 'OT Technology' started by shaitaan, Jan 18, 2010.

  1. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
    I hope this question makes sense :o

    So, I have different elements on the navigation menu selected depending on what page a visitor is on. For example, on the home page, the nav looks like this:

    [​IMG]


    but on the Try it free page, it should look like this:

    [​IMG]


    i'm using CSS to do the selected effect.



    However, I want to have a common header.php file across all my pages; how do I automate what navigation element is selected based on what page the user is on with one common header, without having to manually change it for each page?


    htmlcode:

    Code:
    
    	<ul id="navigation">
    						
    						<li class="selected"><a href="#">Home</a></li>
    						<li><a href="#">Try it Free</a></li>
    						<li><a href="#">Features</a></li>
    						<li><a href="#">Demo Videos</a></li>
    						<li><a href="#">Examples</a></li>
    						<li><a href="#">Reviews</a></li>
    						<li><a href="#">Support</a></li>
    						<li><a href="#">Buy</a></li>
    						
    					</ul>
    
    

    CSS code:

    Code:
    
    #navigation { display:inline; margin-top:12px; float:right;}
    #navigation li { display:block; float:left; background:url(../images/navigation-li-bg.gif) no-repeat top left; height:23px; margin-right:5px;}
    #navigation a { display:block; background:url(../images/navigation-a-bg.gif) top right no-repeat; height:23px; padding: 0 8px; text-decoration:none; color:#fff; font-size:13px; line-height:22px;}
    #navigation a:hover { background-position:bottom right; color:#bbddff;}
    *html #navigation a:hover { background-position:top right; color:#bbddff;}
    #navigation li:hover { background-position:bottom left;}
    #navigation .selected a { background-position:bottom right; color:#bbddff;}
    #navigation .selected { background-position:bottom left;}
    *html #navigation .selected a { background-position:top right; color:#bbddff;}
    *html #navigation .selected { background-position:top left;}
    
    

    help plz :x: :x:







    Does that make sense?
     
  2. shaitaan

    shaitaan New Member

    Joined:
    Jul 12, 2002
    Messages:
    49,620
    Likes Received:
    0
    Location:
    Bay Area, CA / NYC
    whoops, got it. i can just do it with this

    :wiggle:

    Code:
    
    <?php if ($_SERVER['PHP_SELF']=="/index.php" || $_SERVER['PHP_SELF']==""){ echo " class=\"selected\""; }?>
    
    
     

Share This Page