Biblioteca funciona apenas com a primeira transição
Olá, eu estava desenvolvendo um projeto para a escola e queria fazer meio que um efeito de transição entre as páginas para quando forem selecionados os conteúdos, encontrei uma biblioteca que fazia umas transições legais e a baixei. Entretanto fui fazer algumas adaptações para o que eu queria, onde quando saísse a primeira, eu selecionasse o tipo de dado da segunda, mas, eu não consigo fazer isso, o menu não aparece.
Segue a biblioteca e o meu código
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Collection of Page Transitions with CSS Animations" />
<meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="transition/css/default.css" />
<link rel="stylesheet" type="text/css" href="transition/css/multilevelmenu.css" />
<link rel="stylesheet" type="text/css" href="transition/css/component.css" />
<link rel="stylesheet" type="text/css" href="transition/css/animations.css" />
<script src="transition/js/modernizr.custom.js"></script>
</head>
<body>
<!-- /triggers -->
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><h1>Gerenciar</h1>
<ul class="dl-menu">
<li data-animation="25"><a>aaaa</a></li>
</ul>
<div class="pt-triggers">
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Selecione o comando</button>
<ul class="dl-menu">
<li data-animation="36">
<a href="#">Listar</a>
</li>
<li data-animation="36">
<a href="#">Alterar</a>
</li>
<li data-animation="36">
<a href="#">Deletar</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pt-page pt-page-2"><h1><span>Selecione</span></h1>
<div class="pt-triggers ">
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Selecione tipo de dado</button>
<ul class="dl-menu">
<li data-animation="36">
<a href="#">Fornecedor</a>
</li>
<li data-animation="36">
<a href="#">Produto</a>
</li>
<li data-animation="36">
<a href="#">CLiente</a>
</li>
<li data-animation="36">
<a href="#">Administrador</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
<div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
<div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
<div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
</div>
<div class="pt-message">
<p>Your browser does not support CSS animations.</p>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="transition/js/jquery.dlmenu.js"></script>
<script src="transition/js/pagetransitions.js"></script>
</body>
</html>Discussão (0)
Carregando comentários...