Side menu in Angular

Question

I need to make a side menu that as I click on an item it directs to the location of the page on which this item is located.

An example is this page of Ionic.

If anyone has an example to help I am very grateful.

Answer 1

What you want to do is an "internal link" using the element <a href="#id">vai para id</a> next to another element that has its identifier corresponding to the tag <a>, example, <p id="id">algum texto aqui</p>, when clicking the link will be directed to your identifier.

Below is an example.

.sidemenu,
.content {
  display: inline-block;
  vertical-align: top;
}
.sidemenu {
  border: 1px solid darkgray;
  width: 50px;
}
.sidemenu a {
  display: inline-block;
}
.content {
  height: 400px;
  width: 400px;
  overflow-y: scroll;
}

<nav class="sidemenu">
  <h4>Menu</h4>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>
<section class="content">
  <p id="home">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
  <p id="about">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
  <p id="contact">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</section>

See working on jsfiddle

W3C - Anchor

@Edit Implementation according to link indication in comment, adapting the "Scrolling Hyperlink" to Ionic Framework, The post can be accessed here

The following function has been defined in the controller:

$scope.toAnchor = function(anchor) {
    $location.hash(anchor);
    var handle = $ionicScrollDelegate.$getByHandle('content');
    handle.anchorScroll();
};

Where $localtion.has(anchor) defines url#Anchor.
var handle = $ionicScrollDelegate.$getByHandle('content'); Defines which view received the manipulation, which was defined in html (<ion-content delegate-handle="content">), to view all HTML access jsfiddle. handle.anchorScroll(); scrolling to the Anchor.

See also on jsfiddle

Reference: $ionicScrollDelegate
Reference: $Location

Answer 2

You can make your side menu using routes, for this I recommend using the howling.

With the uiRouter basically you can load your pages within a main template or within other pages through the ui-view.

Suppose you have your main template and three more pages. We can do it this way:

App.js

angular.module('sideBar', ["ui.router"]);

routeConfig.js

angular.module('sideBar').config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/BemVindo')
    $stateProvider

        .state('home', {
            url: "/BemVindo",
            views: {
                "main": {
                    controller: 'homeCtrl',
                    template: "<p>HOME</p>"
                }
            }
        })
        .state('cadastroCliente', {
            url: "/cadastroCliente",
            views: {
                "main": {
                    controller: 'cadastroClienteCtrl',
                    template: "<p>Cadastro Cliente</p>"
                }
            }
        })
        .state('chat', {
            url: "/chat",
            views: {
                "main": {
                    controller: 'chatCtrl',
                    template: "<p><b>chat</b></p>"
                }
            }
        })
});

Note that we have mapped the page url, e.g.: /BemVindo, /cadastroCliente, etc...

Now we have to load these pages somewhere.

index.html

 <body>
    <div ui-view="main"></div>
 </body>

But that’s it? Yes, notice that we set the ui-view with the value main this is the same value we define in our config route.

Now we can call the pages when we click on a menu.

<a href="#/cadastroCliente"></a>

Note that we are passing the same URL that we map.

Then just make a regular menu and call the URLs you mapped.

I created this example so you can understand better: http://jsfiddle.net/sinkz/RLQhh/3030/

NOTE: To load your pages instead of template you can use templateUrl. Or rather, instead of template="<p>Home</p> you would do that:

  templateUrl: "src/views/home.html"

Answer 3

You quoted Ionic, but you didn’t put the Ionic tag on the question. Assuming you are using Ionic, the best way is to use a sidemenu tarter:

ionic start myApp sidemenu

afterward

ionic serve

you can start from the standard code provided and increment the functionalities.