Responsive Design - Beginnendes Alzheimer?
Günny
- css
Hallo,
vor wenigen Tagen habe ich (wahrscheinlich in diesem Forum) zufällig ein CSS-Beispiel gesehen,
wo bei großem Fenster eine Navigationsleiste, bei kleinem ein Dropdown-Menu angezeigt wurde.
Erinnert sich der Autor oder ein Leser daran und könnte es mir noch einmal verlinken?
Danke
Günny
wie wär es mit Bootstrap
Gruß
Linkdatenbank
T-Rex
wie wär es mit Bootstrap
Nein, es war kein Werkzeug sondern ein kleines HTML/CSS-Beispiel.
Gruß
Günny
Hallo
Nein, es war kein Werkzeug sondern ein kleines HTML/CSS-Beispiel.
Meinst du evtl. das hier verlinkte Beispiel?
Tschö, Auge
Hallo
Nein, es war kein Werkzeug sondern ein kleines HTML/CSS-Beispiel.
Meinst du evtl. das hier verlinkte Beispiel?
Leider auch nicht,
es waren zwei Definitionen vorhandn, eine (Liste) für den normalen Screen und eine Select-Liste für den kleinen Bildschirm.
Gruß
Günny
Leider auch nicht,
es waren zwei Definitionen vorhandn, eine (Liste) für den normalen Screen und eine Select-Liste für den kleinen Bildschirm.
Gruß
Günny
evtl. dieser: http://astuteo.com/mobilemenu/
@@T-Rex:
nuqneH
wie wär es mit Bootstrap
Bootstrap ist vielleicht dafür geeignet, ohne genügende CSS-Kenntnisse einen Prototypen zu basteln. Für den produktiven Einsatz eher ungeeignet.
Qapla'
Hallo,
Bootstrap ist vielleicht dafür geeignet, ohne genügende CSS-Kenntnisse einen Prototypen zu basteln. Für den produktiven Einsatz eher ungeeignet.
Immer schön auf dem Boden der Tatsachen bleiben. Bootstrap und ähnliche Systeme werden auf tausenden Sites produktiv eingesetzt. Nur weil man sich über die Herangehensweise streiten kann, ist sie nicht weniger brauchbar, um große Sites zu bauen. Im Gegenteil, genau aus diesem Umfeld stammen die Konzepte hinter TWITTER Bootstrap.
Mathias
@@molily:
nuqneH
Bootstrap ist vielleicht dafür geeignet, ohne genügende CSS-Kenntnisse einen Prototypen zu basteln. Für den produktiven Einsatz eher ungeeignet.
Immer schön auf dem Boden der Tatsachen bleiben. Bootstrap und ähnliche Systeme werden auf tausenden Sites produktiv eingesetzt.
„Eher ungeeignet“ schließt „werden eingesetzt“ nicht aus.
Nur weil man sich über die Herangehensweise streiten kann, ist sie nicht weniger brauchbar, um große Sites zu bauen.
Wenn man genau das will, was das Framework bietet, ja. Oft will man etwas anderes. Und dann ist man meist besser dran, nicht massenhaft Bootstrap-Vorgaben zu überschreiben, sodern diese gar nicht erst einzubauen.
Qapla'
Bootstrap ist vielleicht dafür geeignet, ohne genügende CSS-Kenntnisse einen Prototypen zu basteln. Für den produktiven Einsatz eher ungeeignet.
Ich finde Bootstrap irre produktiv. Wir bauen quasi sämtliche Administrationsbereiche für Webanwendungen damit, und manche Teile fließen auch in public frontends. Viele Kunden wünschen sich inzwischen Bootstrap wie damals jQuery.
Doof ist nur, wenn alles (öffentliche) immer gleich nach Bootstrap aussieht.
@@Günny:
nuqneH
vor wenigen Tagen habe ich (wahrscheinlich in diesem Forum) zufällig ein CSS-Beispiel gesehen,
wo bei großem Fenster eine Navigationsleiste, bei kleinem ein Dropdown-Menu angezeigt wurde.
Erinnert sich der Autor oder ein Leser daran und könnte es mir noch einmal verlinken?
Nö, aber mal schnell gebastelt.
Qapla'
Nö, aber mal schnell gebastelt.
Tja, wenn man es kann, wie Du!
Dein Beispiel ist noch einfacher und übersichtlicher, wie ich mich erinnere!
Vielen Dank!
Günny
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!
Om nah hoo pez nyeetz, Guenny!
Ich wollte es auch über das GitHup einstellen, aber das war mir zu kompliziert.
GitHub ist dafür auch nicht gedacht, dabblet ist nicht schwieriger als hier einen Beitrag zu schreiben.
in der Hoffnung dass der Beitrag noch gelesen wird!
Na klar wird der Beitrag noch gelesen. Und sicher auch bald beantwortet.
Matthias