5

Eu preciso fazer um menu lateral que conforme eu clico em um item ele direciona para o local da pagina em que se encontra este item.

Um exemplo é esta pagina do ionic.

Se alguém tiver um exemplo para poder ajudar eu fico muito grato.

2

3 Respostas 3

5

Isso que você quer fazer é um "link interno", usando o elemento <a href="#id">vai para id</a> junto a outro elemento que possua seu identificador correspondente ao da tag <a>, exemplo, <p id="id">algum texto aqui</p>, ao clicar no link será direcionado para seu identificador.

Segue abaixo um exemplo.

.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>

Veja funcionando no jsfiddle

W3C - Anchor

@Edit Implementação segundo indicação do link em comentário, adaptando o "Scrolling Hyperlink" para Ionic Framework, O post pode ser acessado aqui

Foi definido no controller a seguinte função:

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

Onde $localtion.has(anchor) define url#anchor.
var handle = $ionicScrollDelegate.$getByHandle('content'); Define qual view recebera a manipulação, que foi definida no html (<ion-content delegate-handle="content">), para ver todo o HTML acesso o jsfiddle. handle.anchorScroll(); faz o scrolling para o anchor.

Veja também no jsfiddle

Referência: $ionicScrollDelegate
Referência: $location

8
  • Os href estão direcionando para a minha index
    – Matheus D
    Commented 23/11/2015 às 11:23
  • você ta usando rotas? Commented 23/11/2015 às 11:36
  • Sim! eu vi algo com anchorScroll... Mas não tenho nem ideia... Por isso qualquer ajuda é bem vinda.
    – Matheus D
    Commented 23/11/2015 às 11:58
  • 1
    O exemplo do @devgaspa funciona perfeitamente, mas vou te dar um exemplo com rotas. Commented 23/11/2015 às 12:07
  • Ta beleza, Agradeço!
    – Matheus D
    Commented 23/11/2015 às 12:19
2

Você pode fazer seu menu lateral usando rotas, pra isso recomendo utilizar o uiRouter.

Com o uiRouter basicamente você pode carregar suas páginas dentro de um template principal ou dentro de outras páginas através do ui-view.

Suponhamos que você tenha seu template principal e mais três páginas. Podemos fazer dessa forma:

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>"
                }
            }
        })
});

Repare que mapeamos a url das páginas, ex: /BemVindo, /cadastroCliente, etc..

Agora temos que carregar essas páginas em algum lugar.

index.html

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

Mas só isso? Sim, repare que setamos a ui-view com o valor main esse é o mesmo valor que definimos em nossa config de rotas.

Agora podemos chamar as páginas quando clicarmos em um menu.

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

Repare que estamos passando a mesma URL que mapeamos.

Depois é só fazer um menu normal e chamar as URLs que você mapeou.

Criei esse exemplo para que você possa entender melhor: http://jsfiddle.net/sinkz/RLQhh/3030/

OBS: Para carregar suas páginas no lugar de template você pode utilizar templateUrl. Ou sejá, ao invés de template="<p>Home</p> você faria isso:

  templateUrl: "src/views/home.html"
6
  • Sim, esse menu que direciona para outras paginas eu sei fazer, o que eu gostaria é um menu que conforme eu clico no itens ele me direciona para lugares na mesma pagina, bem parecido com o que o @devgaspa fez...
    – Matheus D
    Commented 23/11/2015 às 12:37
  • Aa sim, não entendi muito bem sua pergunta. Desculpe. Commented 23/11/2015 às 12:44
  • Acho que a solução dele funciona perfeitamente. Creio que esteja esquecendo de algo Commented 23/11/2015 às 12:45
  • Sim, vou dar mais uma conferida...
    – Matheus D
    Commented 23/11/2015 às 12:45
  • Beleza, confere ai Commented 23/11/2015 às 12:46
0

Você citou o Ionic, mas não colocou a tag Ionic na pergunta. Supondo que você está utilizando Ionic, o melhor caminho é usar um starter de sidemenu:

ionic start myApp sidemenu

depois

ionic serve

você pode partir do código padrão fornecido e incrementar as funcionalidades.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .