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