0

I'm developing a small website with about 10-15 pages, made entirely with Bootstrap and i started to wonder, is there a simple way to make a dynamic menu (meaning i don't need to update it on every page if i add, remove or rename a page) for noobs like me?

So i found this post: jquery append external html file into my page

Which i tought would be perfect, so i made a separate menu file and imported the code. The problem is that, since there is a single menu file, i can't apply the class="active" property to the menu page/section i'm currently viewing. Is there a way to do that? Many thanks and sorry for the english, i'm not a native speaker.

Community
  • 1
  • 1
gorokizu
  • 2,538
  • 2
  • 20
  • 26
  • are you applying the `class="active"` after you have loaded the html content in? Because, once the content is added, it should behave like any normal page... – chrisbradbury Jan 14 '13 at 16:36
  • No, that's the problem, class="active" is in the menu file and i don't know if there's a way to add it in the single page (something like css overriding but with html) – gorokizu Jan 14 '13 at 16:41
  • if you have `class="active"` in the css on the page which is *loading* the html page, then the loaded content should follow that css... Unless I've got the wrong end of the stick!! – chrisbradbury Jan 14 '13 at 16:43
  • The css is in the appended code, not the one loading it. – gorokizu Jan 14 '13 at 16:46
  • do you have an example / the code? If there's css in the loading page, the loaded code will follow that css style. So if you move the css from the loaded page to the page doing the loading, it should work... – chrisbradbury Jan 14 '13 at 16:47
  • http://pastebin.com/h4uPRbgQ index.html http://pastebin.com/3XPGvHt0 menu.html, everything's a bit messed up, but i'm practicing – gorokizu Jan 14 '13 at 16:52
  • I don't see any reason why that shouldn't work... Is it live anywhere? – chrisbradbury Jan 14 '13 at 16:54
  • Not right now, i'm testing on a local machine. As said before, the menu loads correctly, it's just that, if i go in "Chi Siamo" the class="active" stays on home because it's saved in the menu file. – gorokizu Jan 14 '13 at 16:57
  • @WiFonzus I'm facing the same issue. have you solved this one yet, if so can you share your solution here. – afr0 Jan 24 '13 at 10:19

1 Answers1

1

If you are appending data to a page and then trying to do a jQuery rollover / mouseenter on it, you need to use a .live() function on it, so jQuery knows that the elements have been added:

$('.menuitem').live('mouseover',function(){
    //-- script here --//
});

Hope this helps!!

If you have access to PHP, it'll be easier to put the menu stuff in a .php file and then include it:

include("menu.php");

This means the menu will be added serverside (before the browser loads the page) and the jQuery will work just fine.

chrisbradbury
  • 327
  • 1
  • 5