Google Bewertung
5.0
reDim GmbH | Full Service Internetagentur
5.0
23 Rezensionen
Profilbild von Silvia Heitmeier
vor einer Woche
Top Beratung und super beschrieben. Tolles Tutorial - auch für mich verständlich ;-) Auch die telefonische Beratung hat mir sehr schnell und positiv weiterhelfen können!!!! yippey
Silvia Heitmeier
Profilbild von [MA] Music Academy
vor 2 Wochen
Super Service, immer direkt kontaktierbar, sehr zuverlässig, nehmen sich Zeit, direkter Fluss von Informationen bei Änderungen, gemeinsames Erarbeiten, reDim ist ein toller starker Partner, danke!
[MA] Music Academy
Profilbild von Goran Šušnjara
vor 2 Wochen
Sehr gute Beratung und Planung.. Kompetenz,sehr professionell.. Beste Grüße
Goran Šušnjara
Profilbild von Bea Heinze
vor 2 Wochen
reDim bietet einen umfassenden und kompetenten Service in den Bereichen Webdesign und Onlinemarketing. Das Team ist professionell, freundlich und kreativ, die Kommunikation schnell und unkompliziert. Von der Beratung bis zur Umsetzung und weiterer Unterstützung, egal ob großer Relaunch oder kleine Änderung – wir haben uns stets sehr gut aufgehoben gefühlt. Nach Homepage und Intranet ist reDim auch für unseren Newsletter verantwortlich.
Bea Heinze
Profilbild von Wiebke
vor 2 Jahren
Absolut freundlich, verbindlich, flexibel, entgegenkommend und zugewandt... Ich habe mich in einer Notsituation sehr gut aufgefangen gefühlt - ich erhielt sofort Beratung und Hilfe, und der Fehler in meiner Website wurde sehr kurzfristig und kompetent behoben! Werde mich jederzeit wieder an reDim GmbH wenden, danke!
Wiebke
 

Menü springt bei Hover-Effekt "font-weight: bold"

Menü verschiebt sich bei hover Verschiebung von Navigation bei hover bold vermeiden Menüpunkte hüpfen in Navigationsleiste bei Hover-Effekt bold

Wer Webseiten selber erstellt, wird mit Sicherheit das Problem des hüpfenden Menüs kennen. Verpasst man den Menüpunkten in einem horizontalen Menü beim Hover ein „font-weight: bold;“, verschieben sich die Menüpunkte rechts daneben. Das liegt daran, dass die Schrift im fetten Zustand mehr Platz verbraucht, als im regulären Zustand.

Dieses Springen des Menüs ist nicht schön, kann aber durch einige CSS-Tricks vermieden werden. Im Folgenden werden drei mögliche Lösungen für dieses Problem erläutert.

Lösung 1 - Das „li“ erhält eine feste Breite

Wir gehen von dieser Menüstruktur aus:

<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Neuigkeiten</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Nun geben wir dem „li“ per CSS eine „width“:

li { display:inline-block; width: 100px; }

a:hover { font-weight:bold; }

Der Nachteil an dieser Lösung: Sie ist nicht sehr dynamisch. Dadurch, dass die Wörter nicht gleich lang sind, sollte die Breite durch Klassen individuell für jeden Punkt gesetzt werden. Ändert sich ein Menüpunkt, muss auch die Breite neu festgelegt werden.

Lösung 2 - text-shadow anstatt font-weight

Nutzt man bei dem Hovereffekt nicht „font-weight: bold;“ sondern:

a:hover { text-shadow: 1px 0 0 black; }

umgeht man das Problem mit den sich verschiebenden Menüpunkten. Man sieht allerdings auch, dass sich der Textschatten optisch von dem fetten Text unterscheidet, was diese Lösung auch nicht optimal macht.

Lösung 3 – Pseudo-Element ::after

Wir gehen wieder von derselben Menüstruktur aus wie in Lösung 1, jedoch bekommt jeder Unterpunkt noch das Attribut „name“, wie hier zu sehen:

<ul>
<li><a href="#" name="Start">Start</a></li>
<li><a href="#" name="Über mich">Über mich</a></li>
<li><a href="#" name="Galerie">Galerie</a></li>
<li><a href="#" name="Neuigkeiten">Neuigkeiten</a></li>
<li><a href="#" name="Kontakt">Kontakt</a></li>
</ul>

Dabei ist es wichtig, dass der Wert exakt dieselbe Schreibweise hat, wie der Menüpunkt an sich. Hierbei also auch auf Groß- und Kleinschreibung, sowie Leerzeichen, Sonderzeichen etc. achten. Der CSS-Code für die Lösung sieht wie folgt aus:

li { display: inline-block; }

a:hover { font-weight:bold; }

a::after { display:block; content:attr(name); font-weight:bold; visibility: hidden; overflow: hidden; height: 0px; } 

Was passiert hier? Durch das Pseudo-Element ::after wird der Platz, den der Hover-Effekt braucht, schon im regulären Zustand unsichtbar beansprucht. Dadurch werden die übrigen Menüpunkte beim Hover nicht verdrängt.

Natürlich müssen hierbei einige Codezeilen an den eigenen CSS-Code angepasst werden. Wenn das „a“ zum Beispiel ein „padding“ gesetzt hat, muss dieses auch beim a::after gesetzt werden. Diese Lösung funktioniert in allen gängigen und aktuellen Browsern.

Kategorien:

  • HTML & CSS
  • Tutorial
  • Webdesign
Joomla Partner
Newsletter2Go Partner
eRecht24 Partner
...
JETZT BERATEN LASSEN!

Marcel Stein

+49 6181 3696960
team@redim.de

WIR VERWENDEN COOKIES

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies).

Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.