[CSS] Menü in Seitenleiste: Bei hover Rahmen dicker
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
allgemeine frage
anfang
blocken
code
dank
display
ecke
effekt
http
inneren kanten
navigation
position
problem
radius
rahmen
schrift
span
tag
url
-
Htag/all">allo!
Ich arbeite zur Zeit an einem neuen Design und brauche dabei mal wieder eure Hilfe.
Ich habe links eine Seitenleiste, in der das Menü steht. Hier ein Bild davon... Ich will, dass bei einem Hover über einen Menüpunkt der Rahmen links etwas breiter wird, und zwar mit einer CSS-transition (also "wächst" er). Dabei soll der Text fest stehen bleiben auf der Position, bei der auch ohne hover ist. Außerdem hatte ich die Vorstellung, dass die Ecken des Rahmens, der rauskommt, abgerundet ist. Hier einmal der Code:
Das Menü in HTML:
<nav> <ul id="navigation"> <li><a href="#">Das</a></li> <li><a href="#">sind</a></li> <li><a href="#">hier</a></li> <li><a href="#">Menü-</a></li> <li><a href="#">Punkte</a></li> <li><a href="#">!!!</a></li> </ul> </nav>
Mein bisheriger CSS-Code (Der Rahmen kommt zwar raus, die Schrift bleibt aber nicht wirklich beim mir im Firefox stehen, sondern "zittert" etwas...):
#navigation { margin-top: 300px; list-style: none; list-style-type: none; font-weight: bold; font-size: 1.5em; line-height: 1.7em; padding-left: 0; } #navigation li { padding-left: 60px; display: block; border-left: 10px solid rgba(136, 136, 136,0.65); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #navigation li:hover { padding-left: 50px; border-left: 20px solid rgba(136, 136, 136,0.65); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #navigation li a { display: block; text-decoration: none; }
Eine Demo der Seite ist hier zu finden: http://simon-d.de/Webdesign/.
Ich hoffe, es gibt eine Möglichkeit, das zu realisieren und dass ihr sie mir zeigen könnt.
MfG. Simon D.
Beitrag zuletzt geändert: 17.5.2014 14:01:52 von simon-d -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
War schwerer als ich gedacht habe. Nach ewigem herumprobieren, habe ich einfach nochmal eine div Box in die Navigation gepackt, mit einer absoluten Positionierung, jetzt bliebt die immer schön da. Das Problem war ja, dass transition das padding und den Rahmen nicht genau gleichzeitig ändern konnte, deshalb gab es so ein komisches Stocken. So funktioniert es:
<!DOCTYPE html> <html> <head> <style> body{ padding: 0px; margin: 0px; } nav#navigation > ul > li{ position: relative; list-style: none; } nav#navigation > ul > li > a{ font-size: 25px; color: black; text-decoration: none; font-family: sans-serif; position: relative; padding-left: 10px; border-left: 5px solid #ccc; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } nav#navigation > ul > li > a:hover{ padding-left: 5px; border-left: 20px solid #ccc; } nav#navigation > ul > li > a > div.p{ position: absolute; top: 0px; left: 50px; } </style> </head> <body> <nav id="navigation"> <ul> <li><a href="#"><div class="p">Das</div></a></li> <li><a href="#"><div class="p">ist</div></a></li> <li><a href="#"><div class="p">deine</div></a></li> <li><a href="#"><div class="p">Navigation</div></a></li> </ul> </nav> </body> </html>
Beitrag zuletzt geändert: 17.5.2014 16:41:49 von c143 -
Hallo!
c143 schrieb:
War schwerer als ich gedacht habe. Nach ewigem herumprobieren, habe ich einfach nochmal eine div Box in die Navigation gepackt, mit einer absoluten Positionierung, jetzt bliebt die immer schön da. Das problem war ja, dass transition das padding und den Rahmen nicht genau gleichzeitig ändern konnte, deshalb gab es so ein komisches stocken. So funktioniert es:
<!DOCTYPE html> <html> <head> <style> body{ padding: 0px; margin: 0px; } nav#navigation > ul > li{ position: relative; list-style: none; } nav#navigation > ul > li > a{ font-size: 25px; color: black; text-decoration: none; font-family: sans-serif; position: relative; padding-left: 10px; border-left: 5px solid #ccc; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } nav#navigation > ul > li > a:hover{ padding-left: 5px; border-left: 20px solid #ccc; } nav#navigation > ul > li > a > div.p{ position: absolute; top: 0px; left: 50px; } </style> </head> <body> <nav id="navigation"> <ul> <li><a href="#"><div class="p">Das</div></a></li> <li><a href="#"><div class="p">ist</div></a></li> <li><a href="#"><div class="p">deine</div></a></li> <li><a href="#"><div class="p">Navigation</div></a></li> </ul> </nav> </body> </html>
Riesengroßen Dank, erst einmal!!!
Ich habe es zwar noch nicht ausprobiert, doch der Ansatz hört sich gut an. Jetzt hätte ich bloß noch die allgemeine Frage, ob das, was ich mit den Bordern vorhabe, überhaupt möglich ist... Ich möchte, dass, der Rahmen, so wie jetzt, am Anfang ganz normal ist. Wenn der Rahmen aber "rauskommt", soll das, was dazukommt rechts an den Ecken abgerundet sein!
MfG. Simon D.
EDIT: Ich habe gerade dein Beispiel genauso, wie du es hier reingeschrieben hast, kopiert und ausgeführt und es funktionierte leider nicht. Die Schrift kommt rechts raus, so wie es wäre, wenn ich beim verlängern des Rahmens nicht das padding verkürzt hätte. Außerdem ist der Display: block Effekt nicht mehr wirksam, den ich reingepackt habe, damit der Button nicht nur auf der Schrift klickbar ist...
Beitrag zuletzt geändert: 17.5.2014 16:52:04 von simon-d -
simon-d schrieb:
Jetzt hätte ich bloß noch die allgemeine Frage, ob das, was ich mit den Bordern vorhabe, überhaupt möglich ist... Ich möchte, dass, der Rahmen, so wie jetzt, am Anfang ganz normal ist. Wenn der Rahmen aber "rauskommt", soll das, was dazukommt rechts an den Ecken abgerundet sein!
Mit einem Rahmen ist das nicht möglich. Du kannst dir das so vorstellen: Wenn du einen kompletten hättest, und nicht nur wie bei dir border-left, dann kann man kein Radius in den inneren Kanten machen. Und das wäre bei dir der Fall, da wo du die Radien willst, ist eigentlich die innere Kante. Du kannst den Radius nur links hinklatschen, aber da bringt er ja nichts. -
c143 schrieb:
simon-d schrieb:
Jetzt hätte ich bloß noch die allgemeine Frage, ob das, was ich mit den Bordern vorhabe, überhaupt möglich ist... Ich möchte, dass, der Rahmen, so wie jetzt, am Anfang ganz normal ist. Wenn der Rahmen aber "rauskommt", soll das, was dazukommt rechts an den Ecken abgerundet sein!
Mit einem Rahmen ist das nicht möglich. Du kannst dir das so vorstellen: Wenn du einen kompletten hättest, und nicht nur wie bei dir border-left, dann kann man kein Radius in den inneren Kanten machen. Und das wäre bei dir der Fall, da wo du die Radien willst, ist eigentlich die innere Kante. Du kannst den Radius nur links hinklatschen, aber da bringt er ja nichts.
Ok, dann weiß ich Bescheid... Das war mir sowieso nicht soooo wichtig. Aber bitte schau mal in den Edit des letzten Beitrags meinerseits: Deine Lösung funktioniert leider nicht bei mir im Firefox 29.0.1...
MfG. Simon D.
EDIT: In Chrome funktionierts. In Safari wird der gesamte Text übereinander dargestellt. In Opera funktionierts, genauso wie in Chrome
Beitrag zuletzt geändert: 17.5.2014 16:58:22 von simon-d -
Ich hab c143 sein Code mal kopiert und manipuliert (entschlackt und den Aufbau gegeben, den ich gewohnt bin (damit ich besser durchblicke
))
Meine Grundidee - anstatt dem a-tag einen Rahmen zu geben, wird davor einfach ein span gelegt, das rechts einen Rahmen hat - also im Listenpunkt sieht das so aus
[li][span][a][/li]
Den Rahmen des span-Blocks kann man nun also beliebig manipulieren, und zwar liegt der hover nicht auf dem a-tag, sondern auf dem li-tag selbst.
Die Schriftposition im a-tag wird mittels position:absolute in abhängigkeit zum li-tag angegeben; damit ist dem a-tag wurscht, was im span-tag passiert weil es dazu positionierungstechnich keinen Bezug mehr hat.
Da der span-tag den Rahmen rechts hat, kann man ihn auch problemlos abrunden.
Link (getetstet im aktuellen Safari und Firefox 17)(bissl grau unterlegt um zu sehen wo was beginnt etc)):
http://www.sonokowitsch.de/stuff/runde_ecken.html
Code:
<!DOCTYPE html> <html> <head> <style> body{ padding: 0px; margin: 0px; } nav#navigation ul li{ position: relative; list-style: none; background-color:#ccc; width:200px; } nav#navigation ul li a, nav#navigation ul li span { font-size: 25px; color: black; text-decoration: none; font-family: sans-serif; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } nav#navigation ul li a{ position:absolute; left:30px; padding-left: 5px; } nav#navigation ul li span{ border-right: 5px solid #555; } nav#navigation ul li:hover span{ border-right: 20px solid #555; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } </style> </head> <body> <nav id="navigation"> <ul> <li><span></span><a href="#">Das</a></li> <li><span></span><a href="#">geht</a></li> <li><span></span><a href="#">alles</a></li> <li><span></span><a href="#">subba</a></li> </ul> </nav> </body> </html>
Ich hotte, das geht auch in anderen Browsern, aber ich teste das mal jetzt nicht alles durch.
Grüße!
edit:
Problem könnte jetzt sein, daß man beim li-Tag den hover-effekt hat, aber nur die Schrift anklicken kann. Wenn das stört, kann man mit ein bissl mehr CSS-Aufwand sicher auch [a][span 1][span 2][/a] verbauen ('n bissl versimpelt).
Beitrag zuletzt geändert: 17.5.2014 21:14:12 von sonok -
Hallo!
sonok schrieb:
Ich hab c143 sein Code mal kopiert und manipuliert (entschlackt und den Aufbau gegeben, den ich gewohnt bin (damit ich besser durchblicke))
Meine Grundidee - anstatt dem a-tag einen Rahmen zu geben, wird davor einfach ein span gelegt, das rechts einen Rahmen hat - also im Listenpunkt sieht das so aus
[li][span][a][/li]
Den Rahmen des span-Blocks kann man nun also beliebig manipulieren, und zwar liegt der hover nicht auf dem a-tag, sondern auf dem li-tag selbst.
Die Schriftposition im a-tag wird mittels position:absolute in abhängigkeit zum li-tag angegeben; damit ist dem a-tag wurscht, was im span-tag passiert weil es dazu positionierungstechnich keinen Bezug mehr hat.
Da der span-tag den Rahmen rechts hat, kann man ihn auch problemlos abrunden.
Link (getetstet im aktuellen Safari und Firefox 17)(bissl grau unterlegt um zu sehen wo was beginnt etc)):
http://www.sonokowitsch.de/stuff/runde_ecken.html
Code:
<!DOCTYPE html> <html> <head> <style> body{ padding: 0px; margin: 0px; } nav#navigation ul li{ position: relative; list-style: none; background-color:#ccc; width:200px; } nav#navigation ul li a, nav#navigation ul li span { font-size: 25px; color: black; text-decoration: none; font-family: sans-serif; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } nav#navigation ul li a{ position:absolute; left:30px; padding-left: 5px; } nav#navigation ul li span{ border-right: 5px solid #555; } nav#navigation ul li:hover span{ border-right: 20px solid #555; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } </style> </head> <body> <nav id="navigation"> <ul> <li><span></span><a href="#">Das</a></li> <li><span></span><a href="#">geht</a></li> <li><span></span><a href="#">alles</a></li> <li><span></span><a href="#">subba</a></li> </ul> </nav> </body> </html>
Ich hotte, das geht auch in anderen Browsern, aber ich teste das mal jetzt nicht alles durch.
Grüße!
edit:
Problem könnte jetzt sein, daß man beim li-Tag den hover-effekt hat, aber nur die Schrift anklicken kann. Wenn das stört, kann man mit ein bissl mehr CSS-Aufwand sicher auch [a][span 1][span 2][/a] verbauen ('n bissl versimpelt).
DANKE, DANKE, DANKE!!!!
Es funktioniert in allen Browsern, die ich getestet habe (IE 11, FF 29, Safari 5.1.7 und Opera 15.0)!!
Ich baue das dann morgen mal ein.
MfG. Simon D.
Von mir ein Upvote für euch beide! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
