Javascript 在移动设备中点击图标后，显示菜单的简单方式是什么？

我必须在移动设备上显示菜单。当用户单击菜单栏图标时，菜单将以全背景色显示在屏幕上，并显示十字符号。点击交叉标志后，菜单将关闭。我尝试了一些工作不正常的代码。我需要简单而最好的答案。你能帮我吗

$（函数（）{
var menuVisible=false；
$（'#menuBtn'）。单击（函数（）{
$（“#主列表”）.slideDown（）；
//手动栏将在单击后隐藏
$（'menuBtn'）.css（{'display'：'none'}）；
//单击菜单栏后将显示叉号
$（“#菜单关闭符号”）.css（{'display'：'block'}）；
$（'#menuBtn'）。单击（函数（）{
$（“#主列表”）.show（）；
$（“#菜单关闭标志”）.show（）；
$（'menu'）.css（{'background-color'：'F4FAFF'，'height'：'100%}）；
$（'#menuBtn'）.hide（）；
});
$（“#菜单关闭标志”）。单击（函数（）{
$（“#主列表”）.hide（）；
$（“#菜单关闭符号”）.hide（）；
$（'#menuBtn'）.show（）；
$（'#menu'）.css（{'background-color'：'#fff'，'height'：'50px'）；
//$（“.right_side”）.slideUp（）；
});
如果（菜单可见）{
$（'.right_side'）.css（{'display'：'none'}）；
menuVisible=false；
返回；
}
$（'.right_side'）.css（{'display'：'block'}）；
$（'.menu'）.css（{'background-color'：'F4FAFF'，'height'：'100%}）；
menuVisible=true；
});
});
正文{
保证金：0；
填充：0；
}
#菜单
{
背景色：#fff；
高度：70像素；
z指数：999；
webkit盒阴影：0 3px4pRGBA（0,0,0,0.24）；
-moz盒阴影：0 3px4pRGBA（0,0,0,0.24）；
盒影：0 3px4pRGBA（0,0,0,0.24）；
}
.菜单部分
{
填充：0 30px；
}
.菜单左侧
{
浮动：左；
}
.图标栏菜单，#菜单关闭标志
{
显示：无；
}
.菜单右侧
{
浮动：对；
利润率：22px；
}
ul#主列表{
列表样式：无；
文本转换：大写；
}
ul#主列表li{
浮动：左；
利润率：0.20px；
}
ul#主列表李a{
颜色：#212F3D；
}
ul#主列表李a：悬停
{
颜色：#ffb902；
}
@仅介质屏幕和（最大宽度：600px）{
.菜单左侧
{
浮动：无；
填充：0；
保证金：0；
}
.图标栏菜单
{
位置：绝对位置；
右：10px；
顶部：9px；
填充：10px 20px；
光标：指针；
显示：块；
}
.图标栏菜单i{
字体大小：25px；
颜色：#000；
}
.菜单右侧
{
利润率：20px0；
}
ul#主列表
{
填充：0；
}
ul#主列表li.菜单右侧
{
浮动：无；
}
ul#主列表li
{
利润率：20px0；
}
#菜单
{
身高：100%；
宽度：100%；
背景色：#64d0e7！重要；
}
ul#主列表李a
{
颜色：#000；
}
#菜单关闭标志
{
显示：无；
}
}








如果将菜单图标与导航分区分开，可以简化Javascript。单击菜单图标，整个导航分区将显示/隐藏。然后，您可以根据屏幕大小使用媒体查询来显示/隐藏移动图标

您需要调整CSS，以使关闭图标与菜单图标处于相同的位置，但这应该相当容易


HTML

Javascript

$(function() {
  $('#menuBtn').click(function() {
    $('#menu').show();
  });
  $('#menu-close-sign').click(function() {
    $('#menu').hide();
  });

});

$(window).resize(function() {
  if ($(window).width() > 600) {
    $('#menu').show();
  } else {
    $('#menu').hide();
  }
});

你想要一个简单的方法来制作汉堡包菜单吗？你试过bootstrap吗？这肯定是最简单的方法。谢谢你回复安德烈先生，我知道bootstrap，但我不想用它。有没有办法减少我的脚本？还可以使用下拉菜单回答Cassandra，1）为什么在id菜单之外使用类菜单？2） 如果我使用了你的脚本，那么我如何使用下拉菜单。我是说我在说剧本？
#menu {
  background-color: #fff;
  height: 70px;
  z-index: 999;
  webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.24);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.24);
}

.menu-section {
  padding: 0 30px;
}

.menu-left-side {
  float: left;
}

.menu-right-side {
  float: right;
  margin: 22px;
}

ul#main-list {
  list-style: none;
  text-transform: uppercase;
}

ul#main-list li {
  float: left;
  margin: 0 20px;
}

ul#main-list li a {
  color: #212F3D;
}

ul#main-list li a:hover {
  color: #ffb902;
}

@media only screen and (max-width: 600px) {
  #menuBtn {
    display: block;
  }
  #menu-close-sign {
    display: block;
  }
  #menu {
    display: none;
  }
  .menu-left-side {
    float: none;
    padding: 0;
    margin: 0;
  }
  .icon-bar-menu {
    position: absolute;
    right: 10px;
    top: 9px;
    padding: 10px 20px;
    cursor: pointer;
    display: block;
  }
  .icon-bar-menu i {
    font-size: 25px;
    color: #000;
  }
  .menu-right-side {
    margin: 20px 0;
  }
  ul#main-list {
    padding: 0;
  }
  ul#main-list li,
  .menu-right-side {
    float: none;
  }
  ul#main-list li {
    margin: 20px 0;
  }
  #menu {
    height: 100%;
    width: 100%;
    background-color: #64d0e7 !important;
  }
  ul#main-list li a {
    color: #000;
  }
}

$(function() {
  $('#menuBtn').click(function() {
    $('#menu').show();
  });
  $('#menu-close-sign').click(function() {
    $('#menu').hide();
  });

});

$(window).resize(function() {
  if ($(window).width() > 600) {
    $('#menu').show();
  } else {
    $('#menu').hide();
  }
});