Wie erstelle ich ein Menü, das so aussieht ...
Ich möchte die PSD-Bilder nicht verwenden. Ich würde es vorziehen, Symbole aus einem Paket wie zu verwenden FontAwesome zu verwenden und die Hintergründe / CSS in CSS generieren zu lassen.
Eine Version des Menüs, das die PSD verwendet, um Bilder des Tooltips zu generieren und diese dann zu verwenden, finden Sie hier .
css
tooltip
css-shapes
ssb
quelle
quelle
Antworten:
Fast 3 Jahre später nahm ich mir endlich die Zeit, dies noch einmal zu überdenken und eine verbesserte Version zu veröffentlichen. Sie können die ursprüngliche Antwort am Ende weiterhin als Referenz anzeigen.
Während SVG die bessere Wahl sein mag, war es mein Ziel, nur HTML und CSS, kein JS, kein SVG, keine Bilder (außer dem Hintergrund auf dem Stammelement) beizubehalten.
Demo 2015
Screenshots
Chrome 43:
Firefox 38:
IE 11:
Code
Der HTML-Code ist ziemlich einfach. Ich benutze den Checkbox-Hack, um das Menü anzuzeigen / auszublenden.
Ich verwende Sass, um dies logisch zu halten und es einfacher zu machen, Dinge bei Bedarf zu ändern. Stark kommentiert.
Code-Snippet anzeigen
Ursprüngliche Antwort
Mein Versuch, mit reinem CSS etwas Ähnliches zu machen:
Demo
(Klicken Sie auf den Stern)
Funktioniert in Chrome, Firefox (ein etwas seltsamer Unschärfeeffekt beim Schweben), Opera (Enden sehen kleiner aus) und Safari (Enden sehen kleiner aus).
quelle
:focus
Weg" . Eigentlich ist es eine ziemlich alte Methode, die Stu Nicholls vor einigen Jahren in seinen Experimenten auf cssplay.co.uk zum ersten Mal verwendet hat. Im obigen CSS ist es das.button:focus + .tip
, was den Trick macht.Anas Antwort ist Kick Ass! Das ist ein ernstes CSS-Fu.
Meine Lösung ist vielleicht nicht ganz das, was Sie sich erhoffen, aber es ist eine andere mögliche Lösung. Ich arbeite gerade an einer Kompassoberfläche, die einen ähnlichen Stil von bogenförmigen Tasten hat. Ich habe beschlossen, es mit Raphael zu entwickeln und SVG zu entwickeln.
Ich habe in Illustrator eine Bogenform erstellt, das SVG dafür exportiert, die Pfaddefinition für den Bogen aus der exportierten SVG-Datei abgerufen und Raphael verwendet, um meine Schnittstelle damit zu erstellen.
Hier ist eine JSFiddle davon .
Hier ist das JavaScript:
Hier ist das zugehörige CSS:
quelle
Ein weiterer sehr guter Weg wäre die Verwendung von JavaScript für die Positionierung.
DEMO + TUTORIAL zum Erstellen eines animierten Radialmenüs
Ein Vorteil dieser Methode ist, dass Sie eine beliebige Anzahl von Elementen verwenden können und diese weiterhin radial positioniert werden, ohne dass Sie Ihr CSS ändern müssen.
Das fragliche JavaScript lautet:
quelle