PHP examples (Pro. PHP Progr.)
 
PHP examples (Pro. PHP Progr.)

PHP-test 11

Alternative navigation bars implemented
with CSS (Cascading Style Sheets)


The two navigation bars on this page are implemented with CSS instead of JavaScript.

In the first navbar the popup effect is created by changing the background image in the table cells, and in the second navbar the popup effect is created by changing the border colors of two nested DIV tags.

It seems to work best in Opera 7, almost as good in Mozilla and Netscape 7.

New: the popup buttons effect now works in MS Internet Explorer 6.

11_css-navbar.php Click to see the code for this page (in a new window "newTestWin").

Notice that this page pretends to be "PHP Examples (Pro. PHP Progr.)"


1:

The pop-up-button effect on the navigation bar is created with CSS, in the HEAD of the HTML file is this line:

<LINK REL=stylesheet TYPE="text/css" HREF="../navbt/css-nav.css">

This will include the stylesheet that creates the popup effect.

css-nav.css Click to see the code in that file (in the new window "newTestWin").

Notice that the stylesheet now has emulation of the :hover and :active pseudo-classes in Internet Explorer 5+, using a HTML component (.htc) file, because otherwise IE supports these only on the A (anchor) element.

hov-act.htc Click to see the code in that file (in the new window "newTestWin").


2:

Then we have this php script:

<?php 
if( $_SERVER['QUERY_STRING'] == "" )
{ 
  $navBase = "../"; 
  $altLang = "";   // No Swedish version 
  $actPage = 10;   // This page pretends to be "PHP Examples (Prp. PHP Progr.)" 
  require("../navbt/nav_eng.php"); 
} 
?>

First the php variables "$navBase", "$altLang" and "$actPage" are set, and then the file "nav_eng.php" is included. This file is used on all pages, and contains information (URL and button image) about the links in the navbar.

nav_eng.php Click to see the code in that file (in the new window "newTestWin").


3:

Finally we have this php script:

<?php 
if( $_SERVER['QUERY_STRING'] == "" )
{
  require("../navbt/css-nav_horz.php");
  print("\n\n \n\n");
  require("../navbt/css-nav2_horz.php");
?>

This includes the files "css-nav_horz.php" and "css-nav2_horz.php". These files are scripts that write the two versions of the navbar table.

css-nav_horz.php Click to see the code in that file (in the new window "newTestWin")

css-nav2_horz.php Click to see the code in that file (in the new window "newTestWin")


Page created 2003-03-22, last changed 2004-01-16 19:28
This mirror page last changed 2009-12-04

© 2004 Bo Johansson