[ERLEDIGT] ONE-PAGE Menü automatisch schließen

mitchel-ix · 13 Juni 2019

Erst einmal Hallo alle zusammen,

ich bin gerade dabei mir eine eigene ONE-Page zu erstellen und bin gerade an einem Punkt wo ich nicht so richtig weiter komme.

Zur Frage ich habe auf meinem Template ein Slide Menü das Mittels Checkbox auf und zu geklappt werden kann, nun möchte ich gerne das sobald ich einen Link benutze, das die Checkbox automatisch abgewählt und sich das Menü schließt. Kann mir da jemand mit einer Hilfestellung zur Seite stehen und oder eine mögliche Lösung für bieten?

Hier mal mein HTML & CSS Script:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Seitentitel</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header id="nav-box">
        <!-- Titellink --->
        <a id="titel" href="">Titel</a>
        
        <!-- Menü-Checkbox & Button -->
        <input type="checkbox" id="checkbox">
        <label for="checkbox" id="button">
            <span></span><span></span><span></span>
        </label>
        
        <!-- Menu -->
        <nav id="menu">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#works">Works</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            home
        </section>
        
        <section id="about">
            about
        </section>
        
        <section id="works">
            works
        </section>
        
        <section id="contact">
            contact
        </section>
        
        <footer>
            footer
        </footer>
    </main>
    
</body>
</html>

CSS:

/*======================================================================
#=> CSS-RESETS
======================================================================*/

*{margin:0; padding:0; font-size:100%;}
body{background:#222222;}

/*======================================================================
#=> WEBSEITE-Grundlayouteinstellungen
======================================================================*/

/* HEADER ------------------------------------------------------------*/

header{
    display: table;
    position: fixed;
    top: 0; width: 100%; height: 40px;
    background: #000000;
    box-shadow: 0 8px 8px -6px #000000;
    z-index:10000;
}

/* HEADER TITEL ------------------------------------------------------*/

header #titel{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    font-size: 130%;
    padding-left: 10px;
    text-decoration: none;
}

/* Header CHECKBOX-BUTTON FÜR HAUPTMENÜ ------------------------------*/

header #checkbox{
    display: none;
}
header #button{
    float: right;
    display: inline-block;
    width: 40px; height: 40px;
    margin-right: 8px;
    cursor: pointer;
}
header #button span{
    display: block;
    margin: 0 auto;
    width: 35px; height: 3px;
    background: #ffffff;
    opacity: 1;
    transition: 0.2s;
}
header #button span:nth-child(1){
    margin-top: 10px;
}   
header #button span:nth-child(2),
header #button span:nth-child(3){
    margin-top: 5px;
}
header #checkbox:checked ~ #button span:nth-child(2){ width: 60%;}
header #checkbox:checked ~ #button span:nth-child(3){ width: 30%;}
header #menu{
    position: fixed;
    top: 40px; right: -100%; bottom: 0; width: 200px;
    background: #000000;
    opacity: 0.9;
    transition: 0.5s;
}
header #checkbox:checked ~ #menu{right: 0;}

/* HEADER HAUPTMENÜ --------------------------------------------------*/

header #menu li{
    list-style: none;
    padding: 10px;
    border-bottom: solid 1px #2a2a2a;
    transition: 0.5s;
}     
header #menu li:hover{
    padding-left: 15px;
    opacity: 0.6;
}   
header #menu li a{
    color: #ffffff;
    text-decoration: none;
} 

/* MAIN ( HAUPTINHALT DER WEBSEITE ) ---------------------------------*/

main{
    position:fixed; top:40px; right:0; bottom:0; left:0;
    overflow-y:scroll;
}

/* MAIN SECTIONS ( PAGES ) -------------------------------------------*/

main section{
    min-height:100%;
}

/* MAIN SECTIONS ( HOME ) --------------------------------------------*/

main #home{
    background:yellow;
}

/* MAIN SECTIONS ( ABOUT ) -------------------------------------------*/

main #about{
    background:white;
}

/* MAIN SECTIONS ( WORKS ) -------------------------------------------*/

main #works{
    background:green;
}

/* MAIN SECTIONS ( CONTACT ) -----------------------------------------*/

main #contact{
    background:orange;
}

/* MAIN FOOTER -------------------------------------------------------*/

main footer{
    color:slateGray;
}

mitchel-ix · 13 Juni 2019

Habe da dann doch noch eine Lösung hier im Forum gefunden und konnte es mit dieser JS Funktion Lösen .

Javascript:

<script>
    var links = document.querySelectorAll("#menu a");
    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function () {
            document.getElementById("checkbox").checked = false;
        })
    }
</script>

[ERLEDIGT] ONE-PAGE Menü automatisch schließen

mitchel-ix

Neues Mitglied

mitchel-ix

Neues Mitglied

Neueste Beiträge