Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, faz um tempo que estou sofrendo para tentar fazer um menu de navegação parecido com o do site do angular material (https://material.angularjs.org/latest/) e resolvi pedir a ajuda de vcs do forum pois não tive sucesso nas minhas tentativas.
Como eu posso fazer nesse estilo com submenus e sem botões ??
Valeu!
>
Você quer o efeito?
Posta o source que já fez.
Aquele é show() hide() + css transition
Quero poder montar um menu com sub-menu, igual o que tem no site, não postei meu código pq ta tão amador que acho que nem vale a pena! Mas segue o meu código com o menu usando button!
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="./components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="./css/material-icons.css">
</head>
<body ng-app="CarApp" layout="column">
<md-toolbar>
<h1>Angular Material Start</h1>
</md-toolbar>
<div class="container" layout="row" flex>
<md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp">
<md-list flex>
<md-list-item>
<md-button flex=100>
<md-icon >dashboard</md-icon>
Dashboard
</md-button>
</md-list-item>
</md-list>
<md-divider ></md-divider>
</md-sidenav>
<md-content id="content" flex>Content</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="./components/angular/angular.min.js"></script>
<script src="./components/angular-animate/angular-animate.min.js"></script>
<script src="./components/angular-aria/angular-aria.min.js"></script>
<script src="./components/angular-messages/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="./components/angular-material/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('CarApp', ['ngMaterial'])
.run(function(){
console.log('LOL');
});
</script>
</body>
</html>E ai, alguma sugestão!? rsrs!
Obrigado!
Joga no codepen.
Chamuska,
Não necessariamente você é obrigado a usar o <md-button> pra criar os itens da sidebar. Se você alterar, você vai fugir da documentação padrão do AngularJS, mas isso é um problema? Não.
Dentro da sua sidebar você pode declarar um <md-content> e seguido deles você pode estruturar normalmente como se fosse um HTML comum (sem Angular).Exemplo:
<md-content flex role="navigation">
<ul>
<li></li>
<li></li>
</ul>
</md-content>Com isso você pode acabar perdendo alguns efeitos que você possui (como da seta alternando, toggle e por ai vai).
Se você quiser manter os efeitos, você ainda vai precisar dos <md-link> dentro das <li>, com aquele bando de ng-class, ng-if, sectionmenu, e por ai vai.
Essa é a solução mais básica, mas ai vem a minha questão: **Porquê você quer substituir os <md-button> - sabendo que isso vai te dar mais trabalho e consumir mais tempo criando novo código?**
Você quer o efeito?
Posta o source que já fez.
Aquele é show() hide() + css transition