Home > database >  How Can I Close My Hamburger Menu After Clicking On A Link?
How Can I Close My Hamburger Menu After Clicking On A Link?

Time：12-18

I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.

<div >
<input id="cp_toggle03" type="checkbox">
<div >
<label for="cp_toggle03" >
<span></span>
</label>
</div>
<label id="h-menu_black"  for="cp_menuicon"></label>
<div id="body" ></div>
        
<header >
        
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
            
<li style="border-bottom: 1px solid lightgray;"><a href="../../../../../Home_English.html">Home</a></li>
<li style="border-bottom: 1px solid lightgray;"><a href="../../../../../Blog_English.html">Blog</a></li>
<li style="border-bottom: 1px solid lightgray;"><a href="../../../../../About_English.html">About This Website</a></li>
<li style="border-bottom: 1px solid lightgray;"><a href="../../../../../Bibliography_English.html">Bibliography</a></li>

I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.

This is my CSS.

.body{background-color: white;
      font-family: sans-serif;}
    
 .searchbar{float: right;}
    
 .image{text-align: center;}
    
 .setsumei{margin-left: 20px;
           margin-right: 20px;}
    
 .footer{width: 100%; 
           height: 40px; 
           text-align: center;
           border-top: 1px solid black; 
           position: absolute;
           bottom: 0;
           padding: 10px;}
    
 .page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px; 
}

 .page-wrap:after {
  content: "";
  display: block; 
  }

 .site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 20px; 
}

 .site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}
        

 *, *:before, *:after {
    padding-left: 0;
    margin: 0;
    box-sizing: border-box;
    
}    

 ol, ul {
    list-style: none;
}

 a {
    text-decoration: none;
    color: black;
}
    
 .cp_cont {
    height: auto;
}
    
/* menu */
 .cp_offcm03 {
    position: relative;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
    height: auto;
    padding-top: 0;
    -webkit-transition: transform 0.3s ease-in;
            transition: transform 0.3s ease-in;
    text-align: center;
    color: black;
    background-color: white;
}
 .cp_offcm03 nav,
 .cp_offcm03 ul {
    height: 100%;
}

 .cp_offcm03 li {
    display: inline-block;
    margin-right: -6px;
}

 .cp_offcm03 a {
    display: block;    
    padding: 15px 45px;
    margin-bottom: -5px;
    -webkit-transition: background-color .3s ease-in;
            transition: background-color .3s ease-in;
}
    
 .cp_offcm03 a:hover {
    background-color: lightgray;
}

/* menu toggle */
 #cp_toggle03 {
    display: none;
}

 #cp_toggle03:checked ~ .cp_offcm03 {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 #cp_toggle03:checked ~ .cp_container {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 .cp_mobilebar {
    display: none;
    
}

/* content */
 .cp_container {
    position: relative;
    top: 0;
    padding: 35px auto;
    -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
}   

 .cp_content {
    margin: 0 auto;
    padding: 20px;
    height: 65vh;
    text-align: center;

}

@media (max-width: 1130px)and (min-width: 280px) {
/* menu */
 .cp_offcm03 {
        position: fixed;
        left: -250px;
        overflow-y: hidden;
        width: 250px;
        height: 100%;
        padding-top: 40px;
        color: black;
        background-color: white;
        z-index: 1000;
    }
    
    
 .cp_offcm03 nav {
        background: white;
        border-right: 0.5px solid lightgray;
        margin-left: -210px;
    }
    
    
    
 .cp_offcm03 li {
        display: block;
        margin-right: 0;}

        
        
 .cp_offcm03 a {
        padding: 20px;
        
    }
    
/* menu toggle */
 .cp_mobilebar {
        display: block;
        z-index: 2000;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 25px;
        width: 100%;
        height: 40px;
        background-color: white;
        border-bottom: .05px solid lightgray;
        
        
    }
    
 .cp_menuicon {
        display: block;
        position: relative;
        width: 25px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
 .cp_menuicon > span {
        display: block;
        position: absolute;
        top: 55%;
        margin-top: -0.3em;
        width: 100%;
        height: 0.2em;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease;
                transition: transform .3s ease;
    }
 .cp_menuicon > span:before,
 .cp_menuicon > span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
    
 .cp_menuicon > span:before {
        -webkit-transform: translateY(-0.6em);
                transform: translateY(-0.6em);
    }
 
 .cp_menuicon > span:after {
        -webkit-transform: translateY(0.6em);
                transform: translateY(0.6em);
    }

 #cp_toggle03:checked   .cp_mobilebar .cp_menuicon { 
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    
 #cp_toggle03:checked   .cp_mobilebar span:before,
 #cp_toggle03:checked   .cp_mobilebar span:after {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    
 #cp_toggle03:checked ~ .cp_offcm03 {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    
 #cp_toggle03:checked ~ .cp_container {
        -webkit-transform: translateX(250px);
                transform: translateX(250px);
    }
    
 input:checked ~ #h-menu_black {
    display: block;/*カバーを表示*/
    opacity: .6;
}
    
 #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
}
    
/* content */
 .cp_container {
        top: 60px;
        height: 92vh;
        text-align: center; 
    } 
    
 .noscroll{
        overflow: hidden;
        position: fixed;
    }

CodePudding user response：

To close your hamburger menu after clicking on a link, you can use JavaScript to bind an event listener to the link element that will trigger the menu to close when the link is clicked. Here's an example of how you might do this:

var elements = document.getElementsByTagName('li');

    var closeHamp = function() {
        document.getElementsByClassName('cp_menuicon')[0].click();
    };

    for (var i = 0; i < elements.length; i  ) {
        elements[i].addEventListener('click', closeHamp, false);
    }
.body {
            background-color: white;
            font-family: sans-serif;
        }

        .searchbar {
            float: right;
        }

        .image {
            text-align: center;
        }

        .setsumei {
            margin-left: 20px;
            margin-right: 20px;
        }

        .footer {
            width: 100%;
            height: 40px;
            text-align: center;
            border-top: 1px solid black;
            position: absolute;
            bottom: 0;
            padding: 10px;
        }

        .page-wrap {
            min-height: 100%;
            /* equal to footer height */
            margin-bottom: -40px;
        }

        .page-wrap:after {
            content: "";
            display: block;
        }

        .site-footer,
        .page-wrap:after {
            /* .push must be the same height as footer */
            height: 20px;
        }

        .site-footer {
            text-align: center;
            border-top: 1px solid black;
            padding: 10px;
        }


        *,
        *:before,
        *:after {
            padding-left: 0;
            margin: 0;
            box-sizing: border-box;

        }

        ol,
        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .cp_cont {
            height: auto;
        }

        /* menu */
        .cp_offcm03 {
            position: relative;
            z-index: 5000;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: auto;
            width: 100%;
            height: auto;
            padding-top: 0;
            -webkit-transition: transform 0.3s ease-in;
            transition: transform 0.3s ease-in;
            text-align: center;
            color: black;
            background-color: white;
        }

        .cp_offcm03 nav,
        .cp_offcm03 ul {
            height: 100%;
        }

        .cp_offcm03 li {
            display: inline-block;
            margin-right: -6px;
        }

        .cp_offcm03 a {
            display: block;
            padding: 15px 45px;
            margin-bottom: -5px;
            -webkit-transition: background-color .3s ease-in;
            transition: background-color .3s ease-in;
        }

        .cp_offcm03 a:hover {
            background-color: lightgray;
        }

        /* menu toggle */
        #cp_toggle03 {
            display: none;
        }

        #cp_toggle03:checked~.cp_offcm03 {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        #cp_toggle03:checked~.cp_container {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        .cp_mobilebar {
            display: none;

        }

        /* content */
        .cp_container {
            position: relative;
            top: 0;
            padding: 35px auto;
            -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
        }

        .cp_content {
            margin: 0 auto;
            padding: 20px;
            height: 65vh;
            text-align: center;

        }

        @media (max-width: 1130px)and (min-width: 280px) {

            /* menu */
            .cp_offcm03 {
                position: fixed;
                left: -250px;
                overflow-y: hidden;
                width: 250px;
                height: 100%;
                padding-top: 40px;
                color: black;
                background-color: white;
                z-index: 1000;
            }


            .cp_offcm03 nav {
                background: white;
                border-right: 0.5px solid lightgray;
                margin-left: -210px;
            }



            .cp_offcm03 li {
                display: block;
                margin-right: 0;
            }



            .cp_offcm03 a {
                padding: 20px;

            }

            /* menu toggle */
            .cp_mobilebar {
                display: block;
                z-index: 2000;
                position: relative;
                top: 0;
                left: 0;
                padding: 0 25px;
                width: 100%;
                height: 40px;
                background-color: white;
                border-bottom: .05px solid lightgray;


            }

            .cp_menuicon {
                display: block;
                position: relative;
                width: 25px;
                height: 100%;
                cursor: pointer;
                -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
            }

            .cp_menuicon>span {
                display: block;
                position: absolute;
                top: 55%;
                margin-top: -0.3em;
                width: 100%;
                height: 0.2em;
                border-radius: 1px;
                background-color: black;
                -webkit-transition: transform .3s ease;
                transition: transform .3s ease;
            }

            .cp_menuicon>span:before,
            .cp_menuicon>span:after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 1px;
                background-color: black;
                -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
            }

            .cp_menuicon>span:before {
                -webkit-transform: translateY(-0.6em);
                transform: translateY(-0.6em);
            }

            .cp_menuicon>span:after {
                -webkit-transform: translateY(0.6em);
                transform: translateY(0.6em);
            }

            #cp_toggle03:checked .cp_mobilebar .cp_menuicon {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            #cp_toggle03:checked .cp_mobilebar span:before,
            #cp_toggle03:checked .cp_mobilebar span:after {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }

            #cp_toggle03:checked~.cp_offcm03 {
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }

            #cp_toggle03:checked~.cp_container {
                -webkit-transform: translateX(250px);
                transform: translateX(250px);
            }

            input:checked~#h-menu_black {
                display: block;
                /*カバーを表示*/
                opacity: .6;
            }

            #h-menu_black {
                display: none;
                position: fixed;
                z-index: 999;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: black;
                opacity: 0;
                transition: .7s ease-in-out;
            }

            /* content */
            .cp_container {
                top: 60px;
                height: 92vh;
                text-align: center;
            }

            .noscroll {
                overflow: hidden;
                position: fixed;
            }
        }
<div >
        <input id="cp_toggle03" type="checkbox">
        <div >
            <label for="cp_toggle03" >
                <span></span>
            </label>
        </div>
        <label id="h-menu_black"  for="cp_menuicon"></label>
        <div id="body" ></div>

        <header >

            <nav>
                <ul style="text-align: center; margin-left: 210px; overflow: hidden;">

                    <li style="border-bottom: 1px solid lightgray;"><a href="#">Home</a>
                    </li>
                    <li style="border-bottom: 1px solid lightgray;"><a href="#">Blog</a>
                    </li>
                    <li style="border-bottom: 1px solid lightgray;"><a href='#'>About
                            This Website</a></li>
                    <li style="border-bottom: 1px solid lightgray;"><a href="#">Bibliography</a></li>

Page link：https//www.codepudding.com/database/646344.html

Prev:Trigger that box whith a button?
Next:Why does my Javascript converter raise a ReferenceError?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding