携帯端末のアイコンをクリックしてメニューを表示する簡単な方法は何ですか？

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{ 
 
    \t \t margin: 0; 
 
    \t \t padding: 0; 
 
    \t } 
 
    #menu 
 
    { 
 
    \t background-color: #fff; 
 
    \t height: 70px; 
 
    \t z-index: 999; 
 
    \t 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 
 
    { 
 
    \t padding: 0 30px; 
 
    } 
 
    .menu-left-side 
 
    { 
 
    \t float: left; 
 
    } 
 

 
    .icon-bar-menu, #menu-close-sign 
 
    { 
 
    display: none; 
 
    } 
 
    .menu-right-side 
 
    { 
 
    \t float: right; 
 
    \t margin: 22px; 
 
    } 
 

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

 
    } 
 

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

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

 
    } 
 

 
    ul#main-list li a:hover 
 
    { 
 
    \t 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"> 
 

 
    \t <div class="logo-section"> 
 
    \t <a href="index.php"><h2>logo</h2></a> 
 
    \t </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> 
 
    \t <ul id="main-list"> 
 
    \t \t <li> <a href="index.php">home</a></li> 
 
    \t \t <li><a href="about.php">about</a></li> 
 
    \t \t <li><a href="services.php">services</a></li> 
 
    \t \t <li><a href="news.php">news</a></li> 
 
    \t \t <li><a href="contactus.php">contact</a></li> 
 
    \t </ul><!--main-list--> 
 

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

Answer 1

あなたはナビゲーションのdivからメニューアイコンを分ける場合は、あなたのJavascriptを簡素化することができます。メニューアイコンをクリックすると、ナビゲーション部門全体が表示/非表示になります。その後、メディアのクエリを使用して、画面サイズに応じてモバイルアイコンを表示/非表示にすることができます。

閉じるアイコンをメニューアイコンと同じ位置に表示するには、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(); 
    } 
});