Home>

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
http://slicknav.io/
・ Remodal demo
http://vodkabears.github.io/remodal/
・ Remodal github
https://github.com/VodkaBears/Remodal/

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?

<header>
<div></div>
<div>
    <div>
        <div>
            <a href = "#"><img src = "img/logo.png" alt = "logo"></a>
        </div>
        <div>
            <div>
                <ul>
                   <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;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;div&gt;Page Top&lt;/div&gt;
&lt;div&gt;menu1Content
&lt;div&gt;
 &lt;a href = "# modal1"&gt;The modal opens&lt;/a&gt;
&lt;/div&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;div&gt;
    &lt;h3&gt;modal title&lt;/h3&gt;
    &lt;p&gt;
      Modal details Modal details Modal details Modal details&lt;br&gt;
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;menu2Content&lt;/div&gt;
&lt;div&gt;menu3Content&lt;/div&gt;
  • Answer # 1

    It looks like this without plug-ins
    https://thimbleprojects.org/liveasnotes/536869/


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

    Excerpt,

    <input type = "checkbox" id = "nav_chk">
    <label for = "nav_chk"></label>
    <nav>
      <ul>
        <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>
      </ul>
    </nav>


    And

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


    And

    # 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,