Archive for August, 2009

PHP – Header and Footer Templates

Why use PHP header and footer templates? Luckily, there is a very simple answer to this question. When you need to change a piece of navigation, or an image such as your logo, or even just change the copyright year in your footer, do you want to have to go into every HTML file to change that one item? Of course not! Using a php header and footer will allow you to avoid changing all of your pages, and instead only make you change it once!

So how does it work? Simple. There are a few catches though first which you might not like, so pay attention! First, your website URLs will now end in .php instead of .html. Second, you won’t be able to test your website without using a server that can compile your PHP. As I explained in a previous post, PHP – What Is It Good For?, PHP is a server side language, as opposed to HTML, CSS, or Javascript, which are all client side languages. Client side languages are read and interpreted by an individual person’s browser, whereas server side languages are read and interpreted by the server that hosts the website before it arrives back to the individual user. Easy solutions are to either put it up live to test it (not advised), or to install an Apache server on your computer, which wasn’t the easiest thing for me to do (because I’m not very techy) but there are some good walk-throughs out there, and the software is free. I use it all the time now because I do all my sites in PHP.

But I’m not a web developer, I’m a web designer! Don’t be intimidated if you aren’t a programmer. Writing websites in php can be as little as 1% PHP and 99% HTML/CSS. I didn’t realize this until I actually tried to learn it, at which point I was much more comforted. You still make your entire site using your HTML or CSS, the PHP just decides essentially what content to put in where after you’ve made it all using your HTML/CSS.

How do I implement it? Alright, now here is your explanation. You’ll need 3 total files. One called “header.php”, one called “footer.php”, and one called “index.php”. Inside your header file, cut and paste all the header code (starting all the way at your opening html tag or doctype declaration if you have one… because you should). Then, do the same for your footer file with your footer HTML. Now, inside of your index.php file write two lines of code, one at the top, and one at the bottom, you can probably guess which goes where:

<?php include("header.php"); ?>
<?php include("footer.php"); ?>

And that’s it, run it on a server and you are set. Still a little confused? Well here, this is what each of your files should look like:

header.php

<html>
  <body>
    <div class="header">
      Logo, navigation, et cetera goes in here
    </div>

index.php

<?php include("header.php"); ?>
    <div class="mainContent">
      <h1>Header in here</h1>
      <p>Paragraph in here</p>
    </div>
<?php include("footer.php"); ?>

footer.php

    <div class="footer">
      Footer content goes in here
    </div>
  </body>
</html>

And that’s it, got any questions, ask away!

Javascript: Rollover Dropdown Menus

Up until recently I’d never implemented a rollover dropdown menu. Then I just decided to build one from scratch for my fulltime employer to improve upper-level navigation. Basically, with some simple javascript to hide/show the menu and some CSS to style and position it, you’ve got yourself a simple javascript rollover dropdown menu! The code follows the example implementation below.

The Javascript:

function rolloverMenu(showHide, menu)
{
    var linkObj = document.getElementById('mainLink');
    var menuObj = document.getElementById(menu);
    if (showHide == 0)
    {
        menuObj.style.display = 'none';
        linkObj.setAttribute('class', 'mainNav');
        linkObj.setAttribute('className', 'mainNav');
    }
    else
    {
        menuObj.style.display = 'block';
        linkObj.setAttribute('class', 'selectedRollover');
        linkObj.setAttribute('className', 'selectedRollover');
    }
}

This javascript will either hide or show the menu depending on the location of the cursor. The HTML that calls the javascript has a delay on it as well, but you’ll see that later. This javascript also changes the class name of the link so that even though your mouse isn’t technically hovering over that link it will look like it is being hovered over.

The CSS:

#container{
    position: absolute;
    z-index: 1001;
}
a.mainNav{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #1D3E66;
}
a.mainNav:hover{
    background-color: #3D6199;
    color: #AAAAAA;
}
a.selectedRollover{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #3D6199;
}
.rolloverMenu{
    float:left;
    padding: 10px 10px 6px 10px;
    position: absolute;
    z-index: 1000;
    background-color: #3D6199;
    width: 100px;
}
.rolloverMenu#mainMenu{
    top: 40px;
}
.rolloverMenu a{
    color: White;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
}

Change the CSS to fit your own design. I’ve been very specific in this CSS so that it should be easier for you to identify everything. Note that the #container definition is actually very important for an IE6 bug fix. IE6 has issues with z-index when not combined with absolute positioning. Basically, the parent element of the rollover menu needs to have that specific definition.

Lastly, the HTML:

<div id="container">
  <a class="mainNav" href="#" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">Rollover Me</a>
  <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">
    <a href="#">Link 1</a><br />
    <a href="#">Link 2</a><br />
    <a href="#">Link 3</a><br />
    <a href="#">Link 4</a>
  </div>
</div>

And that’s that! The HTML link calls the javascript which implements a series of CSS rules that will hide or show the menu of your choice! Have fun!