jQuery plugin to implement stacked menu

A jQuery plugin every day - stacked menu, for your reference, the specific content is as follows

Stacked Menu

A multi-page special effect

The effect is as follows

Code section

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Stacked Menu</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   * {
    margin: 0px;
    padding: 0px;
   }

   #boxes {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: lightgray;
   }

   .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-left: 70px;
    font-weight: bold;
    color: white;
    transition: all 0.5s linear;
   }

   .box1 {
    background-color: #1abc9c;
    z-index: 1;
   }

   .box2 {
    background-color: #2ecc71;
    z-index: 2;
   }

   .box3 {
    background-color: #3498db;
    z-index: 3;
   }

   .box4 {
    background-color: #9b59b6;
    z-index: 4;
   }

   .box5 {
    background-color: #34495e;
    z-index: 5;
   }

   .box6 {
    background-color: #f1c40f;
    z-index: 6;
   }

   #btn {
    color: black;
    z-index: 9;
    position: fixed;
    width: 30px;
    height: 30px;
    /* background-color:lightgray; */
    top: 5px;
    left: 10px;
    font-size: 30px;
    cursor: pointer;
    transition: all 0.3s linear;
    display: flex;
    justify-content: center;
    align-items: center;
   }

   #btn:hover {
    color: white;
    font-weight: bold;
   }

   #btn.check {
    transform: rotate(135deg);
    color: white;
    font-weight: bold;
   }
   .box.check{
    z-index: 99;
   }
   .box span{
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <div id="btn">×</div>
  <div id="boxes">
   <div class="box box1" data-index="1"><span>Page 1</span></div>
   <div class="box box2" data-index="2"><span>Page 2</span></div>
   <div class="box box3" data-index="3"><span>Page 3</span></div>
   <div class="box box4" data-index="4"><span>Page 4</span></div>
   <div class="box box5" data-index="5"><span>Page 5</span></div>
   <div class="box box6" data-index="6"><span>Page 6</span></div>
  </div>
 </body>
</html>
<script>
 $(document).ready(function() {
  $("#btn").click(function() {
   $(this).toggleClass("check");
   if($(this).hasClass('check')){
    $(".box").removeClass('check');
    $(".box").arr().forEach(item=>{
     var index = parseInt(item.attr("data-index"));
     item.css({
      'top':40*index+'px',
      'left':40*index+'px'
     })
    })
   }else{
    $(".box").arr().forEach(item=>{
     var index = parseInt(item.attr("data-index"));
     item.css({
      'top':'0px',
      'left':'0px'
     })
    })
   }
  })


  $(".box span").click(function(){
   $(".box").parent().removeClass('check');
   $(this).parent().addClass('check');
   $("#btn").click();
  })
  $.prototype.arr = function() {
   var that = this;
   var arr = [];
   for (var i = 0; i < that.length; i++) {
    arr.push($(that[i]));
   }
   return arr;
  }
 })
</script>

Explanation of ideas

The effect of the layout is easy to understand

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery-based secondary linkage menu implementation code
Code for implementing drop-down menu effect using jQuery
A super simple drop-down menu implemented with jQuery
Jquery drop-down menu with search box
jQuery implements the effect of displaying the secondary drop-down menu when the mouse is moved over
A small example of jQuery clicking on a drop-down menu
jQuery implements clickable, retractable and expandable menu effect code
The menu written with jQuery slides from left to right
Simple implementation of folding menu code based on JQuery
jQuery code to achieve left and right sliding menu effect

<<: Solution to no Chinese input method in Ubuntu

>>: MySQL 5.7.17 installation and configuration tutorial under CentOS6.9