Html/css/php selected navigation

Question

I'm new to this so I need your help, I have a navigation menu in my header. When a page is active, its tab has a special id named menu_active. I'm including this header.php in my pages to reduce redundancy.

This is what I've tried so far:

    <nav>
        <ul id="menu">

            <?php 
                $pages = array( 'index.php' => 'Home', 'services.php' => 'Services', 'sitemap.php' => 'Calculators', 'about.php' => 'About'
                , 'contact.php' => 'Contact' );

                foreach( $pages as $url => $title ) {
                   $li = '<li ';
                   if( $url == 'index.php' ) {
                       $li .= 'class="alpha"';
                   } else if ( $url == 'contact.php' ){
                       $li .= 'class="omega"';
                   }

                   if( $_SERVER[ 'PHP_SELF' ] == $url ) {
                       $li .= 'id="menu_active"';
                   }
                   $li .= '><a href="' . $url . '"><span><span>' . $title . '</span></span></a></li>';
                   echo $li;
                }
            ?>

        </ul>
    </nav>

UPDATE: *CSS*

      #menu {
width:100%;
overflow:hidden;
margin-top:3px
    }
    #menu li {
float:left
    }
    #menu a {
display:block;
font-size: 18px;
font-weight:400;
color:#000;
background:url(../images/menu.gif) top repeat-x;
line-height:55px;
text-decoration:none;
  }
  #menu li span {
display:block;
background:url(../images/menu_left.gif) top left no-repeat
  }
  #menu .alpha span {
background:url(../images/left_menu.gif) top left no-repeat
  }
  #menu .alpha a:hover span, #menu .alpha#menu_active a span {
background:url(../images/left_menu_active.gif) top left no-repeat
  }
  #menu .omega span span {
background:url(../images/right_menu.gif) top right no-repeat
  }
  #menu .omega a:hover span span, #menu .omega#menu_active a span span {
background:url(../images/right_menu_active.gif) top right no-repeat
  }
  #menu li span span, #menu .alpha span span {
background:url(../images/menu_right.gif) top right no-repeat;
padding:0 60px
  }
  #menu a:hover, #menu #menu_active a {
color:#fff;
background:url(../images/menu_active.gif) top repeat-x
  }
  #menu a:hover span, #menu #menu_active a span {
background:url(../images/menu_left_active.gif) top left no-repeat
  }
  #menu a:hover span span, #menu #menu_active a span span, #menu .alpha#menu_active a span span, #menu .alpha a:hover span span {
background:url(../images/menu_right_active.gif) top right no-repeat
  }

I can get to work the first and last menu, but the active states still to no avail. What seems to be the problem in here? And can you help what is the best practice to do this?

can you show us your code of css ? showing html also, wouldn't be bad, maybe you've got problems there too — aspirinemaga
– aspirinemaga, Commented Nov 4, 2013 at 9:55

Community · Accepted Answer · 2017-05-23 10:32:13Z

1

Are you sure that $_SERVER['PHP_SELF']; is enough to check the url?

I think you have to use this:

$query = $_SERVER['PHP_SELF'];
$path = pathinfo( $query );
$what_you_want = $path['basename'];

Source

And don't use "==" to compare, use "===" better.

I think you have to check empty space between class and id too. Take a look into Firebug or Chrome Developer Tools to check what HTML code is produced?

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Nov 4, 2013 at 10:05

szymonm

1,0518 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dunkey Over a year ago

id="menu_active" is not included in the current page. I checked the source code.

Dunkey Over a year ago

Hey when I tried adding the above code, it now works! Thanks a bunch buddy!

szymonm Over a year ago

Glad I could help! Good luck :) Btw. if you have such issues, just try to print out the variables and check their value, e.g. in HTML. The fastest way to find the solution. Cheers.

Mate Solymosi · Accepted Answer · 2013-11-04 10:03:24Z

0

$_SERVER["PHP_SELF"] contains not only the name of the PHP file being executed but also its path relative to the document root (see http://php.net/manual/en/reserved.variables.server.php).

Use the basename function to extract the file name from PHP_SELF:

if(basename($_SERVER["PHP_SELF"]) == $url)
{
    $li .= 'id="menu_active"';
}

See http://php.net/manual/en/function.basename.php for more details.

answered Nov 4, 2013 at 10:03

Mate Solymosi

6,00726 silver badges31 bronze badges

2 Comments

Mate Solymosi Over a year ago

Does it appear in the source code? Then it's a client-side problem. Otherwise it's a problem with your PHP code. What's the exact value for $_SERVER["PHP_SELF"]? And basename($_SERVER["PHP_SELF"])? Which page are you testing your code on that should have the menu_active class?

Dunkey Over a year ago

I'm testing my index.php, it is the current page, yet no change at all. When I viewed the source code, id='menu_active' wasn't included.

Community · Accepted Answer · 2017-05-23 10:25:30Z

0

If its what I think you mean, I just had the same question. I was able to get it resolved.

CSS navigation with PHP include

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jan 5, 2014 at 16:17

Conrad M

2031 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Html/css/php selected navigation

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related