单击汉堡菜单中的：hover时，如何创建整页宽度下拉列表？

Question

单击汉堡菜单但仍保持关闭功能（X）时，如何显示整页宽度下拉列表。 （单击下拉菜单和关闭汉堡菜单转换）

下面是汉堡菜单动画的JS函数。单击时悬停转换并关闭。

 $("#wrapper").hover(function() {
    $(".menu").toggleClass("transition");
  });

$("#wrapper").click(function() {
  $(".transition").toggleClass("close");
});

以下是在应用悬停和关闭功能时转换汉堡菜单的css。

<style>
.burgerMenu-right {
    font-family: 'Circe Rounded', sans-serif;
    font-weight: 800;
    display: inline;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 20px;
    color: black;
    float: right;
    position: relative;
  right: 4%;
}

.main-item {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}



.line {
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: 2px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
  background: black;
}

.line01 {
  top: 33.3%;
  width: 100%;
  left: 0;
}

.line02 {
  top: 66.6%;
  width: 65%;
  right: 0;
}

.menu:hover .line01 {
  width: 65%;
}

.menu:hover .line02 {
  width: 100%;
  top: 66%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
  width: 100%;
}

.menu.close .line02 {
  transform: rotate(-45deg);
  top: 49%;
  width: 100%;
}

</style>

下面是汉堡菜单的html ....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
  </div>
</div>

谢谢！

Answer 1

使用下面的代码

＆＃13;

＆＃13;

	$(document).ready(function($) {

$(".menu").click(function(){
  $(this).toggleClass("transition close");
   $(".down-bg").slideToggle();
})
});

＆＃13;

.burgerMenu-right {
    font-family: 'Circe Rounded', sans-serif;
    font-weight: 800;
    display: inline;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 20px;
    color: black;
    float: right;
    position: relative;
  right: 4%;
}

.main-item {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  z-index: 10
}



.line {
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: 2px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
  background: black;
}

.line01 {
  top: 33.3%;
  width: 100%;
  left: 0;
}

.line02 {
  top: 66.6%;
  width: 65%;
  right: 0;
}

.menu:hover .line01 {
  width: 65%;
}

.menu:hover .line02 {
  width: 100%;
  top: 66%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
  width: 100%;
}

.menu.close .line02 {
  transform: rotate(-45deg);
  top: 49%;
  width: 100%;
}
.down-bg{
  background: rgba(0,0,0,0.5);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
  </div>
  <div class="down-bg"></div>
</div>

＆＃13;

＆＃13;

＆＃13;