Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

is it possible to split the template Sliding Menu?



  • ive been trying to split the download template to help us start, in the following,

    -menu.html ( which should have the slide menu attributes)
    -menu.css ( the menu style sheet)

    -index.html (index file when app loads)
    -page1.html

    i get various problems, the menu will show but it wont load other pages vice versa, the style sheet isnt recognise, ect. im hoping that someone who can easily do this will help me.
    thanks
    https://onsen.io/project-templates/gen/onsenui-sliding-menu.zip


  • Onsen UI

    @Puzzledking Have you remove ons-template element? It’s not necessary when you use different files. Use the filename instead of ons-template's id to load it in the menu.

    About the css, just copy the content of style element (without the tag itself) in another file and write <link rel="stylesheet" href="path/to/menu.css" /> in your index.html.



  • @Fran-Diox said:

    <link rel=“stylesheet” href=“path/to/menu.css” />

    hi,

    thanks for your message, this is what i had done, i removed <ons-template id="menu.html"> from menu.html added a link to style sheet the nackground colour doesnt want to appear. also when you slide or open toggle menu initially, its replaced by blackness, but soon doesnt appear again.

    i also moved page1 and page2 away from index file giving its own file, starting/ending with
    <ons-page> ....... </ons-page> however theres a huge lag time and also the screen goes black for a split second everytime i change page

    i have left the

     <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"  var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
        </ons-sliding-menu>
    

    still in the index file by itself