Use slicknav.js for the header menu,
Remodal.js is used in the content in the page.
All menu links are links within the page.
・ Slicknav
・ Remodal demo
・ Remodal github

Open menu with modal open, click
Move in the page behind without leaving the modal.
Can I close the modal at the same time as selecting and moving the menu?

            <a href = "#"><img src = "img/logo.png" alt = "logo"></a>
                   <li><a href = "# top">TOP</a></li>
                   <li><a href = "# menu1">menu1</a></li>
                   <li><a href = "# menu2">menu2</a></li>
</Li>&lt;li&gt;&lt;a href = "# menu3"&gt;menu3&lt;/a&gt;&lt;/li&gt;
&lt;div&gt;Page Top&lt;/div&gt;
 &lt;a href = "# modal1"&gt;The modal opens&lt;/a&gt;
 &lt;div data-remodal-id = "modal1" role = "dialog" aria-labelledby = "modal1Title" aria-describedby = "modal1Desc"&gt;
  &lt;button data-remodal-action = "close" aria-label = "Close"&gt;&lt;/button&gt;
    &lt;h3&gt;modal title&lt;/h3&gt;
      Modal details Modal details Modal details Modal details&lt;br&gt;
  • Answer # 1

    It looks like this without plug-ins

    You can view and edit chords from the "Remix" button in the upper right


    <input type = "checkbox" id = "nav_chk">
    <label for = "nav_chk"></label>
        <li><a href = "# a1" onclick = "linkClicked ()">link_1</a></li>
        <li><a href = "# a2" onclick = "linkClicked ()">link_2</a></li>
        <li><a href = "# a3" onclick = "linkClicked ()">link_3</a></li>


    <input type = "checkbox" id = "mdl_chk">
    <label for = "mdl_chk">Modal here</label>
    <div id = "modal">
      this is modal


    # nav_chk: checked ~ nav {
      height: calc (100vh-50px);
    #mdl_chk: checked ~ # modal {
      display: block;

    This will toggle between showing and hiding, and

    function linkClicked () {
      document.getElementById ("nav_chk"). checked = false;
      document.getElementById ("mdl_chk"). checked = false;

    This switches the checkbox on and off

    Use the power of JavaScript to manipulate checkboxes

    If it helps,