0

I have been working on a site for the past 5 years and recently added a mega menu to the development pages (eg. Sandbox pages)

The mega menu that is being used can be seen here: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

The menu works superb with the template pages, when the actual urls are used, and when the clean urls are used with no variables. When variables are used the CSS/CSS3 doesn't seem to load.

I also tried this with the menu as two separate files (one for within the tags and one for the tags. It made no impact on this particular situation.

The only abnormal alterations that have been done is that the menu has been made into a php file and is added to the pages of the sandbox using "include".

I have tried to figure this out, but am at a loss. By my deduction it is something with the .htaccess mask when adding variables and the menu that are conflicting, but I am not sure where the conflict it. The "mask" for the clean urls has been in place for 4 years and this is the first time that I have had any level of conflict like this, so that leaves me with the issue of the menu.

If anyone prefer me to put up sample code I can do that, but I didn't think that it was needed as this seems to be centered on the menu itself, but is visible in the link above.

To everyone that reads this, thank you for the time and the energy in helping with this.

Draven Taylor
  • 3
  • 3
  • Here is the main sandbox page so that everyone can see how the mega menu normally works on the site. http://www.musiceternal.com/index_06072013.php – Draven Taylor Aug 20 '13 at 03:13
  • I tried the original version of the menu with the same scene and have the exact same problem. – Draven Taylor Aug 20 '13 at 06:44
  • I am starting to see that this is a common problem with the mega menus and using php with a mask. Any help is appreciated. I am looking for a different approach to this problem in addition to any help I can get here. If I figure it out I will post it on here. – Draven Taylor Aug 20 '13 at 17:54
  • The odd part in this is that it appears the CSS isn't generating the menu, but there are no warnings or errors. It only does this on the pages that have variables on the clean URLS. I have verified everything with the menu. It works fine in all conditions except for this. If it can help I can post part of the .htaccess (edited paths of course). When I look for any support on this in the search engines the issues are always addressed with a CMS, not for those that are using code only. – Draven Taylor Aug 20 '13 at 19:50
  • Here is where I am at now. I know that I can used...<~Shudder~> Iframe and Object to have it load, but am restricted to the size of the dimensions of either (but the menus load). When I use php's include the graphics crash. I will see if I can get it added by SSI, but does anyone have another idea that could help me in this direction. I have already gone through a massive list of mega menus to see if it is a design issue of this one menu, but there seems to be a base conflict with my mask and the html5/css. I am sure there is something that I am missing since it is only the pages w/ variables. – Draven Taylor Aug 21 '13 at 00:06

1 Answers1

0

I figured out the problem and the solution. The solution is actually pretty simple.

When using a mask through .htaccess and also html5/CSS3 there is one standard that is being enforced by the code. I am guilty of being lazy when I put js, css, and imag paths in and do them similar to includes. From what I have uncovered you can't do them the same. (With includes I never start the path with a "/", but with cs, js, and images you have to start the path with a "/" when you have a htsccess mask in place. That is generally the rule, and CSS3/HTML have enforced this rule.

I added a / to all css and images and everything works fine.

For those of you that prefer literal code I here are 2 examples so that you can see what I mean:

Works: img src="/img/ME3.png" style="border="0" alt="" Broke: img src="img/ME3.png" style="border="0" alt=""

Works: href="/megamenu/menu.css" type="text/css" media="screen" Broke: href="megamenu/menu.css" type="text/css" media="screen"

Personally, I feel incredibly stupid for not catching this, but I did learn something new in the process. I guess that is where that saying "there are no stupid questions" applies.

Draven Taylor
  • 3
  • 3