Erweiterung von Toggle Menü ohne JavaScript für mobile Navigation

cottton · 4. September 2015

Mir hat die Nav von hier http://www.html-seminar.de/toggle-menue-ohne-javascript.htm gefallen
und hab mich (gezwungen weil ja nicht so mit css befreundet) da mal rangesetzt,
um das Menü auch mit Untermenüs zum laufen zu bekommen.

Demo: http://www.cottton.net/
oder https://jsfiddle.net/pschqazd/ (wobei dort die "result"-watermark über dem Menu-Button nervt )

Da sich ja nun aber die Untermenüs per :hover öffnen, wird das aufm Mobile nicht so gut kommen.
Wie/Wo könnte man denn hier ansetzen, um (auch wieder ohne JS) die Untermenüs per Button zu öffnen?

Ideen/Vorschläge/Änderungen/... immer gern.

Code:
index.html

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
    <meta name="description" content="">
    <meta name="robots" content="index,follow">
    <meta name="keywords" content="">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">




    <!-- <link href="css/reset.css" type="text/css" rel="stylesheet" media="all"> -->
    <link href="css/style.css" type="text/css" rel="stylesheet" media="all">
    <link href="css/header.css" type="text/css" rel="stylesheet" media="all">
    <!-- <script src="js/script.js" type="text/javascript"></script> -->
</head>
<body>
    <header id="menu">
        <div id="header_logo">
            <a href="">
                <img src="http://www.html-seminar.de/bilder/html-kurs-mit-hintergrund.png" alt="">
            </a>
        </div>
        <nav>
            <ul>
                <li><a href="">Startseite</a></li>
                <li>
                    <a href="">HTML lernen</a>
                    <ul>
                        <li><a href="">HTML ... A</a></li>
                        <li><a href="">HTML ... B ...</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">Beispiele</a>
                    <ul>
                        <li><a href="">Beispiel A</a></li>
                        <li><a href="">Beispiel B ...</a></li>
                        <li><a href="">Beispiel C ... ...</a></li>
                        <li><a href="">Beispiel D ...</a></li>
                    </ul>
                </li>
                <li><a href="">Kontakt</a></li>
                <li><a href="">Impressum</a></li>
                <li><a href="">noch was </a></li>
                <li><a href="">und noch was</a></li>
            </ul>
        </nav>
        <a id="menu_button_close" href="#">Close</a>
        <a id="menu_button_open" href="#menu">Menu</i></a>
    </header>
    <section>
        <h1>Toggle Menü ohne JavaScript (CSS:target)</h1>
        <h2>Steuerung für mobile Geräte</h2>
        Original: <a target="_blank" href="http://www.html-seminar.de/toggle-menue-ohne-javascript.htm">Toggle Menü ohne JavaScript (CSS:target)</a>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt.</p>
        <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt.</p>
    </section>
</body>
</html>

Alles anzeigen

header.css

CSS

header {
    width: 100%;
    border-bottom: 2px solid black;
}
/* HEADER LOGO */
header {
    display: block;
    width: 100%;
    color: black;
    background-color: white;
}
header #header_logo {
    display: inline-block;
    width: auto;
}
header #header_logo a {
    text-decoration: none;
}
header #header_logo a img {
    width: 100%;
}




/* HEADER NAV */
header nav {
    display: inline-block;
    width: auto;
}
header nav ul {




}
header nav ul li {
    display: block;
    float: left;
    list-style: none;
}
header nav ul li a {
    display: block;
    text-decoration: none;
    padding: 0.5em;
    color: white;
    background-color: gray;
}
header nav ul li a:hover {
    color: black;
    background: orange;
}
/* HEADER SUB NAV */
header nav ul li ul {
    position: absolute;
}
header nav ul li ul li {
    display: none;
    float: none;
    border-bottom: 1px solid silver;
}
header nav ul li:hover li {
    display: block;
}




/* HEADER MENU-BUTTON */
#menu_button_open, #menu_button_close {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    cursor: pointer;
    padding: 0.5em;
    color: white;
    background: silver;
}
#menu_button_close:hover, #menu_button_open:hover {
    color: black;
    background: orange;
}




@media only screen and (max-width:600px) {
    header {
        border-bottom: 1px solid black;
    }




    /* HEADER LOGO */
    header #header_logo a img {
        width: 60%;
    }




    /* HEADER NAV */
    header nav {
        display: none;
        width: 100%;
    }
    #menu:target nav {
        display: block;
    }
    header nav li {
        width: 100%;
        border-bottom: 1px solid silver;
    }




    /* HEADER SUB NAV */
    header nav ul li ul {
        width: 100%;
    }
    header nav ul li ul li {
        width: 100%;
    }
    header nav ul li ul li a {
        padding-left: 1em;
    }




    /* HEADER MENU-BUTTON */
    #menu_button_open, #menu_button_close {
        display: block;
    }
    #menu:target #menu_button_open {
        display: none;
    }
}

Alles anzeigen

style.css

CSS

* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
section {
    padding: 0.5em;
    float: left;
    width: 100%;
}
h1, p {
    margin: 0.5em 0 0 0;
}

Alles anzeigen

MrMurphy · 4. September 2015

Hallo,

bevor du unnötig Steine ins Rollen bringst: Hast du das überhaupt mal mobil ausprobiert?

Zitat

per :hover öffnen

Laut Anleitung mittels :target. Das sollte demnach auch mobil problemlos funktionieren.

Gruss

MrMurphy

wolf · 4. September 2015

Schau doch einfach mal hier vorbei
...Vor paar Wochen in der Agentur auch ohne JS umgesetzt.. http://www.wuerzburger-kickers.de/

cottton · 5. September 2015

wolf - wie lässt Du die Menus per [>] Button öffnen?
Soweit ich sehen kann nicht mit :target. Wie dann?

wolf · 5. September 2015

Okay, ich zeig es dir ..

Also, der CSS selector '+' selektiert das nachfolgende element, dadurch lässt sich ein 'IF' simulieren

HTML

<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>

CSS

/* Wenn ein Element mit der klasse .b direkt hinter einem Elem. mit der Klasse .a ist ... */
.a + .b {
  color: red;
}

->Das erste B-DIV wird rot
Dann wenden wir einen Trick an..: Ein input[type="checkbox"] lässt sich in css via dem pseudoselector :checked auswerten
Wenn der input gecheckt ist, spricht der Selektor an:

HTML

<input type="checkbox">
<input type="checkbox" checked>

CSS

/* wenn der input 'checked' ist .. verschwindet er */
input:checked {
  display: none;
}

->Der 2. input ist unsichtbar, wenn der 1. markiert wird, verschwindet er auch
Jetzt testen wir einfach ob der Input gecheckt ist oder nicht, ensprechend zeigen wir das menü

HTML

<input id="menuToggle" type="checkbox">
<div class="menu">Das Menü :0</div>

CSS

.menu{
  opacity: .2;
}
input#menuToggle:checked + .menu{
  opacity: 1;
}

Jetzt kannst du das Menü via der checkbox steuern.
Da die checkbox eine ID hat kannst du ihr ein oder mehrere labels zuordnen, die die checkbox 'toggeln' und den input einfach verstecken..

Beispiel kommt gleich...
HIER:
http://codepen.io/wolf-w/pen/jbEdBW?editors=110

cottton · 6. September 2015

Das ist ja besser als :target =)
Ich glaub ich muss mich mehr mit css beschäftigen
Danke!

Erweiterung von Toggle Menü ohne JavaScript für mobile Navigation

Jetzt mitmachen!

Teilen