Sammy7 Sammy7 - 7 months ago 20
PHP Question

How can I fix the menu on the implanted header?

So I am working on my website and every page contains a copy of the header, footer, menu. I am switching it to pull the footer and header/menu from html files of their own. This is what I'm using.
In

page.php
I have:

<?php include('header.html'); ?>


And in
header.html
I have the the Meta Tag, Title, Logo, and Menu. You can view the menu code below:

<ul id="nav" class="main">
<li><a href="index">Home</a></li>
<li><a href="about">About Us</a></li>
<li><a href="contact" class="active">Contact</a></li>
</ul>


And this is not important but here is my css:
.nav {list-style:none; margin:0 0 1.5em 0;}

/*Add a class of centred/centered to create a centred nav.*/

#nav.main{
float: right;
text-align:center;
margin: 0 0 0 0;
padding: 0 0;
font-family:'Oswald', Arial, sans-serif;
}
#nav.main li {display:inline; float:none;}

#nav.main a{
display:inline-block;
padding: 0.6em 1.2em;
background-color: #EFEFEF;
border-radius: 10px;
border-right: 1px solid #bbb;
border-bottom: 2px solid #bbb;
color: #666;text-decoration:none;
text-transform:uppercase;
text-shadow: 1px 1px 1px #fff;
font-size: 1.1em;
margin: 0 0 0em 0;
}
#nav.main a:hover{color: ; text-shadow: 1px 1px 0px #fff; background-color: #ffd27f; }

#nav.main a.active{color: #fff; text-shadow: 1px 1px 1px #333; font-weight: bold; background-color: #FF8307; letter-spacing: 1px;}

#nav li span {display: block; font-size: 10px; color: #666; text-shadow: none; line-height: 8px;}


If I have it as active for all pages all pages will show up as Contact being active. How do I make it so that it knows what page I'm on and does it itself? I was thinking maybe to use JavaScript but how would I do this?

Note: This is just a simple
php
and
html
site.


Edit:

I did what @barmar said but know it works but the menu loses its padding and alignment and it looks weird why is that? I attached images of before and after.

Picture of new menu

Picture of old menu

Edit Edit: My old menu looks like the code I have above. This is my new menu with the boilerplate that is still coming up wrong like in the image 2 above.

<?php
function show_header($this_page) {
$navs = array('index' => 'Home', 'media' => 'Pictures & Videos', 'about' => 'About Us', 'donate' => 'Donate', 'contact' => 'Contact');
?>
<!-- boilerplate stuff here -->
<ul id="nav" class="main">
<?php
foreach ($navs as $href => $text) {
$active = $href == $this_page ? "class='active'" : '';
echo "<li><a href='$href' $active>$text</a></li>";
}
?>
</ul>
<!-- more boilerplate -->
<?php
}
?>

Answer

Instead of a hard-coded HTML file, use a PHP script, and have it define a function.

header.php:

function show_header($this_page) {
    $navs = array('index' => 'Home', 'about' => 'About Us', 'contact' => 'Contact');
    ?>
    <!-- boilerplate stuff here -->
    <ul id="nav" class="main">
    <?php
    foreach ($navs as $href => $text) {
        $active = $href == $this_page ? "class='active'" : '';
        echo "<li><a href='$href' $active>$text</a></li>";
    }
    ?>
    </ul>
    <!-- more boilerplate -->
    <?php
}

Then the page would contain:

<?php require("header.php");
      show_header("contact");
?>