Home>

When I jump to another page, the menu closes properly.
If i link to an in-page link, the menu will remain open, so I want to link properly and close the in-page link when I press the link button.
I would appreciate it if you could help me without any knowledge.

The menu uses the one linked below.
Corresponding source code

<! DOCTYPE html><html><head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"><meta name = "format-detection" content = "telephone = no"><title>Sample site</title><!-Bootstrap CSS-><link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc + NcPb1"
  <!-JQuery first, then Popper.js, then Bootstrap JS-><script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha256-4 + XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs =" crossorigin = "anonymous"></script><script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity = "sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossori
  <!-For smartphone link malfunction-><script>      $(function () {
    $("body"). on ("click", "a", function (e) {
        var _this = $(this);
        var _href = _this.attr ("href");
        if (_href.charAt (0,1) == "#") {
            e.preventDefault ();
            var _target = $(_href == "#" || _href == ""? $("html"): _href);
            if (_target.length == "0") _target = $("html");
            var position = _target.offset (). Top;
            var _scroll = _this.data ("scroll");
            if (_scroll! == undefined) position = position + Number (_scroll);
            if (position<= 0) position = 1;// Scroll bug countermeasures on Android 2 series
            $("html, body"). animate ({scrollTop: position}, 500, "swing");
            return false;
        }
    });
});
  </script><style>      .content1 {
            height: 500px;
            background-color: lightskyblue;
        }
        .content2 {
            height: 500px;
            background-color: slategray;
        }
        .content3 {
            height: 500px;
            background-color: steelblue;
        }
  </style></head><body><header>                                                                                                            <input type = "checkbox" />     <span></span>                             <ul>        <li>Sample 1</li>        <li>Sample 2</li>        <li>Sample 3</li>        </ul>                    </header><row>                <p>Content 1</p>        </row><row>                <p>Content 2</p>        </row><row>                <p>Content 3</p></row><footer>  Footer area</footer></body></html>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a,
a: visited,
a: hover,
a: active {
text-decoration: none;
color: inherit;
}
.cp_fullscreenmenu {
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
/ * menu content * /
.cp_fullscreenmenu .menu {
position: fixed;
top: 0;
left: 0;
display: flex;
visibility: hidden;
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
align-items: center;
justify-content: center;
}
.cp_fullscreenmenu .menu>div {
display: flex;
overflow: hidden;
width: 200vw;
height: 200vw;
transition: all 0.4s ease;
-webkit-transform: scale (0);
transform: scale (0);
text-align: center;
color: #fefefe;
border-radius: 50%;
background: rgba (0,131,143,0.8);
flex: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
align-items: center;
justify-content: center;
}
.cp_fullscreenmenu .menu>div>ul {
display: block;
max-height: 100vh;
margin: 0;
padding: 0 1em;
list-style: none;
transition: opacity 0.4s ease;
opacity: 0;
}
.cp_fullscreenmenu .menu>div>ul>li {
font-size: 24px;
display: block;
margin: 1em;
padding: 0;
}
.cp_fullscreenmenu .menu>div>ul>li>a {
position: relative;
display: inline;
cursor: pointer;
transition: color 0.4s ease;
}
.cp_fullscreenmenu .menu>div>ul>li>a: hover {
color: # e5e5e5;
}
.cp_fullscreenmenu .menu>div>ul>li>a: hover: after {
width: 100%;
}
.cp_fullscreenmenu .menu>div>ul>li>a: after {
position: absolute;
z-index: 1;
bottom: -0.15em;
left: 0;
width: 0;
height: 2px;
content:'';
transition: width 0.4s ease;
background: # e5e5e5;}
/ * Click to open/close the menu * /
.cp_fullscreenmenu .toggle {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 60px;
height: 60px;
cursor: pointer;
opacity: 0;
}
.cp_fullscreenmenu .toggle: checked + .hamburger>span {
-webkit-transform: rotate (135deg);
transform: rotate (135deg);
}
.cp_fullscreenmenu .toggle: checked + .hamburger>span: before,
.cp_fullscreenmenu .toggle: checked + .hamburger>span: after {
top: 0;
-webkit-transform: rotate (90deg);
transform: rotate (90deg);
}
.cp_fullscreenmenu .toggle: checked + .hamburger>span: after {
opacity: 0;
}
.cp_fullscreenmenu .toggle: checked ~ .menu {
visibility: visible;
pointer-events: auto;
}
.cp_fullscreenmenu .toggle: checked ~ .menu>div {
transition-duration: 0.75s;
-webkit-transform: scale (1);
transform: scale (1);
}
.cp_fullscreenmenu .toggle: checked ~ .menu>div>ul {
opacity: 1;
}
.cp_fullscreenmenu .toggle: checked ~ .menu>div>ul li: nth-of-type (1) {
transition-delay: 0.4s;
}
.cp_fullscreenmenu .toggle: checked ~ .menu>div>ul li: nth-of-type (2) {
transition-delay: 0.6s;
}
.cp_fullscreenmenu .toggle: checked ~ .menu>div>ul li: nth-of-type (3) {
transition-delay: 0.8s;
}
.cp_fullscreenmenu .toggle: checked ~ .menu>div>ul li: nth-of-type (4) {
transition-delay: 1.0s;
}
.cp_fullscreenmenu .toggle: hover + .hamburger {
box-shadow: inset 0 0 10px rgba (0, 0, 0, 0.1);
}
.cp_fullscreenmenu .toggle: checked: hover + .hamburger>span {
-webkit-transform: rotate (225deg);
transform: rotate (225deg);
}
/*Hamburger*/
.cp_fullscreenmenu .hamburger {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
width: 60px;
height: 60px;
padding: 0.5em 1em;
cursor: pointer;
transition: box-shadow 0.4s ease;
border-radius: 0 0.12em 0.12em 0;
background: rgba (0,151,167, 0.7);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cp_fullscreenmenu .hamburger>span {
position: relative;
top: 50%;
display: block;
width: 100%;
height: 2px;
transition: all 0.4s ease;
background: #fefefe;
}
.cp_fullscreenmenu .hamburger>span: before,
.cp_fullscreenmenu .hamburger>span: after {
position: absolute;
z-index: 1;
top: -10px;
left: 0;
display: block;
width: 100%;
height: 2px;
content:'';
transition: all 0.4s ease;
background: inherit;
}
.cp_fullscreenmenu .hamburger>span: after {
top: 10px;
}
  • Answer # 1

    Correction points

    Anchor tag did not work properly

    The location where the content was written was not appropriate.
    The id was "# content-1" ("#" is not required on the id side)
    The third on the link side was href = "# content-1"

    The menu closes when navigating the page, but the menu does not close when clicked for an anchor link

    To be exact, neither closes. It just looked like that because the display was reset when the page was moved.
    (The same was true for the original sample screen)
    It may be forcible as a process, but the same thing as when pressing "x" is set at the time of onclick
    (This process is not necessary except for anchor links.)
    Originally it is registered as a function, but it is written as it is for the sake of clarity.

    <! doctype html>
    <html>
    <head>
    <meta charset = "UTF-8">
    <title>Sample 1</title>
    </head>
    <body>
        
             Contents 
          <p>Content</p>
        
        
          <input type = "checkbox" />
           <span></span>
            
                
                
              <p>Content 1</p>
              <p>Content 2</p>
              <p>Content 3</p>
                
                
            
        
      <!-Contents, etc. From this position->
        
            
              <p>Content 1</p>
            
            
              <p>Content 2</p>
            
            
              <p>Content 3</p>
            
        
    </body>
    </html>