Günny: Responsive Design - Beginnendes Alzheimer?

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

  1. wie wär es mit Bootstrap

    Gruß
    Linkdatenbank
    T-Rex

    1. wie wär es mit Bootstrap

      Nein, es war kein Werkzeug sondern ein kleines HTML/CSS-Beispiel.
      Gruß
      Günny

      1. Hallo

        Nein, es war kein Werkzeug sondern ein kleines HTML/CSS-Beispiel.

        Meinst du evtl. das hier verlinkte Beispiel?

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
        1. 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

          1. 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/

    2. @@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'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. 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

        1. @@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'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. 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.

  2. @@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'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. 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

    2. 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!

      1. Gruß
        Günny

      2. 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

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen chi und Chicago.