CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
MatroxDev
MatroxDev

Reputation: 49

JQuery Mobile Menu static on page change

I'm trying to fix the top menu on page change. Example:

<div data-role="page" id="page1">
    //page 1 contents
</div>
<div data-role="page" id="page2">
    //page 2 contents
</div>

and my top menu

<div id="top-menu">
</div>

Is there any way to not make the menù code reappear on each page? I want my menu div to be collective for all pages.

Any ideas?

Thanks, Andrea

Upvotes: 0

Views: 87

Answers (1)

Sga
Sga

Reputation: 3658

No, the concept of "pages" does not allow for static content to be shared among them.

But I see at least two solutions:

  • use only one page containing your menu, and many hidden div to encapsulate your content (like <div data-role="content" id="page1" class="hidden">). Using your menu navigation, you just have to show/hide the content you need

  • use some JavaScript trickery:

    $(document).on("pagebeforeshow", "[id^=page]", function(event)
{
    // "move" the menu to the content of the current page
    // (you have to add IDs to each page like 'page1content')
    $("#top-menu").prependTo("#" + this.id + "content");
});

Upvotes: 1

Related Questions