Как создавать темный слой в оставшуюся часть страницы, открыв меню responsive?

Поскольку я могу добавлять этот же самый эффект этого меню responsive. Эффект, который применяется, открыв меню responsive, - прозрачный слой в оставшуюся часть страницы.

Старайтесь применять стиль в class="slideout-menu" но стиль применяет это ко мне к меню, идеальное состоит в том, чтобы применять к нему прозрачный слой к оставшейся части тела страницы, как он наблюдается в этом меню responsive.

$(document).ready(function () {
$('.slideout-menu-toggle').on('click', function(event){
  event.preventDefault();
  // create menu variables
  var slideoutMenu = $('.slideout-menu');
  var slideoutMenuWidth = $('.slideout-menu').width();
  
  // toggle open class
  slideoutMenu.toggleClass("open");
  
  // slide menu
  if (slideoutMenu.hasClass("open")) {
    slideoutMenu.animate({
      right: "0px"
    }); 
  } else {
    slideoutMenu.animate({
      right: -slideoutMenuWidth
    }, 250);  
  }
});
});
a {
  color: #777;
  text-decoration: none;
}

a:hover, a:focus {
  color: #515151;
}

.slideout-menu {
  position: fixed;
  top: 0;
  right:-250px;
  width: 250px;
  height: 100%;
  background: #333;
  z-index: 100;
}
.slideout-menu h3 {
  position: relative;
  padding: 12px 10px;
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
}
.slideout-menu .slideout-menu-toggle {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  background: #222;
  color: #999;
  text-decoration: none;
  vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}
.slideout-menu ul {
  list-style: none;
  font-weight: 300;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
  border-top: 1px solid #454545;
  border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
  text-decoration: none;
}
.slideout-menu ul li a:hover {
  background: #000;
  color: #fff;
}
.slideout-menu ul li a i {
  position: absolute;
  top: 15px;
  right: 10px;
  opacity: .5;
}
<script src="http://code.jquery.com/jquery-1.12.1.js"></script>
<div>
  <ul>
    <li><a href="#" class="slideout-menu-toggle">Menu</a></li>
  </ul>
</div>
<div class="slideout-menu">
  <h3>Menu <a href="#" class="slideout-menu-toggle">&times;</a></h3>
  <ul>
    <li>MENU AND MENU<li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
  </ul>
</div>

<div id="cuerpo">
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
</div>
2
задан 13.01.2017, 16:26
0 ответов

Добавляет один <div> как прямой сын body с любой класс. Это будет слой, который будет покроет весь body, кроме меню, так как у него есть один z-index очень верхний.

Этот у элемента должны быть свойства visibility: hidden и opacity: 0 для того, чтобы он не был видимым и у него не было взаимодействия с пользователем. Кроме того, один transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1); для того, чтобы это была animable видимость слоя.

.capa {
  background-color: rgba(0,0,0,.5);
  height: 100vw;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
  visibility: hidden;
  width: 100%;
  z-index: 10; /* para que cubra otros elementos que tengan un z-index mayor a 1 */
}
.capa.visible {
  opacity: 1;
  visibility: visible;
}

Другой интересный аспект состоит в том, что ты оживляешь путь jQuery, когда в классе open slideout-menu смоги делаться ésto:

.slideout-menu.open {
  right: 0;
}

Пример

$(document).ready(function () {
$('.slideout-menu-toggle').on('click', function(event){
  event.preventDefault();
  // create menu variables
  var slideoutMenu = $('.slideout-menu');
  var slideoutMenuWidth = $('.slideout-menu').width();
  
  $('.capa').toggleClass('visible');
  
  // toggle open class
  slideoutMenu.toggleClass("open");
  
  // slide menu
  /*if (slideoutMenu.hasClass("open")) {
    slideoutMenu.animate({
      right: "0px"
    });
  } else {
    slideoutMenu.animate({
      right: -slideoutMenuWidth
    }, 250);  
  }*/
});
});
a {
  color: #777;
  text-decoration: none;
}

a:hover, a:focus {
  color: #515151;
}

.slideout-menu {
  position: fixed;
  top: 0;
  right:-250px;
  width: 250px;
  height: 100%;
  background: #333;
  transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
  z-index: 100;
}
.slideout-menu h3 {
  position: relative;
  padding: 12px 10px;
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
}
.slideout-menu .slideout-menu-toggle {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  background: #222;
  color: #999;
  text-decoration: none;
  vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}
.slideout-menu ul {
  list-style: none;
  font-weight: 300;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
  border-top: 1px solid #454545;
  border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
  text-decoration: none;
}
.slideout-menu ul li a:hover {
  background: #000;
  color: #fff;
}
.slideout-menu ul li a i {
  position: absolute;
  top: 15px;
  right: 10px;
  opacity: .5;
}
.capa {
  background-color: rgba(0,0,0,.5);
  height: 100vw;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
  visibility: hidden;
  width: 100%;
  z-index: 10; /* para que cubra otros elementos que tengan un z-index mayor a 1 */
}
.capa.visible {
  opacity: 1;
  visibility: visible;
}
.slideout-menu.open {
  right: 0;
}
<script src="http://code.jquery.com/jquery-1.12.1.js"></script>
<div>
  <ul>
    <li><a href="#" class="slideout-menu-toggle">Menu</a></li>
  </ul>
</div>
<div class="slideout-menu">
  <h3>Menu <a href="#" class="slideout-menu-toggle">&times;</a></h3>
  <ul>
    <li>MENU AND MENU<li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
  </ul>
</div>

<div id="cuerpo">
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
</div>

<!-- capa-->
<div class="capa">
  
</div>

PD: timming оживления я это сделал посредством cubic-beizer потому что он позволяет тебе реализовывать функции времени персонализированного способа; таким образом ты можешь делать более мягкие переходы. Ты можешь видеть информацию об этой свойство здесь.

3
ответ дан 03.12.2019, 17:41
  • 1
    Совершенный функционируй очень хорошо, má s, что весь эффект переходов má s мягкие, только из-за любопытства, если, реализовав клик вне menú responsive или вне тела menú responsive có mo скрывать menú кликнув или другие функции вне menú responsive, спасибо привет :) –  14.01.2017, 04:10
  • 2
    Как в открывать menú он является слоем, что мы должны делать, añ adir listener в слой для события click, с концом, который, когда она кликнет в ней, прячет меню. $('.capa').on('click', function () { $('.slideout-menu').removeClass('open'); }) –  14.01.2017, 13:23
  • 3
    Спасибо за пример, я это протестировал он скрывает от меня menú но остается активным слой ты можешь chequerarlo https://jsfiddle.net / типов Привета :) –  15.01.2017, 03:27
  • 4
    Те faltó снимать класс visible в слой: Смотри исправленные твой fiddle . –  15.01.2017, 13:52

То, что ты мог бы делать, состоит в том, чтобы добавлять нового div что у него был z-index несовершеннолетний, что меню (но больше, чем тело) с установленным положением, которое занимало бы весь экран, с полупрозрачным и скрытым фоном. Тогда, когда откроется меню (которое добавляет класс .open), этот div он становится видимым.

Даже не было бы надо не добавлять ничего из кода JS, было бы достаточно добавлять div я участвую в рыцарском турнире за меню:

<div class="slideout-menu">
  <h3>Menu <a href="#" class="slideout-menu-toggle">&times;</a></h3>
  <ul>
    <li>MENU AND MENU<li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
  </ul>
</div>
<div id="scrim"></div>

И следующий CSS:

#scrim {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:99;
  background:rgba(0,0,0,0.0);
  display:none;
  transition:all 1s;
}

.slideout-menu.open ~ #scrim {
  display:block;
  background:rgba(0,0,0,0.5);
}

Здесь ты можешь видеть это функционируя:

$(document).ready(function () {
$('.slideout-menu-toggle').on('click', function(event){
  event.preventDefault();
  // create menu variables
  var slideoutMenu = $('.slideout-menu');
  var slideoutMenuWidth = $('.slideout-menu').width();
  
  // toggle open class
  slideoutMenu.toggleClass("open");
  
  // slide menu
  if (slideoutMenu.hasClass("open")) {
    slideoutMenu.animate({
      right: "0px"
    }); 
  } else {
    slideoutMenu.animate({
      right: -slideoutMenuWidth
    }, 250);  
  }
});
});
a {
  color: #777;
  text-decoration: none;
}

a:hover, a:focus {
  color: #515151;
}
#scrim {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:99;
  background:rgba(0,0,0,0.0);
  display:none;
  transition:all 1s;
}
.slideout-menu {
  position: fixed;
  top: 0;
  right:-250px;
  width: 250px;
  height: 100%;
  background: #333;
  z-index: 100;
}
.slideout-menu.open ~ #scrim {
  display:block;
  background:rgba(0,0,0,0.5);
}

.slideout-menu h3 {
  position: relative;
  padding: 12px 10px;
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
}
.slideout-menu .slideout-menu-toggle {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  background: #222;
  color: #999;
  text-decoration: none;
  vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}
.slideout-menu ul {
  list-style: none;
  font-weight: 300;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
  border-top: 1px solid #454545;
  border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
  text-decoration: none;
}
.slideout-menu ul li a:hover {
  background: #000;
  color: #fff;
}
.slideout-menu ul li a i {
  position: absolute;
  top: 15px;
  right: 10px;
  opacity: .5;
}
<script src="http://code.jquery.com/jquery-1.12.1.js"></script>
<div>
  <ul>
    <li><a href="#" class="slideout-menu-toggle">Menu</a></li>
  </ul>
</div>
<div class="slideout-menu">
  <h3>Menu <a href="#" class="slideout-menu-toggle">&times;</a></h3>
  <ul>
    <li>MENU AND MENU<li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
  </ul>
</div>
<div id="scrim"></div>
<div id="cuerpo">
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
</div>
1
ответ дан 03.12.2019, 17:41

Я буду оставлять тебе пример, очень похожий на того, которого ты используешь, он был бы другим выбором очень практический и функциональный для нашего personalización CSS

Я изменил немного систему 'jQuery', чтобы так мочь работать лучше с нашими элементами CSS, без необходимости добавлять дополнительные ящики, чтобы настраивать элементы, кликнув, так мы добиваемся лучшей оптимизации в нашем коде.

Класс (.open), кликнув, мы добавляем ее к нашему телу (body), чтобы так мочь изменять легко наши элементы CSS, так как он - большой отец Ваших элементов, если один хочет осуществить перемещение в теле (body), было бы возможно легко посредством простого CSS.

Пример jQuery:

$('body').toggleClass('open');

Немного важно, это scroll для меню в вертикальном, для образца правильно все элементы <li>, всегда было бы возможно посредством librerías jQuery настраивать выражение scroll.

Эффекты оживления, мы добавляем ее посредством CSS, пример:

transition: right .5s linear; //Seria un efecto para nuestro desplazamiento en la caja menú padre.

Давайте видеть измененный код:

$(document).ready(function() {
  
  //Boton
  $('.slideout-menu-toggle').click(function() {

    $('body').toggleClass('open');

  });
    
});   

//Cerrar menu
function closeNav() {
   $('body').toggleClass('open');
}
body { 
  overflow-x:hidden; 
  transition: background-color .5s linear; /*Animacion CSS3 para fondo transparante en nuestro cuerpo al cerrar.*/
} 

a {
  color: #777;
  text-decoration: none;
}

a:hover, a:focus {
  color: #515151;
}

ul { list-style-type: none; }

#cuerpo {
  transition: all .5s linear ; /*Animación CSS, cuerpo giratorio cerrar*/
}

.slideout-menu {
  position: fixed;
  top: 0;
  right:-250px; /*Invisible menu*/
  width: 250px;
  height: 100%;
  background-color: #333;
  /*Regla visible scroll en vertical*/
  overflow-y:auto; overflow-x:hidden;
  transition: right .5s linear; /*Animacion CSS3, para desplazamiento menu al cerrar.*/
  z-index: 1000; /* Z-index alto */
  
}
.slideout-menu h3 {
  position: relative;
  padding: 12px 10px;
  color: #fff;
  font-size: 1.2em;
  font-weight: 400;
}
.slideout-menu .slideout-menu-toggle, .cerrar-menu {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  background: #222;
  color: #999;
  text-decoration: none;
  vertical-align: top;
}    

.slideout-menu-toggle { z-index:999; }

.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}
.slideout-menu ul {
  list-style: none;
  font-weight: 300;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
  border-top: 1px solid #454545;
  border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
  text-decoration: none;
}
.slideout-menu ul li a:hover {
  background-color: #000;
  color: #fff;
}
.slideout-menu ul li a i {
  position: absolute;
  top: 15px;
  right: 10px;
  opacity: .5;
}
/*** Trabajamos con nuestra 'CLASS' 'OPEN', podriamos crear grandes personalizaciones, ya que podemos llegar a nuestros elementos hijos desde el 'BODY (open)' ***/

/*Añadimos fondo al cuerpo*/
.open {
  background-color:rgba(0,0,0,.3);
  transition: all .5s linear; /*Animación para fondo transparante en nuestro cuerpo al abrir.*/
}

/* Visible menu */
.open .slideout-menu { 
  right:0;
  transition: right .5s linear; /*Animacion CSS3, para desplazamiento menu abrir.*/
}
/* Cerrar menu desde cualquier lugar de pantalla */
.open .slideout-menu-toggle { 
   color:rgba(255,255,255,.0);/* Invisible texto */
   display:block; 
   position:fixed; 
   height:100%; 
   width:100%; 
   left:0; top:0;       
 }

/* Ejemplo, para ver lo facil que seria cambiar estilos, en este caso tu caja #cuerpo le vamos añadir un pequeño efecto. */
.open #cuerpo {
  transform: rotate(-3deg) ;
  transition: all .5s linear ; /*Animación CSS, cuerpo giratorio abrir*/
}
<script src="http://code.jquery.com/jquery-1.12.1.js"></script>
<div>
  <ul>
    <li><a href="#" class="slideout-menu-toggle">Menu</a></li>
  </ul>
</div>
<div class="slideout-menu">
  <h3>Menu <a href="javascript:void(0)" class="cerrar-menu" onclick="closeNav()">&times;</a></h3>
  <ul>
    <li>MENU AND MENU<li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
    <li>MENU AND MENU</li>
  </ul>
</div>

<div id="cuerpo">
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
  <p>Qolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibham liber tempor cum soluta nobis eleifend option.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima.</p>
</div>
1
ответ дан 03.12.2019, 17:41

Теги

Похожие вопросы