JQuery implémente le menu de la barre latérale

Cette fois, je vais vous proposer JQuery pour implémenter le menu de la barre latérale. Quelles sont les précautions pour que JQuery implémente le menu de la barre latérale. Voici un cas pratique, jetons un coup d'œil.

Le rendu est le suivant :

Aperçu en ligne Téléchargement du code source

Code html :

<p id="paper-back">
  <nav>
   <p class="close"></p>
   <a href="#">Home</a>
   <a href="#">About Us</a>
   <a href="#">Our Work</a>
   <a href="#">Contact</a>
  </nav>
 </p>
 <p id="paper-window">
  <p id="paper-front">
   <p class="hamburger"><span></span></p>
   <p id="container">
    <section>
     <p>点击左上角的按钮打开菜单</p>
     <p>适用浏览器：、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br>不支持IE及以下浏览器。</p>
     <p>
     <script src="/scripts/bc/_gg.js" type="text/javascript"></script></p>
    </section>
    <section></section>
   </p>
  </p>
 </p>

code js :

var paperMenu = {
   $window: $('#paper-window'),
   $paperFront: $('#paper-front'),
   $hamburger: $('.hamburger'),
   offset: ,
   pageHeight: $('#paper-front').outerHeight(),
   open: function () {
    this.$window.addClass('tilt');
    this.$hamburger.off('click');
    $('#container, .hamburger').on('click', this.close.bind(this));
    this.hamburgerFix(true);
    // console.log('opening...');
   },
   close: function () {
    this.$window.removeClass('tilt');
    $('#container, .hamburger').off('click');
    this.$hamburger.on('click', this.open.bind(this));
    this.hamburgerFix(false);
    // console.log('closing...');
   },
   updateTransformOrigin: function () {
    scrollTop = this.$window.scrollTop();
    equation = (scrollTop + this.offset) / this.pageHeight * ;
    this.$paperFront.css('transform-origin', 'center ' + equation + '%');
   },
   hamburgerFix: function (opening) {
    if (opening) {
     $('.hamburger').css({
      position: 'absolute',
      top: this.$window.scrollTop() + + 'px'
     });
    } else {
     setTimeout(function () {
      $('.hamburger').css({
       position: 'fixed',
       top: 'px'
      });
     }, );
    }
   },
   bindEvents: function () {
    this.$hamburger.on('click', this.open.bind(this));
    $('.close').on('click', this.close.bind(this));
    this.$window.on('scroll', this.updateTransformOrigin.bind(this));
   },
   init: function () {
    this.bindEvents();
    this.updateTransformOrigin();
   }
  };
  paperMenu.init();

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Implémentation JQuery de la collection d'effets spéciaux de boutons de texte dans les formulaires

Explication détaillée des étapes à mettre en œuvre Table jQuery avec cases à cocher

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!