PHP Navigation Id applied to parent when on child - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 10, 2014 at 10:17 am #162449
sap7724
Participant
Hey there, hope my topic title wasn’t too cryptic. I am new to PHP and loving it so far. So first I am not using WordPress. Seems like everything I have found online so far is WordPress specific.

So my problem is I am using php on my companies site (http://www.specialtyoperations.com/) to underline the navigation during the “active” state and I am having trouble applying it to the sub nav. When on the sub nav I want the parent page to have the underline For example if you are looking at my site when viewing one of the career information I want Contact in the primary nav underlined. Thank for your help in advance. Here is my code for the parent:
```
<a href="contact.php" <?php if($currentPage == 'contact.php') {
    echo 'id="current"';
    } ?>
>Contact</a>
```
February 10, 2014 at 10:37 am #162451

__
Participant

[I want] to underline the navigation during the “active” state and I am having trouble applying it to the sub nav. When on the sub nav I want the parent page to have the underline …

You’ll have to have some way of telling which page you are currently viewing. We’d need to know more about how your php is structured in order to give specific advice. Are you using a CMS? is your site basically templated and uses includes?

February 10, 2014 at 11:13 am #162458

chrisburton
Participant

So first I am not using WordPress

I love reading that.

February 10, 2014 at 11:49 am #162469
sap7724
Participant
Well, I hope I answer this correctly cause I”m still learning…sorry. Not using a CMS, I am working in the code and I am only using PHP in the navigation and footer so that I don’t have to repeat the same html 15 different times. So far that’s all I really know how to do with PHP…. I don’t have any includes. My header looks like this….
```
        <div id="header-logo" class="span4">
            <a href="index.php"><img src="images/SOS_logo.jpg" alt="SOS logo" /></a>
        </div>

        <div id="header-nav" class="span7 header-nav">
            <nav>
                <ul class="mainmenu">

                    <li><a href="index.php" <?php if($currentPage == 'index.php') {

                        echo 'id="current"';
                            } ?>
                                >Home</a> </li>
                    <li><a href="services.php"<?php if($currentPage == 'services.php') {

                        echo 'id="current"';
                            } ?>

                                >Services</a>
```
…….. etc
February 10, 2014 at 12:10 pm #162473
__
Participant
First, a tangent (sorry): does anyone else have crap like this going on?

Only this thread.

@sap7724 To answer your question, if you’re currently doing stuff like this:
```
if($currentPage == 'index.php')
```
Then I would suggest building an array that contains all of the subpages for each page. For example,
```
$indexPages = array(
    "index.php",
    "subpage-1.php",
    "subpage-n.php"
    // etc.
);
//  . . .
if( in_array( $currentpage,$indexPages ) ){
    echo ' id="current"';
}
```
February 10, 2014 at 1:00 pm #162480

Alen
Participant

@traq

yes.

February 10, 2014 at 1:32 pm #162489
__
Participant
@Alen I made a report.

@sap7724 Does that help out? Your approach (the $currentpage idea) is quite common, and works fairly well.

Another possible approach would be to add a specific classname (or data-* attribute, perhaps a similar format to a “breadcrumb”) to the body and each menu item, and then the styling could be done directly in css with no extra work in php. For example:

html:
```
<body data-page="index-subpage-1">
<nav>
    <a href="index.php" data-page="index">Index</a>
    
</nav>
```
css:
```
[data-page^=index] [data-page=index]{ text-decoration: underline; }
```
February 10, 2014 at 2:12 pm #162495

Senff
Participant

(layout issue fixed)
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘Back End’ is closed to new topics and replies.