PHP include drop down navigation

Question

I have a php document and am using include to include my drop down navigation. The navigation is an external html with external js and css elements.

Code is:

<div id="nagivation">
    <?php include ("navigation.html");?>
  </div>
  <!--end #navigation!-->

Unfortunately my drop down works great in it's html page, but once brought into my main page, none of the hovers work.

In my navigation.html, I have included:

<script type="text/javascript" src="js/ecmNavigation.js"></script>

<link href="css/ecmNavigation.css" rel="stylesheet" type="text/css" />
<link href="css/ECM_HelpFile.css" rel="stylesheet" type="text/css" />

in my template.php, I have included:

<link href="css/ECM_HelpFile.css" rel="stylesheet" type="text/css" />
<link href="css/ecmNavigation.css" rel="stylesheet" type="text/css" />

Any suggestions? I need to keep the navigation in a global document, but have not been able to use iframe or obkect in order to embed as the whole menu will not display as it is confined to the size of iframe and object. (the menu is huge)

Answer 1

This is more suited to Stack Overflow, but regardless...

Like bpeterson said, it sounds like a relative path problem with the CSS/JS. This is easily fixed by starting all URLs with a leading slash and putting the path from the site root. For example, if a file is at:

yoursite.com/css/ECM_HelpFile.css

You can include it with:

<link href="/css/ecmNavigation.css" rel="stylesheet" type="text/css" />

Secondly, it looks like you are including the CSS twice, so will want to remove those two lines from the template.php file.

Answer 2

If I was a betting man, I'd say that the links you provided inside your navigation html are trying to go relative to the URL of the page your're including it from. To test, change the links to absolute (http://www...) and see if they work...if they do, then you know what the problem is.

When I'm confused about includes, I'll load the page and view source. There, you can click on the links and see if they return the included file. You'd be surprised how many times they fail without error. I suspect that the second set of includes you did in the .php file are giving it the css it needs, but the javascript file it needs is what's causing the entire thing to fail. Clicking links in source will tell you for sure.

If the above tests works, you've got choices....leave it absolute, in which case you know where it's going to come from every time, no matter where you include from. Or, you could include the JS from the main file that does the include, which certainly could be appropriate depending on your structure and coding style. Finally, you could change over to .php on the nav file and dynamically condition the URL prior to including it.

Answer 3

I believe that you will need to rename your navigation file to navigation.php and then use

<div id="nagivation">
    <?php include("navigation.php");?>
  </div>

to get what you are looking for. Most scripting languages will not include raw .html files. Also make sure there is not space between 'include' and '()' otherwise it will not execute. S a simple rename with no changes to what is inside should fix this.

One last thing you should look at is including the .js file

<script type="text/javascript" src="js/ecmNavigation.js"></script>

after your css files instead of before. This should improve the download speed for your users.