angular-snap slide out menu

Question

i am newbie to angular snap. I have the following requirement:

Slide out menu left side
should contain sub menus
Sub menus also should be collapsible.

Does angular snap will provide all these features?

I started working on example with angular snap slide out menu. How do we give two different menus in the drawer and when the user clicks on menu1, main div should display page1 and when user clicks on menu2, main div should display page2.

share your code and provide a fully working example please – apairet Aug 27 '14 at 22:55 — apairet, Aug 27 '14 at 22:55

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Two small points:

Angular.js is a framework for building single page applications.
Snap.js is a library that provides a "shelf" like menu interface.

Angular Snap is simply an integration of these two components. You aren't limited from using normal JavaScript to show and hide elements on a page based on a users's click.

Rather than tell you how you should get Angular Snap specifically to do this, here's a way to implement a dropdown hide/show action in Angular, which is absolutely compatible with your Snap.js app instance.

Angular.js Dropdown

function dropdown($scope) {

    $scope.subitems = [
        {
            title: 'Menu item one',
            url: '#'
        },
        {
            title: 'Menu item two',
            url: '#'
        },
        {
            title: 'Menu item three',
            url: '#'
        },
        {
            title: 'Menu item four',
            url: '#'
        }
    ];
}


<nav class="dropdown-wrap" ng-app ng-controller="dropdown">
    <a href="#" class="dropdown-title" ng-click="showDetails = ! showDetails">Dropdown Menu</a>
    <ul ng-repeat="subitem in subitems" ng-show="showDetails">
        <li>
            <a href="{{subitem.url}}">{{subitem.title}}</a>
        </li>
    </ul>
</nav>

To my earlier point, you shouldn't necessarily consider integrating this an end-all be all solution to your issue. There are probably simpler solutions in a few lines of JavaScript, and unless your menu items need to be dynamic, I wonder if it's isn't just producing extra overhead and debugging to have Angular produce markup that could be hard-coded.

Either way, I would take into account all of your requirements and go from there. Don't consider these libraries a limitation--there's no part of either of them that isn't JavaScript, so possibly consider other out of the box or easy to implement solutions that use simple tools that already exist in the browser.

EDIT: Borrowed some code from here

Thank you very much pizzasynthesis!!! I really appreciate it. Good information. I will try implementing using angularjs and java script. — user1457957, Aug 28 '14 at 05:34

angular-snap slide out menu

1 Answers1