Float box design + script fehler suche.

Sempervivum

Erfahrenes Mitglied
Ich meine das wen ich mit vw oder prozent arbeiten würde wäre der text zu gross.
Das leuchtet ein und bei font-size gibt es ja kein max-height oder max-size. Vielleicht besser mit Mediaqueries die Schriftgröße stufenweise anpassen?

Ich stelle mir vor das die nav bar selbst bleibt der text jedoch durch so ein burger ersetzt wird.
Das wäre genau das, was ich oben auch meinte. Ein Burger Menü ist sehr verbreitet und bewährt und jeden Benutzer kennt es. Kann ich empfehlen.
 

Andrin.Spitzer

Erfahrenes Mitglied
Das leuchtet ein und bei font-size gibt es ja kein max-height oder max-size. Vielleicht besser mit Mediaqueries die Schriftgröße stufenweise anpassen?

Hay das hatte ich bereits einmal im anderen Beitrag, jedoch wurde mir das wegen der Benutzerfreundlichkeit abgeraten. aber wenn ich das mit dem burger mache ist dieses problem so oder so aus der welt.
 

Sempervivum

Erfahrenes Mitglied
Hay das hatte ich bereits einmal im anderen Beitrag, jedoch wurde mir das wegen der Benutzerfreundlichkeit abgeraten.
Ich kann mich auch an so etwas erinnern, aber finde den Thread nicht wieder. An einen Einwand wegen Benutzerfreundlichkeit kann ich mich nicht erinnern. Hast Du den Thread noch zur Hand?
 

Andrin.Spitzer

Erfahrenes Mitglied
Hay hab da was gefunden un bereits etwas angepasst.

Wie kann ich nun die standart nav durch diese ersetzten?


HTML:
<nav role="navigation">
  <div id="menuToggle">
    <input type="checkbox" />
    <span></span>
    <span></span>
    <span></span>
    <ul id="menu">
      <a href="#home"><li>Home</li></a>
      <a href="#team"><li>Team</li></a>
      <a href="#register"><li>Register</li></a>
      <a href="#sponsoren"><li>Contact</li></a>
    </ul>
  </div>
</nav>

CSS:
#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
 
  z-index: 1;
 
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
 
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
 
  cursor: pointer;
 
  opacity: 0;
  z-index: 2;
 
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
 
  background: #cdcdcd;
  border-radius: 3px;
 
  z-index: 1;
 
  transform-origin: 4px 0px;
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
 
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
 
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}
 

Sempervivum

Erfahrenes Mitglied
Benutzerfreundlichkeit: Das trifft natürlich zu, ich kann mich erinnern, dass mir sehr kleine Schriftgrößen früher auch unangenehm aufgefallen sind. Dies bezieht sich jedoch nicht auf die Umschaltung mit Mediaqueries, da dabei die Schrift ja nicht beliebig klein wird sondern so, wie Du es für die kleinste Viewport-Breite festlegst.

Anpassung deines Menüs:
Dieses:
Code:
    <ul id="menu">
      <a href="#home"><li>Home</li></a>
      <a href="#team"><li>Team</li></a>
      <a href="#register"><li>Register</li></a>
      <a href="#sponsoren"><li>Contact</li></a>
    </ul>
ist ja der Kern des Menüs und als erstes müsstest Du die Links und die Texte an deine Anforderungen anpassen. Und dann wieder mit CSS gestalten, so dass es so aussieht wie früher. Es sollte möglich sein, dein eigenes CSS von dem vorigen Stand dafür zu verwenden.
 

Andrin.Spitzer

Erfahrenes Mitglied
Code:
    <ul id="menu">
      <a href="#home"><li>Home</li></a>
      <a href="#team"><li>Team</li></a>
      <a href="#register"><li>Register</li></a>
      <a href="#sponsoren"><li>Contact</li></a>
    </ul>
ist ja der Kern des Menüs und als erstes müsstest Du die Links und die Texte an deine Anforderungen anpassen. Und dann wieder mit CSS gestalten, so dass es so aussieht wie früher. Es sollte möglich sein, dein eigenes CSS von dem vorigen Stand dafür zu verwenden.

Hay ich komme etzt nicht richtig nach was du damit meinst das ist dan das burger menu das bei dem kleinen bildschirm bzw handy anstatt der standart nav erscheint.
 

Sempervivum

Erfahrenes Mitglied
Das Menü selber ist ein und das selbe, es wird nur variabel mit CSS gestaltet, d. h. breites Browserfenster: Menü ist immer sichtbar und horizontal angeordnet, d. h. so wie jetzt. Und schmales Browserfenster: Menü wird durch Tipp auf Burger sichtbar und ist vertikal angeordnet. Dazu brauchst Du dann ein abweichendes CSS.

Mir fällt gerade auf: Ein a-Tag direkt in einem ul ist nicht valide, Du musst es in das li verschieben:
<li><a href="#home">Home</a></li>
 
Zuletzt bearbeitet:

Andrin.Spitzer

Erfahrenes Mitglied
Achso du meinst das ich muss nicht ein 2tes menu erstellen das dass andere ersetzt sondern einfach ein 2tes css design das bei zu kleinem bild eingreift?
 

Sempervivum

Erfahrenes Mitglied
Ja genau. Wenn Du das Menü zwei Mal hättest, müsstest Du ja auch zwei editieren, wenn sich mal etwas ändert.