SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation How to adjust color of Active Page in CSS?

    hi friends

    i need small help

    http://kenrock.com.pk/ open this plz

    suppose home page opened , i want to make "home" text color in menu "white"

    or any active page like

    http://kenrock.com.pk/completedProjects.html active page "completed projects" its color should be changed into white... because its active page
    user get to know, its in which page

    thanks,waiting

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's easy with CSS. Firstly, add a special class to each link. E.g.

    Code:
    <ul>
      <li><a class="home" href="index.html">Home</a></li>
      <li><a class="com" href="completedProjects.html">Completed Projects</a></li>
      <li><a class="cli" href="clientele.html">Clientele</a></li>
      <li><a class="sta" href="keystaff.html">Key Staff</a></li>
      <li><a class="equ" href="equipment.html">Equipment</a></li>
      <li><a class="con" href="contact.html">Contact Us</a></li>
    </ul>
    Then add this to your CSS:

    Code:
    .home #mainMenuContainer ul li a.home, .com #mainMenuContainer ul li a.com, .cli #mainMenuContainer ul li a.cli, .sta #mainMenuContainer ul li a.sta, .equ #mainMenuContainer ul li a.equ, .con #mainMenuContainer ul li a.con  {
      color: white;
    }
    Then on the Home page, add the same class to the <body> tag:

    Code:
    <body class="home"
    and put the equivalent class on the body tag for each other section. E.g. all pages in the Key Staff section all have this on the <body> tag:

    Code:
    <body class="sta">
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's easy with CSS. Firstly, add a special class to each link. E.g.
    thanks,first i thought similar thing, but i thought , any small other trick might be

    but now i ve to add this code on all pages

    thanks a lot sir

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad it worked. Why the sad face?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Cool, glad it worked. Why the sad face?
    no i am not sad happy thanks

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I dislike the dual class approach myself -- but then I really don't tend to think of a lot of legitimate reasons to put a ID or class on BODY. Usually I just put a class of 'current' on the current menu item server-side in the markup. It's easier to style for, less confusing, and less code.

  7. #7
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I dislike the dual class approach myself -- but then I really don't tend to think of a lot of legitimate reasons to put a ID or class on BODY. Usually I just put a class of 'current' on the current menu item server-side in the markup. It's easier to style for, less confusing, and less code.
    can you give me an example

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well, my menus are usually built off a PHP array... so... well, I'll pull it from the codebase I'm working on right now -- this is PHP so it's a wee bit more complex, but you'd have to swap the ID on body anyways for each page so it's not that different. I'll simplify it down a little.

    I typically have an associative array of URL => description:
    Code:
    	$mainMenu=array(
    		'/' => 'Home',
    		'/forums' => 'Forums',
    		'/technical' => 'Technical Reference',
    		'/about' => 'About Us'
    	);
    (this array is usually built or added to dynamically by my back-end code)

    Which I then iterate through to echo out.
    Code:
    	echo '
    		<ul id="mainMenu">';
    		
    	foreach ($mainMenu as $url => $text) {
    		echo '
    			<li><a href="',htmlspecialchars($url),'"',(
    				$text==$currentURL ? ' class="current"' : ''
    			),'>',$text,'</a></li>';
    	}
    	echo '
    		</ul>';
    With a variable $currentURL which equals the current page minus the domain.

    So when $currentURL=="/" it outputs:
    Code:
    		<ul id="mainMenu">
    			<li><a href="/" class="current">Home</a></li>
    			<li>a href="/forums">Forums</a></li>
    			<li>a href="/technical">Technical Reference</a></li>
    			<li>a href="/about">About Us</a></li>
    		</ul>
    When $currentURL=="/technical"
    Code:
    		<ul id="mainMenu">
    			<li><a href="/">Home</a></li>
    			<li>a href="/forums">Forums</a></li>
    			<li>a href="/technical" class="current">Technical Reference</a></li>
    			<li>a href="/about">About Us</a></li>
    		</ul>
    So on and so forth. Bit more code on the back end, but really

    Code:
    .current {
    Is WAY easier to deal with than the headache of going:

    Code:
    #home .home,
    #forums .forums,
    #technical .technical,
    #about .about {
    Especially since it lets me add or remove items with impunity without worrying about adding/removing them from the CSS. Having to modify the CSS just because you want to add a new menu item is... well... indicative of failing to future-proof.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice work, DS; though it depends on the site being set up like that from the outset. I guess another way to do it with PHP on an already created site would be something like this (though I'm sure you could improve on it, me bein' a noob'n'all):

    PHP Code:
    <?php $currentPage basename($_SERVER['SCRIPT_FILENAME']); ?>
    <ul>
      <li><a href="index.html" <?php if ($currentPage == 'index.html') {echo 'class="current"';} ?>>Home</a></li>
      <li><a href="completedProjects.html" <?php if ($currentPage == 'completedProjects.html') {echo 'class="current"';} ?>>Completed Projects</a></li>
      <li><a href="clientele.html" <?php if ($currentPage == 'clientele.html') {echo 'class="current"';} ?>>Clientele</a></li>
      <li><a href="keystaff.html" <?php if ($currentPage == 'keystaff.html') {echo 'class="current"';} ?>>Key Staff</a></li>
      <li><a href="equipment.html">Equipment</a></li>
      <li><a href="contact.html" <?php if ($currentPage == 'equipment.html') {echo 'class="current"';} ?>>Contact Us</a></li>
    </ul>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well, it's not bad, though I'd probably have that ALL in a echo statement since I consider opening and closing php like that to be bad coding practice -- but again I'm in favor of having <?php and ?> removed from PHP entirely. Would speed it up, plug a number of security holes, make the folks at turdpress have to throw out their entire codebase and maybe try writing code properly for a change...

    My approach would probably use inline evaluations like this:

    Code:
    <?php
    
    $currentPage = basename($_SERVER['SCRIPT_FILENAME']);
    echo '
    <ul>
      <li><a href="index.html"',(
        $currentPage=='index.html') ? ' class="current"' : ''
      ),'>Home</a></li>
      <li><a href="completedProjects.html",(
        $currentPage=='completedProjects.html' ? ' class="current"' : ''
      ),'>Completed Projects</a></li>
      <li><a href="clientele.html",(
        $currentPage=='clientele.html' ? ' class="current"' : ''
      ),'>Clientele</a></li>
      <li><a href="keystaff.html",(
        $currentPage=='keystaff.html' ? ' class="current"' : ''
      ),'>Key Staff</a></li>
      <li><a href="equipment.html",(
        $currentPage=='equipment.html' ? ' class="current" : ''
      ),'>Equipment</a></li>
      <li><a href="contact.html",(
        $currentPage=='contact.html' ? ' class="current" : ''
      ),'>Contact Us</a></li>
    </ul>';
    
    ?>

    Though really that's a lot of redundant code.... I'd probably still build an array first... just to make it a loop and eval for less total code.

    Code:
    $mainMenu=array(
      'index.php'             => 'Home'
      'completedProjects.php' => 'Completed Projects',
      'clientele.php'         => 'Clientele',
      'keystaff.php'          => 'Key Staff',
      'equipment.php'         => 'Equipment',
      'contact.php'           => 'Contact Us'
    );
    
    echo '
      <ul id="mainMenu">';
      
    
    foreach ($mainMenu as $title => $url) {
      echo '
        <li><a href="',$url,'"',(
          $currentPage==$url) ? ' class="current"' : ''
        ),'>',$title,'</a></li>';
    }
    echo '
      </ul>';
    It would also make adding/removing menu items a lot simpler since you would just add the url and title to the array, then let the loop handle the markup.

    Could take it even further and use that same array to build your TITLE attribute.

    Code:
    <?php
    
    $siteTitle='Name of the website';
    
    $mainMenu=array(
      'index.php'             => 'Home'
      'completedProjects.php' => 'Completed Projects',
      'clientele.php'         => 'Clientele',
      'keystaff.php'          => 'Key Staff',
      'equipment.php'         => 'Equipment',
      'contact.php'           => 'Contact Us'
    );
    
    $currentPage = basename($_SERVER['SCRIPT_FILENAME']);
    $currentTitle=isset($mainMenu[$currentPage]) ? $mainMenu[$currentPage] : '';
    if ($currentTitle=='Home') $currentTitle='';
    
    echo '
    <title>
      ',(is_empty($currentTitle) ? '' : $currentTitle.' - '),$siteTitle,'
    </title>
    
    </head><body>
    
      <h1>',$siteTitle,'</h1>
      
      <ul id="mainMenu">';
      
    
    foreach ($mainMenu as $title => $url) {
      echo '
        <li><a href="',$url,'"',(
          $currentPage==$url) ? ' class="current"' : ''
        ),'>',$title,'</a></li>';
    }
    echo '
      </ul>';
    
    ?>
    Though that's treading into starting to build your own CMS... which isn't necessarily a bad thing given the quality of most of the off the shelf ones.

  11. #11
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I dislike the dual class approach myself -- but then I really don't tend to think of a lot of legitimate reasons to put a ID or class on BODY. Usually I just put a class of 'current' on the current menu item server-side in the markup. It's easier to style for, less confusing, and less code.
    That's fine if you're using PHP, but I mostly go for a much simpler approach and use SSIs to pull in the menu, meaning that the only effective way to achieve that result is to put a class/ID on the <body>. It works fine, it doesn't cause any problems, I see nothing wrong with it as an approach.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    That's fine if you're using PHP, but I mostly go for a much simpler approach and use SSIs to pull in the menu, meaning that the only effective way to achieve that result is to put a class/ID on the <body>. It works fine, it doesn't cause any problems, I see nothing wrong with it as an approach.
    Wait, people still use SHTML? Kidding.

    You're right, within the limitations of SHTML that's really the best (only?) option; though I HATE what it does in the CSS AND the markup since it reeks of 'slap values on EVERYTHING'.

    Sooner or later it's time to strap on the big boy boots.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Thanks for all those demos, Jason. For someone just learning PHP, they are fascinating and very educational.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    That's fine if you're using PHP, but I mostly go for a much simpler approach and use SSIs to pull in the menu, meaning that the only effective way to achieve that result is to put a class/ID on the <body>. It works fine, it doesn't cause any problems, I see nothing wrong with it as an approach.
    I really do like Jasons first one with setting the variables to different values. I use that currently on my site to indicate activity among certain pages.

    It's annoying to have to have an if statement everywehre by it adds dynamictivity to it
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Wait, people still use SHTML? Kidding.
    Why not? It does everything I need it to do on those sites. Why make things more complicated than they need to be?

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Why not? It does everything I need it to do on those sites. Why make things more complicated than they need to be?
    Nothing wrong with it, I've just not seen anyone actually use it in five or six years. Kinda like coldfusion -- you just don't see it being used unless it's an older site.

  17. #17
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,805
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @aliqayyum.

    I use a similar stand-alone file which is included in every page:

    # Style-sheet.css
    HTML Code:
      #sp-menu li      {display:inline-block; padding:0 1em}
      #sp-menu #active {color:#900}

    # Files: home, complete, client, key-staff, equipment, contact-us
    PHP Code:

    <!--Start of Main Menu-->
      <div id="mainMenuContainer">
         <?php include  'incs/__sp-menu.php';?>
       </div>

    # File: 'incs/__sp-menu.php'
    PHP Code:
    <?php 
      $a
    =array
      (
        
    'home'       =>  'Home',
        
    'complete'   =>  'Completed Projects',
        
    'client'     =>  'Clientele',
        
    'key-staff'  =>  'Key Staff',
        
    'equipment'  =>  'Equipment',
        
    'contact-us' =>  'Contact Us',
      );
      
      
    $rqst $_SERVER['REQUEST_URI'];
      
      echo 
    '<ul id="'sp-menu">';
        foreach( 
    $a as $url => $title):

            # Maybe active page
            if( ('/'==
    $rqst && 'home' == $url) || strpos( $rqst$url )  )
            {
              
    $title = '<stong id="active">' .$title .'</strong>';
            }
            echo '<li><a href="' .$url .'">' .
    $title .'</a></li>';

        endforeach;
     echo '</ul>';
    Last edited by John_Betong; Mar 27, 2012 at 19:44. Reason: formatting and spelling: not my fortay


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
  •