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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

mitchel-ix

Neues Mitglied
14 Oktober 2018
6
0
1
36
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

Neues Mitglied
14 Oktober 2018
6
0
1
36
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>
 
Werbung: