• Tutoriais

    • Menu de Páginas sem Links com Conteúdo Oculto

    setembro 17, 2016 Roberta

    Navegando pelo Codrops, encontrei alguns tutoriais interessantes que mostram como ocultar um conteúdo, dentre eles, gostei de um chamado Modal Windows Effects, que traz várias maneiras de se criar efeitos para que um conteúdo oculto apareça na tela de diversas formas quando se clica em um botão.
    Isso fica legal para quem quer usar no blog como menu, sem necessidade de links ou de criar páginas, tudo feito à mão mesmo. E é esse menu que personalizei para este post
    Você só precisa colar o código abaixo em um novo gadget HTML/JavaScript (em Layout do seu blog, acho melhor colar abaixo do cabeçalho).

     <style>
@import 'https://fonts.googleapis.com/css?family=Delius';
/*menu*/
button {
 border: none;
 padding: 0.6em 1.2em;/*tamanho*/
 background: #fdacbf;
 color: #fff;
 font-family: 'Delius', cursive;
 font-size: 15px;
 letter-spacing: 1px;
 display: inline-block;
 margin: 3px 2px;/*distancias*/
 border-radius: 5px;
}
button:hover {
 background: #fbc0ce url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7stQkKAWoB-IyozDVDePySzCYvcQT8xaWmeOjTm6A7MJ461X0U1e34hRAXsgE-0oZIEC7C99mJ7X3nKYikIjYKl4a3sm0DsOgeBVSbpPaBqb0D4sL03A4RC_XKgkeAE25zon9QSSNhwc/s1600/8.gif') no-repeat left;
 border-radius: 3px;
 cursor: pointer;
}
.pag {
    padding: 0px 50px 0px 50px;
 position: absolute;
 top: -185px;
 left: 50%;
 width: 100%;
 max-width: 1000px;
 min-width: 320px;
 height: auto;
 z-index: 2000;
 visibility: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
}

.pag-show {
 visibility: visible;
}

.pag-overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 visibility: hidden;
 top: 0;
 left: 0;
 z-index: 1000;
 opacity: 0;
 background: #fff;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.pag-show ~ .pag-overlay {
 opacity: 1;
 visibility: visible;
}

/* Conteudo geral */
.conteudo {
 color: #ccc;
 background: #fff;
 position: relative;
 margin: 0 auto;
 font-family: 'Delius', cursive;
 font-size: 14px;
 text-align: justify;
}

.conteudo h3 {
 margin: 0;
 padding: 0.4em;
 text-align: center;
 font-size: 2.4em;
 font-weight: 300;
 opacity: 0.8;
 color: #ccc;
}

.conteudo > div {
 padding: 15px 40px 30px;
 margin: 0;
 font-weight: 300;
 font-size: 1.15em;
}

.conteudo > div p {
 margin: 0;
 padding: 10px 0;
}

.conteudo > div ul {
 margin: 0;
 padding: 0 0 30px 20px;
}

.conteudo > div ul li {
 padding: 5px 0;
}

.conteudo button {
 display: block;
 margin: 0 auto;
 font-size: 0.8em;
}


/* Conteudo pagina */
.conteudo-pag .conteudo {
 -webkit-transform: scale(0.8);
 -moz-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.pag-show.conteudo-pag ~ .pag-overlay {
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKDb9W6pTSoCoPfc9fjGcuYqvg6GkZEg1XCT0X8AyoQfmycOtYxqARPPyBeuBhvb1CIjj7EJ9ptznc1-M0c6EXhsDGyVo_HPZkMUmmtE7vBnOfTuEYtMSAazQDzZekL-yuhC1YLLP4eU/s1600/bg.jpg') repeat;
} 

.conteudo-pag .conteudo h3,
.conteudo-pag .conteudo {
 background: rgba(255, 255, 255);
}

.pag-show.conteudo-pag .conteudo {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

</style>




<center>
<button class="menu-pag" data-modal="pag-1">About Me</button> <button class="menu-pag" data-modal="pag-2">O Blog</button> <button class="menu-pag" data-modal="pag-3">F.A.Q</button> <button class="menu-pag" data-modal="pag-4">Outros</button>
</center>  
  <div class="pag conteudo-pag" id="pag-1">
   <div class="conteudo">
    <h3>Quem sou eu?</h3>
    <div>
             <h2>Sobre mim...</h2>
        <center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoFgRMrSuzTh5KRu3gnmxcIHzbPSpsleiiD2bmj6RUxmv4F1cB7AKFK08WLwhuybIXrtalrRY7CXRZDspld6i4T46mQ_1wp0iqi86rmeyaHKmr68w5zPIBHvpZ0B1tUWE6plVqmzF6aP8/s1600/7.png'/></center><br/>     
        <p>Carrot cake halvah sweet roll oat cake sweet roll pudding. Cupcake chupa chups sugar plum topping lemon drops biscuit sesame snaps cotton candy. Cotton candy oat cake candy canes marzipan cookie danish soufflé bear claw ice cream. Tart gingerbread jujubes. Topping sugar plum cotton candy. Wafer ice cream chocolate cake chocolate bar danish sugar plum gummi bears. Cake jelly beans dessert chocolate bar chocolate cake. Sweet sesame snaps pudding icing halvah cake caramels. Dessert toffee gummi bears pie chupa chups cake muffin liquorice. Cake cookie candy canes jelly jelly beans jujubes. Macaroon sesame snaps pastry gummi bears candy pastry tiramisu cake. Tootsie roll pastry icing candy canes cake macaroon sugar plum. Biscuit chupa chups sugar plum jelly beans pie.
Cheesecake icing toffee caramels gummies sugar plum dragée chocolate cake. Cupcake lemon drops croissant.</p>

     <button class="fechou">Ok!</button>
    </div>
   </div>
  </div>
  
  <div class="pag conteudo-pag" id="pag-2">
   <div class="conteudo">
    <h3>O Blog</h3>
    <div>
             <h2>Sobre o blog...</h2>
        <p>Carrot cake halvah sweet roll oat cake sweet roll pudding. Cupcake chupa chups sugar plum topping lemon drops biscuit sesame snaps cotton candy. Cotton candy oat cake candy canes marzipan cookie danish soufflé bear claw ice cream. Tart gingerbread jujubes. Topping sugar plum cotton candy. Wafer ice cream chocolate cake chocolate bar danish sugar plum gummi bears. Cake jelly beans dessert chocolate bar chocolate cake. Sweet sesame snaps pudding icing halvah cake caramels. Dessert toffee gummi bears pie chupa chups cake muffin liquorice. Cake cookie candy canes jelly jelly beans jujubes. Macaroon sesame snaps pastry gummi bears candy pastry tiramisu cake. Tootsie roll pastry icing candy canes cake macaroon sugar plum. Biscuit chupa chups sugar plum jelly beans pie.
Cheesecake icing toffee caramels gummies sugar plum dragée chocolate cake. Cupcake lemon drops croissant.</p>
<p>Jujubes jelly-o pastry donut bear claw. Chocolate cake bear claw tiramisu sesame snaps cake cake. Jelly-o oat cake chocolate biscuit marshmallow. Jelly beans liquorice gummies pastry chocolate bar. Biscuit wafer cookie fruitcake jujubes jujubes. Cupcake dragée chocolate bar cookie cupcake. Sugar plum liquorice cotton candy chocolate bar chocolate bar. Macaroon pie lemon drops sweet roll liquorice liquorice cake topping chupa chups. Ice cream sesame snaps danish tart. Ice cream marzipan pastry apple pie bonbon jelly-o dragée. Gummies tootsie roll cake bonbon cheesecake oat cake jelly-o. Jelly gummies cake tart pie bear claw bonbon.
Macaroon pie apple pie chocolate cake cheesecake caramels cupcake. Sweet roll cake cotton candy jujubes.</p>
<p>Sweet roll chocolate cake tiramisu lollipop chocolate cake bonbon chocolate marzipan carrot cake. Jujubes danish cake gummies. Topping cookie pastry fruitcake dessert gummies. Gummies chupa chups liquorice soufflé. Brownie brownie lemon drops. Jujubes gummies halvah chocolate cake oat cake gingerbread. Chupa chups cupcake danish liquorice toffee jujubes bonbon cotton candy. Dragée biscuit donut jujubes. Jelly-o marzipan wafer lemon drops cheesecake macaroon biscuit toffee. Icing apple pie sweet cake donut macaroon biscuit ice cream soufflé. Liquorice sweet pie liquorice bear claw jelly beans toffee pudding dragée.
Jujubes candy canes macaroon cake jelly pudding. Cake chupa chups lollipop chocolate gingerbread ice cream sweet sesame snaps candy canes.</p>

     <button class="fechou">Ok!</button>
    </div>
   </div>
  </div>
  
  
  <div class="pag conteudo-pag" id="pag-3">
   <div class="conteudo">
    <h3>Perguntas e Respostas</h3>
    <div>
             <h2>Saiba que...</h2>
<p>Carrot cake halvah sweet roll oat cake sweet roll pudding. Cupcake chupa chups sugar plum topping lemon drops biscuit sesame snaps cotton candy. Cotton candy oat cake candy canes marzipan cookie danish soufflé bear claw ice cream. Tart gingerbread jujubes. Topping sugar plum cotton candy. Wafer ice cream chocolate cake chocolate bar danish sugar plum gummi bears. Cake jelly beans dessert chocolate bar chocolate cake. Sweet sesame snaps pudding icing halvah cake caramels. Dessert toffee gummi bears pie chupa chups cake muffin liquorice. Cake cookie candy canes jelly jelly beans jujubes. Macaroon sesame snaps pastry gummi bears candy pastry tiramisu cake. Tootsie roll pastry icing candy canes cake macaroon sugar plum. Biscuit chupa chups sugar plum jelly beans pie.
Cheesecake icing toffee caramels gummies sugar plum dragée chocolate cake. Cupcake lemon drops croissant.</p>
<p>Jujubes jelly-o pastry donut bear claw. Chocolate cake bear claw tiramisu sesame snaps cake cake. Jelly-o oat cake chocolate biscuit marshmallow. Jelly beans liquorice gummies pastry chocolate bar. Biscuit wafer cookie fruitcake jujubes jujubes. Cupcake dragée chocolate bar cookie cupcake. Sugar plum liquorice cotton candy chocolate bar chocolate bar. Macaroon pie lemon drops sweet roll liquorice liquorice cake topping chupa chups. Ice cream sesame snaps danish tart. Ice cream marzipan pastry apple pie bonbon jelly-o dragée. Gummies tootsie roll cake bonbon cheesecake oat cake jelly-o. Jelly gummies cake tart pie bear claw bonbon.
Macaroon pie apple pie chocolate cake cheesecake caramels cupcake. Sweet roll cake cotton candy jujubes.</p>
<p>Sweet roll chocolate cake tiramisu lollipop chocolate cake bonbon chocolate marzipan carrot cake. Jujubes danish cake gummies. Topping cookie pastry fruitcake dessert gummies. Gummies chupa chups liquorice soufflé. Brownie brownie lemon drops. Jujubes gummies halvah chocolate cake oat cake gingerbread. Chupa chups cupcake danish liquorice toffee jujubes bonbon cotton candy. Dragée biscuit donut jujubes. Jelly-o marzipan wafer lemon drops cheesecake macaroon biscuit toffee. Icing apple pie sweet cake donut macaroon biscuit ice cream soufflé. Liquorice sweet pie liquorice bear claw jelly beans toffee pudding dragée.
Jujubes candy canes macaroon cake jelly pudding. Cake chupa chups lollipop chocolate gingerbread ice cream sweet sesame snaps candy canes.</p>

     <button class="fechou">Ok!</button>
    </div>
   </div>
  </div>
  
  <div class="pag conteudo-pag" id="pag-4">
   <div class="conteudo">
    <h3>Outros</h3>
    <div>
             <h2>Blablabla</h2>
<p>Carrot cake halvah sweet roll oat cake sweet roll pudding. Cupcake chupa chups sugar plum topping lemon drops biscuit sesame snaps cotton candy. Cotton candy oat cake candy canes marzipan cookie danish soufflé bear claw ice cream. Tart gingerbread jujubes. Topping sugar plum cotton candy. Wafer ice cream chocolate cake chocolate bar danish sugar plum gummi bears. Cake jelly beans dessert chocolate bar chocolate cake. Sweet sesame snaps pudding icing halvah cake caramels. Dessert toffee gummi bears pie chupa chups cake muffin liquorice. Cake cookie candy canes jelly jelly beans jujubes. Macaroon sesame snaps pastry gummi bears candy pastry tiramisu cake. Tootsie roll pastry icing candy canes cake macaroon sugar plum. Biscuit chupa chups sugar plum jelly beans pie.
Cheesecake icing toffee caramels gummies sugar plum dragée chocolate cake. Cupcake lemon drops croissant.</p>
<p>Jujubes jelly-o pastry donut bear claw. Chocolate cake bear claw tiramisu sesame snaps cake cake. Jelly-o oat cake chocolate biscuit marshmallow. Jelly beans liquorice gummies pastry chocolate bar. Biscuit wafer cookie fruitcake jujubes jujubes. Cupcake dragée chocolate bar cookie cupcake. Sugar plum liquorice cotton candy chocolate bar chocolate bar. Macaroon pie lemon drops sweet roll liquorice liquorice cake topping chupa chups. Ice cream sesame snaps danish tart. Ice cream marzipan pastry apple pie bonbon jelly-o dragée. Gummies tootsie roll cake bonbon cheesecake oat cake jelly-o. Jelly gummies cake tart pie bear claw bonbon.
Macaroon pie apple pie chocolate cake cheesecake caramels cupcake. Sweet roll cake cotton candy jujubes.</p>
<p>Sweet roll chocolate cake tiramisu lollipop chocolate cake bonbon chocolate marzipan carrot cake. Jujubes danish cake gummies. Topping cookie pastry fruitcake dessert gummies. Gummies chupa chups liquorice soufflé. Brownie brownie lemon drops. Jujubes gummies halvah chocolate cake oat cake gingerbread. Chupa chups cupcake danish liquorice toffee jujubes bonbon cotton candy. Dragée biscuit donut jujubes. Jelly-o marzipan wafer lemon drops cheesecake macaroon biscuit toffee. Icing apple pie sweet cake donut macaroon biscuit ice cream soufflé. Liquorice sweet pie liquorice bear claw jelly beans toffee pudding dragée.
Jujubes candy canes macaroon cake jelly pudding. Cake chupa chups lollipop chocolate gingerbread ice cream sweet sesame snaps candy canes.</p>

     <button class="fechou">Ok!</button>
    </div>
   </div>
  </div>
<div class="pag-overlay"></div>
<script>
/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\s+)" + className + "(\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );
</script>
<script>
/**
 * modalEffects.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var ModalEffects = (function() {

 function init() {

  var overlay = document.querySelector( '.pag-overlay' );

  [].slice.call( document.querySelectorAll( '.menu-pag' ) ).forEach( function( el, i ) {

   var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
    close = modal.querySelector( '.fechou' );

   function removeModal( hasPerspective ) {
    classie.remove( modal, 'pag-show' );

    if( hasPerspective ) {
     classie.remove( document.documentElement, 'pag' );
    }
   }

   function removeModalHandler() {
    removeModal( classie.has( el, 'md-setperspective' ) ); 
   }

   el.addEventListener( 'click', function( ev ) {
    classie.add( modal, 'pag-show' );
    overlay.removeEventListener( 'click', removeModalHandler );
    overlay.addEventListener( 'click', removeModalHandler );

    if( classie.has( el, 'md-setperspective' ) ) {
     setTimeout( function() {
      classie.add( document.documentElement, 'pag' );
     }, 25 );
    }
   });

   close.addEventListener( 'click', function( ev ) {
    ev.stopPropagation();
    removeModalHandler();
   });

  } );

 }

 init();

})();
</script>

    Entendendo o básico do código:
    - Onde está ...8.gif (fonte: decorake), é o coração que aparece quando o mouse está sobre o menu.
    - padding: 0px 50px 0px 50px... se refere ao 'tamanho' do conteúdo dentro da página. Quando você editar os textos de cada página, talvez tenha que alterar esse valor para que a aparência da página fique melhor, sem espaços desnecessários. Quando eu editei o código fora do Blogger, usei um valor de 800px 50px 0px 50px para ficar bonitinho (mas eu não tinha inserido em um template).
    - top: -185px; e left: 50%; são para posicionar com relação ao topo e à esquerda.
    - Mude os textos About me, O Blog, FAQ, Outros, e os que estão nas páginas (entre <p> e </p> ou <h3></h3> ou <h2></h2>) para o que quiser escrever. Pode inserir imagens (como a ...7.png (imagem do weheartit) que está no código, substitua por sua foto de perfil), códigos htmls, o que você preferir.
    - Se quiser inserir imagens nos botões de menu, deixe algo como: <button class="menu-pag" data-modal="pag-1"><img src='URL-DA-IMAGEM'/></button>
    - Ou você pode colocar backgrounds nos botões (em button), tipo: background: url('URL-DA-IMAGEM');
    - Entre um botão e outro do menu, se inserir um </br>, pode usá-lo na vertical: <button class="menu-pag" data-modal="pag-1">About Me</button><br/>... mas acho que fica melhor usar na horizontal...
    - E para trocar o background de corações, substitua a imagem ...bg.jpg do código.
    Resultado:

    Imagem de abertura do post: Weheartit.



    Talvez vc goste:

    Postar um comentário

    0 Comentários

    Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

    Apenas peço que:
    - Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
    - Use um vocabulário livre para todas as idades;
    - Não ofenda ninguém em hipótese alguma.

    Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

    Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
    Facebook - Twitter - Deviantart

    © Copyright , Reino Kawaii. All rights Reserved. | ThemeDaddy Best Blogger Themes

    up