Newbie. Looking for help with PHP & CSS multiple-level navigation systems.

[Cheesysocks]

Hi all.

 

I am trying to create a website for my new business. I can't afford to get someone in to do it for me so I am learning the basic skills I need to do it as I go.  The first time I looked at PHP was about four days ago!  Sorry if this is a common question but I have searched the forum, googled and looked in the bare cupboard of PHP tutorials on this forum.

 

In a usenet group, alt.html, I was offered a PHP script which created a menu from info stored in an array. This menu is kept in a seperate file on the server and included into any pages I create, making it easy to keep it updated if the site changes. The only place I will have to change the menu being in this script, not changing the menus by search and replace in dozens or more pages.

 

The script offered to me is at the end of this text. It works well and I publicly thank the author (Bootnic).  But, I have been trying to improve on it by adding a second level of menus. However, thanks to my newness to this coding world I can't decide on which is the best methodology to do it.

 

Obviously, the PHP script is only processed when the page is requested from the server. Hovering over a link does not call a new page, therefore, in order to have a second level of menus show when a user hovers over a first level menu item, it's the *browser* that has to do the work in showing it. This removes PHP itself from the agenda, at this stage.

 

Javascript would be one way I'm sure and there are loads of such systems available for use.  But I don't trust that all browserss will have JS running so I wish to rely on PHP, HTML and CSS.

 

The only way I can think of for a second ( or more?) level to work with these restrictions is for the menus for *ALL* levels to be created by the PHP script when the page is called, but the CSS properties of the unwanted lists be set such that they can't be seen. Maybe by absolute positioning, sending them off screen until a hover changes thier locations, or by setting thier colours to transparent or something, or maybe using Z indexs to hide them under the rest. Or something else?

 

I do not want to reinvent the wheel. I wonder if someone can help by explaining the most efficient methodology, and why it is. I'm happy to try and create my own scripts, I do not expect it to be handed to me on a plate, (unless you want to of course!) but I do not have enough knowledge and experience to get the best from this without some advice. If anyone would like to take the time to comment (nicely!) I would really apprecieate it.

 

This was supplied to me by 'Bootnic' from alt.html.

<ul class="menu">
<?php
  #menu array
  $menu = array('/index.php' => 'Home',
                '/law.php' => 'The Law',
                '/diy.php' => 'How to DIY',
                '/hire.php' => 'Hire Me',
                '/links.php' => 'Links',
                '/contact.php' => 'Contact');
  #current page
  $location = $_SERVER["SCRIPT_NAME"];
  #build menu items
  foreach ($menu as $key => $value)
  {
    echo "  <li>\n";
    #if current page write span
    if ($key === $location)
    {
      echo "    <span>$value</span>\n";
    }
    #else write a
    else
    {
      echo "    <a href=\"$key\">$value</a>\n";
    }
    echo "  </li>\n";
  }
?>
</ul>


[snip style]


Then in your page where you want to insert your menu...

<?php include('menu.php'); ?>

 

 

Thanks.

[wildteen88]

It can be done with Pure CSS however your menu may not work in all browsers. For creating a pure CSS menu have a read of this article.

 

However if you used javascript then your menu will be more cross browser compatiable.

[Cheesysocks]

Thanks for the reply and article.  This leads me to two questions.

 

1. How many users will fail because they have no javascript allowed compared to those who don't have browsers modern enough to use pure css menus?

 

2. How does this hang in with the original intention, of having a SINGLE menu file that gets included on the page html?