Question

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.

Answer 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.