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

Question

我必须在移动设备上显示菜单。当用户单击菜单栏图标时，菜单将在屏幕上显示完整的背景颜色，并出现十字符号。点击十字标志菜单后将关闭。我尝试了一些无法正常工作的代码。我需要简单和最佳的答案。能帮我吗？

$(function() {
  var menuVisible = false;
  $('#menuBtn').click(function() {
  $("#main-list").slideDown();
  //manu bar will hide after clicked 
  $('#menuBtn').css({'display': 'none'});
  
  //cross sign will displya after clicked menu bar
  $('#menu-close-sign').css({'display': 'block' });
  $('#menuBtn').click(function() {
  $("#main-list").show();
  $('#menu-close-sign').show();
  $('#menu').css({'background-color': '#F4FAFF', 'height': '100%'});
  $('#menuBtn').hide();
  });
  
  $('#menu-close-sign').click(function() {
  $("#main-list").hide();
  $('#menu-close-sign').hide();
  $('#menuBtn').show();
  $('#menu').css({'background-color': '#fff', 'height': '50px'});
  // $(".right_side").slideUp();
  });
  
  if (menuVisible) {
  $('.right_side').css({'display': 'none' });
  menuVisible = false;
  return;
  }
  $('.right_side').css({'display': 'block'});
  $('.menu').css({'background-color': '#F4FAFF', 'height': '100%'});
  menuVisible = true;
  });
  });

body{
  		margin: 0;
  		padding: 0;
  	}
  #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;
  }

  .icon-bar-menu, #menu-close-sign
  {
  display: none;
  }
  .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) {
  .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;
  }
  #menu-close-sign
  {
  display:none;
  }
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

  <!--menu-->
  <div id="menu">
  <div class="menu-section">
  <div class="menu-left-side">

  	<div class="logo-section">
  	<a href="index.php"><h2>logo</h2></a>
  	</div><!--logo-section-->

  </div><!--menu-left-side-->

  <div class="menu-right-side">
  <div class="icon-bar-menu">
  <span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span>
  <span id="menu-close-sign"><i class="fa fa-times" aria-hidden="true"></i></span>
  </div>
  	<ul id="main-list">
  		<li> <a href="index.php">home</a></li>
  		<li><a href="about.php">about</a></li>
  		<li><a href="services.php">services</a></li>
  		<li><a href="news.php">news</a></li>
  		<li><a href="contactus.php">contact</a></li>
  	</ul><!--main-list-->

  </div><!--menu-right-side-->
  </div><!--menu-section-->
  </div><!--menu-->

Answer 1

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

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

https://codepen.io/cassyj122/pen/NpOXbV

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="container">
  <!--menu-->
  <span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span>
  <div id="menu">
    <div class="menu-section">
      <div class="menu-left-side">
        <div class="logo-section">
          <a href="index.php"><h2>logo</h2></a>
        </div>
        <!--logo-section-->
      </div>
      <!--menu-left-side-->
      <div class="menu-right-side">
        <div class="icon-bar-menu">
          <span id="menu-close-sign"><i class="fa fa-times" aria-hidden="true"></i></span>
        </div>
        <ul id="main-list">
          <li> <a href="index.php">home</a></li>
          <li><a href="about.php">about</a></li>
          <li><a href="services.php">services</a></li>
          <li><a href="news.php">news</a></li>
          <li><a href="contactus.php">contact</a></li>
        </ul>
        <!--main-list-->

      </div>
      <!--menu-right-side-->
    </div>
    <!--menu-section-->
  </div>
  <!--menu-->
</div>

#menu {
  background-color: #64d0e7;
  width: 100%;
}

#menuBtn {
  position: absolute;
  font-size: 25px;
  top: 0;
  right: 0;
  display: none;
  z-index: -1;
}

#menu-close-sign {
  position: absolute;
  top: 0;
  display: none;
  left: 0;
}

#container {
  width: 100%;
  position: relative;
}

body {
  margin: 0;
  padding: 0;
}

CSS

#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;
  }
}

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();
  }
});