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