PHP-test 11


Text of the file "11_css-navbar.php"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/REC-html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>PHP-test 11</TITLE>

   <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

  <META NAME="Author" CONTENT="Bo Johansson">
  <META NAME="Keywords" CONTENT="php, css, navigation, popup buttons">
  <META NAME="Description" CONTENT="">


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

<STYLE TYPE="text/css">
<!--

.CODE
{
  margin-left: 3%;
  margin-right: 3%;
  padding: 1%;
  background-color: #FFFFCC;
  font-size: 90%;
}

//-->
</STYLE>


<?php

if( !($_SERVER['QUERY_STRING']) )
{
  
$navBase = "../";

  
$altLang = "";   // No Swedish version

  
$actPage = 10;   // This page pretends to be "PHP Examples (Pro. PHP Progr.)"

  
require("../navbt/nav_eng.php");
}

?>

</HEAD>

<BODY>

<?php

if( !($_SERVER['QUERY_STRING']) )
{
  require(
"../navbt/css-nav_horz.php");

  print(
"\n\n&nbsp;\n\n");

  require(
"../navbt/css-nav2_horz.php");
}

?>

<H1 ALIGN=CENTER>PHP-test 11</H1>



<?php

if( $_SERVER['QUERY_STRING'] )
{
  print(
'<HR>' . "\n");
  print(
'<H3>Text of the file "');

  if(
$_SERVER['QUERY_STRING'] == "this")
    print(
'11_css-navbar.php');

  elseif(
$_SERVER['QUERY_STRING'] == "nav_eng")
    print(
'nav_eng.php');

  elseif(
$_SERVER['QUERY_STRING'] == "css-nav")
    print(
'css-nav.css');

  elseif(
$_SERVER['QUERY_STRING'] == "htc")
    print(
'hov-act.htc');

  elseif(
$_SERVER['QUERY_STRING'] == "css-nav_horz")
    print(
'css-nav_horz.php');

  elseif(
$_SERVER['QUERY_STRING'] == "css-nav2_horz")
    print(
'css-nav2_horz.php');

  print(
'"</H3>' . "\n");


  print(
'<DIV CLASS="CODE">' . "\n\n");

  if(
$_SERVER['QUERY_STRING'] == "this")
    
highlight_file("11_css-navbar.php");

  elseif(
$_SERVER['QUERY_STRING'] == "css-nav")
    
highlight_file("../navbt/css-nav.css");

  elseif(
$_SERVER['QUERY_STRING'] == "htc")
    
highlight_file("hov-act.htc");

  elseif(
$_SERVER['QUERY_STRING'] == "nav_eng")
    
highlight_file("../navbt/nav_eng.php");

  elseif(
$_SERVER['QUERY_STRING'] == "css-nav_horz")
    
highlight_file("../navbt/css-nav_horz.php");

  elseif(
$_SERVER['QUERY_STRING'] == "css-nav2_horz")
    
highlight_file("../navbt/css-nav2_horz.php");


  print(
'</DIV>' . "\n\n<!-- \n");
}

?>


<H2 ALIGN=CENTER>Alternative navigation bars implemented<BR>
with CSS (Cascading Style Sheets)</H2>

<HR>

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

<P>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.

<P>It seems to work best in Opera&nbsp;7, almost as good in Mozilla
and Netscape&nbsp;7.

<P><B>New: </B> the popup buttons effect now works in MS&nbsp;Internet Explorer&nbsp;6.

<P><A HREF="11_css-navbar.php?this" TARGET="newTestWin"><B>11_css-navbar.php</B></A>
Click to see the code for this page (in a new window "newTestWin").

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

<HR>

<H3>1: </H3>

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

<P>
<PRE>&lt;LINK REL=stylesheet TYPE="text/css" HREF="../navbt/css-nav.css"&gt;
</PRE>


<P>This will include the stylesheet that creates the popup effect.

<P><A HREF="11_css-navbar.php?css-nav" TARGET="newTestWin"><B>css-nav.css</B></A>
Click to see the code in that file (in the new window "newTestWin").

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

<P><A HREF="11_css-navbar.php?htc" TARGET="newTestWin"><B>hov-act.htc</B></A>
Click to see the code in that file (in the new window "newTestWin").<P>


<HR>

<H3>2: </H3>

Then we have this php script:

<P><PRE>&lt;?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");
}
?&gt;
</PRE>

<P>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.

<P><A HREF="11_css-navbar.php?nav_eng" TARGET="newTestWin"><B>nav_eng.php</B></A>
Click to see the code in that file (in the new window "newTestWin").

<P>

<HR>

<H3>3: </H3>

Finally we have this php script:

<P>
<PRE>&lt;?php
if( !($_SERVER['QUERY_STRING']) )
{
  require("../navbt/css-nav_horz.php");
  print("\n\n&nbsp;\n\n");
  require("../navbt/css-nav2_horz.php");
?&gt;</PRE>

<P>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.

<P><A HREF="11_css-navbar.php?css-nav_horz" TARGET="newTestWin"><B>css-nav_horz.php</B></A>
Click to see the code in that file (in the new window "newTestWin")

<P><A HREF="11_css-navbar.php?css-nav2_horz" TARGET="newTestWin"><B>css-nav2_horz.php</B></A>
Click to see the code in that file (in the new window "newTestWin")



<?php

if( $_SERVER['QUERY_STRING'] )
{
  print(
"\n --> \n");
}

?>


<HR>

<FONT SIZE="-2">Page created 2003-03-22, last changed

<?php

print(date("Y-m-d H:i", getlastmod() ));

?>

</FONT>

<P>&copy;

<?php

print(date("Y", getlastmod() ));

?>

Bo Johansson

</BODY>
</HTML>

Page created 2003-03-22, last changed 2004-01-16 19:28

© 2004 Bo Johansson