如何在特定的div中显示固定的隐藏菜单？

Question

我开发了一个切换菜单，我的代码可以完美运行而没有任何问题。我的菜单非常适合在可配置的网站上添加。

这是我完整的代码，功能齐全：

$(document).ready(function () {
$('.slideout-menu-toggle').on('click', function(event){
  event.preventDefault();
  var slideoutMenu = $('.slideout-menu');
  var slideoutMenuWidth = $('.slideout-menu').width();
  $('.capa').toggleClass('visible');  
  slideoutMenu.toggleClass("open");
});
});

.slideout-menu {
  position: fixed;
  top: 0;
  left:-250px;
  width: 250px;
  height: 100%;
  background-color: rgba(15, 23, 27, 0.85);
  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;
  left: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-weight: bold;
  line-height: 1;
  color: #999;
  vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}

.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
}

.slideout-menu ul li a:hover {
  background: #000;
  color: #fff;
}

.capa {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  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;
}
.capa.visible {
  opacity: 1;
  visibility: visible;
}
.slideout-menu.open {
  left: 0;
}

.bloque {
 margin: 0 auto;
 width: 600px;
 height: 100vh;
 background: bisque;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-menu-toggle">
		<div class="slideout-menu">
			<h3>Menu <a href="#" class="slideout-menu-toggle">&times;</a></h3>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Home</a></li>
				<li><a href="#">Home</a></li>
				<li><a href="#">Home</a></li>
				<li><a href="#">Home</a></li>
				<li><a href="#">Home</a></li>
				<li><a href="#">Home</a></li>
			</ul>
		</div>
	</div>

	<div class="bloque">
		<div class="boton-menu-toggle">
			<a href="#" class="slideout-menu-toggle">Menu</a>
		</div>
	</div>

但是我希望能够使菜单显示和隐藏于特定的div。

因此：

而不是这种方式：

您能解释一下如何在特定的div中显示和隐藏隐藏菜单吗？

Answer 1

一个想法是将菜单元素移动到所需容器（.bloque）内。

然后将菜单从position:fixed更改为position:absolute
并将position:relative添加到容器中。

我也将left:-250px更改为left:-100vw，以便菜单完全不在屏幕上。

$(document).ready(function() {
  $('.slideout-menu-toggle').on('click', function(event) {
    event.preventDefault();
    var slideoutMenu = $('.slideout-menu');
    var slideoutMenuWidth = $('.slideout-menu').width();
    $('.capa').toggleClass('visible');
    slideoutMenu.toggleClass("open");
  });
});

.slideout-menu {
  position: absolute;
  top: 0;
  left: -100vw;
  width: 250px;
  height: 100%;
  background-color: rgba(15, 23, 27, 0.85);
  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;
  left: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-weight: bold;
  line-height: 1;
  color: #999;
  vertical-align: top;
}

.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}

.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
}

.slideout-menu ul li a:hover {
  background: #000;
  color: #fff;
}

.capa {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  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;
}

.capa.visible {
  opacity: 1;
  visibility: visible;
}

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

.bloque {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 100vh;
  background: bisque;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bloque">

  <div class="container-menu-toggle">
    <div class="slideout-menu">
      <h3>Menu <a href="#" class="slideout-menu-toggle">&times;</a></h3>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
      </ul>
    </div>
  </div>


  <div class="boton-menu-toggle">
    <a href="#" class="slideout-menu-toggle">Menu</a>
  </div>
</div>

---

编辑

如果您要隐藏菜单中出现在.bloque之外的部分，可以使用overflow:hidden。在这种情况下，我会将菜单设置为left:-100%而不是left:100vw。

$(document).ready(function() {
  $('.slideout-menu-toggle').on('click', function(event) {
    event.preventDefault();
    var slideoutMenu = $('.slideout-menu');
    var slideoutMenuWidth = $('.slideout-menu').width();
    $('.capa').toggleClass('visible');
    slideoutMenu.toggleClass("open");
  });
});

.slideout-menu {
  position: absolute;
  top: 0;
  left: -100%;
  width: 250px;
  height: 100%;
  background-color: rgba(15, 23, 27, 0.85);
  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;
  left: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-weight: bold;
  line-height: 1;
  color: #999;
  vertical-align: top;
}

.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}

.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
}

.slideout-menu ul li a:hover {
  background: #000;
  color: #fff;
}

.capa {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  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;
}

.capa.visible {
  opacity: 1;
  visibility: visible;
}

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

.bloque {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 100vh;
  background: bisque;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bloque">

  <div class="container-menu-toggle">
    <div class="slideout-menu">
      <h3>Menu <a href="#" class="slideout-menu-toggle">&times;</a></h3>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
      </ul>
    </div>
  </div>


  <div class="boton-menu-toggle">
    <a href="#" class="slideout-menu-toggle">Menu</a>
  </div>
</div>