jQuery mobile navigation disappears with Sub level sites

Hello

I have a problem with navigation that I try to solve for several days and which I do not understand.

I would like a Responsive drop down menu, which changes at 768 or 800 pixels to mobile. So far everything functions. Only, as soon as I open a subsite, the problems begin and the sub level disappear.

I tested several attempts with different Navigationen and the result am always the same. I tested the following Navigations.

http://cssmenumaker.com/menu/responsive-flat-menu
http://jasonweaver.name/lab/flexiblenavigation/
http://codeb.it/resmenu/


http://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html

The problem emerges, as soon as I open a sub level site.

Example:

Project

  • Project A (Sub level)

The following errors emerge:

Navigation disappears completely.
Navigation Sub level disappears
Menu goes again into Desktop mode and Sub level disappears
Menu shows only menu Button (more Hamburg or Home)

After I tried four different menus and always another error emerges, I do not believe any longer in the fact that it can be because of the navigations.

For testing I removed all other css files and used only the data of the menu.

Any idea what’s going on?

Thanks.

What does your PHP code look like that generates the menu you are using?

Its the basic menu.php code from Starterkit.

All i do is to change the css class from the “nav” and the first “ul” to what needed by the navigation script.
I tried also to change the “nav” to “div”.
Sometime i have to instert a menu button via “a” or "div"
Nothing special.

I go straight the way the navi tutorials told. Also i testet the same with the index.html demos from the menu downloads and i compared it with others online.

But then it can basically only be a CSS issue, right? Have you checked if the navigation links are there in the HTML source of the subpages?

How do you integrate the script? Could you post your code? Things get easier if you use the js() helper

First, i thought also this “must” be the the problem, or it’s in the js script. “But”, after trying out 4 different types of navigation, and having always the same issue, i dont believe it anymore.

Rendered code is alway good, but the navigations wont work after clicking at a sublevel page. If page is loaded, problem happens. If i look at rendered code, all is fine, but site wont show the navi as if i loaded the site fresh from root.

I can resize, navi goes to mobile menu,all is fine. I can click at first level sites, all is fine, i can open navi and navigate, but if i open a second level page, problem comes.

In all four different navigations same problem???

Sometimes i think its like a cache problem, with predendered navi, updated content and js script problem.

It’s crazy.

If it works on the first level but not on the second, the link to the script is probably not correct for the sublevel pages. Please post the code how you integrate your script or try this:

<?= js('assets/js/your_script_name'); ?>

I inserted the script hardcoded into the footer, tested header also. Could this be the problem?

<script type="text/javascript" src="http://code.jquery.com/jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="assets/xxx/script.js"></script>

The first one is ok, the second one won’t work on subpages, that why I said, use the helper, it always generates the right link, no matter how deep you are nested. Or use a relative link. You should be able to see this in your dev. console, the link to the script file will not be correct.

The code you need would be this:

<script type="text/javascript" src="http://code.jquery.com/jquery-x.x.x.min.js"></script>
<?php echo js('assets/xxx/script.js') ?>

Oh, and putting it in the footer makes perfect sense.

hm. is it not true, jquery likes it before the closing body tag?

Yes, exactly, before the closing body tag.

It is working.

Can you hear me crying?

Thank you all for the great and fast help. You saved my day.

3 Likes