Angular Side Menu

Navigation
5

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

An example is this ionic page.

If someone has an example to help, I'm very grateful.

    
asked by anonymous 23.11.2015 / 11:28

3 answers

5

What you want to do is an "inner 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> , 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 at jsfiddle

W3C - Anchor

  

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

The following function was defined in the controller: 

$scope.toAnchor = function(anchor) {
    $location.hash(anchor);
    var handle = $ionicScrollDelegate.$getByHandle('content');
    handle.anchorScroll();
};
Defines which view received the manipulation, which was set in html ( $localtion.has(anchor) ), to see all the HTML access to it. jsfiddle . var handle = $ionicScrollDelegate.$getByHandle('content'); scrolls to anchor.

  

See also jsfiddle

Reference: $ ionicScrollDelegate
Reference: $ location

    
23.11.2015 / 11:59
2

You can make your side menu using routes, so I recommend using uiRouter .

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

Let's say 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 map the url of pages, eg /BemVindo , /cadastroCliente , etc.

Now we have to load those pages somewhere.

index.html 

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

But that's it? Yes, notice that we set the% w / w of% to the value% w / w% this is the same value we set in our% w /% of routes.

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

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

Notice that we are passing the same URL that we mapped.

Then just make a normal menu and call the ui-view you have mapped.

I've created this example so you can better understand: link

NOTE: To load your pages instead of main you can use config . Or, instead of URLs you would do this: 

  templateUrl: "src/views/home.html"
    
23.11.2015 / 13:23
0

You quoted Ionic, but did not put the Ionic tag in the question. Assuming you're using Ionic, the best way is to use a sidemenu starter:

ionic start myApp sidemenu

after

ionic serve

You can start from the supplied default code and increase the functionality.

    
26.11.2015 / 17:12
Multiple events in JQuery selector Algorithm with structure PARA and SE