Float box design + script fehler suche.

Ich meine das wen ich mit vw oder prozent arbeiten würde wäre der text zu gross.
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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.
 
Sempervivum hat gesagt.:
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?
Zum Vergrößern anklicken....

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.
 
Hay das hatte ich bereits einmal im anderen Beitrag, jedoch wurde mir das wegen der Benutzerfreundlichkeit abgeraten.
Zum Vergrößern anklicken....
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?
 
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;
}
 
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.
 
Sempervivum hat gesagt.:
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.
Zum Vergrößern anklicken....

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.
 
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:
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?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück