nicht angemeldet
Hi there,
Nö, aber mal schnell gebastelt.
Das Beispiel enthält
@media screen and (min-width: 20em)
Ich bräuchte es aber umgekehrt, d.h.
@media screen and (max-width: ....)
Dies habe ich geschafft bis auf folgendes:
Wenn der Screen klein ist und das Menu nach unten aufklappt,
1. verschiebt sich der nachfolgende Text nach unten
2. der Rahmen um foo, bar, bat ist breiter als im Original
Wie werden diese beiden Eigenschaften gesteuert?
Hier mein geändertes Beispiel.
<html>
<head>
<style>
/**
* responsive menu
*/
#menu
{
position: relative;
}
#menu h2
{
display: none;
}
#menu ul
{
position: static;
background: white;
display: block;
margin: 0;
border: 1px solid;
padding: 1em;
list-style: none;
}
#menu li
{
display: inline-block;
}
#menu:hover ul,
#menu:focus ul
{
display: block;
}
#menu a
{
display: block;
text-decoration: none;
padding: 1em;
}
@media only screen and (max-width: 500px)
{
#menu h2
{
margin: 0;
font-size: 1rem;
font-weight: normal;
display: block;
}
#menu ul
{
/* position: absolute; */
display: none;
}
#menu li
{
display: block;
}
}
</style>
</head>
<body>
<nav id="menu">
<h2>Menu</h2>
<ul>
<li><a href="http://example.net/foo">foo</a></li>
<li><a href="http://example.net/bar">bar</a></li>
<li><a href="http://example.net/baz">baz</a></li>
</ul>
</nav>
<main>
<h1>Heading</h1>
<p>Here comes the main content.</p>
</main>
</body>
</html>
Ich wollte es auch über das GitHup einstellen, aber das war mir zu kompliziert.
Gruß
Guenny
in der Hoffnung dass der Beitrag noch gelesen wird!
Auge
Gunnar Bittersmann
Matthias Apsel